30 การทดสอบ WebGL ที่เพิ่งเกิดขึ้น!

ดูเถิดสำหรับเครื่องมือชั้นเยี่ยมที่มีพระสัญญาอันยิ่งใหญ่กำลังเข้ามาในตาของคุณ มันรวดเร็วและราบรื่น มันแสดงผลแบบ 3D และด้วยการรวมเข้าด้วยกันทำให้แอนิเมชั่นเดาว่ามันคืออะไร? HTML5? CSS3? ไม่เรียกว่า WebGL ห้องสมุดซอฟต์แวร์ที่ขยายขีดความสามารถของ JavaScript ในการสร้างกราฟิกสามมิติแบบโต้ตอบและใช่โดยไม่ต้องมีปลั๊กอิน!

ในตัวอย่างนี้เราไม่ต้องการให้คุณเห็นสิ่งปกติ เราต้องการที่จะแสดงให้คุณ 30 การทดสอบ WebGLs ที่สร้างขึ้นโดยนักพัฒนามืออาชีพอย่างรอบคอบเพื่อให้คุณได้เห็นศักยภาพที่แท้จริงของ WebGL ซึ่งไม่เพียงสร้างแรงบันดาลใจ แต่ยังช่วยให้คุณได้เห็นว่าอนาคตของเว็บจะเป็นอย่างไร ข้ามไปสู่อนาคตหลังจากคลิก!

ขอแนะนำอย่างยิ่งให้คุณดูการสาธิตเหล่านี้โดยใช้ Google Chrome เวอร์ชันล่าสุด การสาธิตส่วนใหญ่รองรับ Firefox, Google Chrome และ Safari เวอร์ชันล่าสุด.

3 Dreams of Black

ประพันธ์โดย Google Data Arts Team 3 Dreams of Black นำคุณเข้าสู่ 3 โลกแห่งความฝันที่สร้างขึ้นด้วยการผสมผสานภาพวาด 2D และภาพเคลื่อนไหวที่ผสมผสานกันอย่างลงตัวกับลำดับ 3D แบบโต้ตอบ ตรวจสอบสิ่งมหัศจรรย์สำหรับประสบการณ์ที่ยอดเยี่ยม!

อนุภาคปริมาณภาพเคลื่อนไหว

สัตว์ตัวนี้เป็นศิลปะการเคลื่อนไหวที่สร้างขึ้นโดยอนุภาค 3 มิติโดยใช้พื้นผิวลอยและวัตถุบัฟเฟอร์เฟรม แปลกใจมากขึ้นถ้าคุณเลื่อนเมาส์!

พิพิธภัณฑ์สัตว์น้ำ

จำลองสภาพแวดล้อมใต้น้ำหรือไม่? นั่นไม่ใช่ปัญหาสำหรับ WebGL การสาธิตประกอบไปด้วยโมเดล 3 มิติพร้อมพื้นผิวคุณภาพสูง, ภาพเคลื่อนไหวของฉาก, ภาพเคลื่อนไหวของ Pixel Shader, การสะท้อน, การหักเหและการกัดกร่อน, ทุกสิ่งที่จะนำไปสู่ฉากใต้น้ำที่สมจริง!

azathioprine

น่าจะเป็นการสาธิต WebGL ที่ยิ่งใหญ่ที่สุด หมวกปลายให้ผู้เขียนโจเชน Wilhelmy.

ทริปเที่ยว

หากคุณอยากสัมผัสกับ 3D นี่เป็นตัวอย่างที่ดีที่สุดสำหรับคุณลองทำสมาธิด้วยความงามอันยิ่งใหญ่ของกราฟิกที่สร้างโดย WebGL โดยใช้สูตร Martin's Hopalong.

แมงกระพรุน

“การสร้างแบบจำลองขั้นตอนดำเนินการกับ Side FX Houdini ส่งออกด้วยผู้ส่งออก Python ในรูปแบบ json พื้นผิวที่ทาสีโดยใช้ Autodesk Mudbox เคลื่อนไหวด้วยจุดสุดยอด.”

Chrysaora

นี่ไม่ใช่การสาธิตภาพเคลื่อนไหวปกติ แต่มีโครงกระดูกจำลองแบบไดนามิกการจำลองฝั่งเซิร์ฟเวอร์บางส่วนและการซิงโครไนซ์กับ WebSocket ระบบอนุภาคที่หันหน้าเข้าหากล้องแสงเอฟเฟกต์เชิงปริมาตร ในระยะสั้นการทดลองที่น่าทึ่งกับงานที่ซับซ้อน.

HelloRacer

ขอแนะนำการจำลองรถแบบโต้ตอบระดับสูงที่ HelloEnjoy มอบให้คุณโดยเฉพาะ.

วัสดุ: รถยนต์

Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 และ Chevrolet Camaro ในเบราว์เซอร์ของคุณ เลือกนั่งของคุณและเพลิดเพลินกับมุมมอง Heck คุณสามารถเลือกสีของพวกเขาได้.

WebGL Cars

อนาคตของซีรี่ส์ Need For Speed ​​จะอยู่ในเว็บเบราว์เซอร์ ทะเยอทะยานเกินไป? ไม่แน่นอนถ้าคุณได้เยี่ยมชมรถยนต์เหล่านี้ที่แสดงผลด้วยแผนที่คิวบ์แบบไดนามิกแผนที่เงาและเอฟเฟกต์การประมวลผลภายหลัง.

หุ่นยนต์ของฉัน Nation

ถ้าตัวเลขไม่ใช่รูปโปรดของคุณลองสร้างหุ่นยนต์ที่เท่ห์และมีเสน่ห์แล้วแสดงให้เพื่อนของคุณเห็น! คุณสามารถใช้เงินของคุณเพื่อทำให้เป็นเรื่องจริงได้.

Pacmaze

เกม 3D Pac-Man เป็นอย่างไร? กราฟิกและเกมเพลย์นั้นดีและที่สำคัญที่สุดคือความสนุก!

หมวกฮูดสีแดง

ตอนนี้ที่นี่เป็นหนึ่งที่น่ารัก ... หรือหนึ่งในเลือด เกมนี้ไม่มีอะไรนอกจากเกมที่น่าสนใจที่จะแสดงความสามารถของ WebGL เมื่อพัฒนาเป็นเกมยิงจากบนลงล่าง สนุกและสนุกอย่างแน่นอน.

TankWorld

คุณคิดว่ามันเป็นเกมยิงรถถังที่สนุกสนานพร้อมอาวุธที่ใช้และแผนที่ในการสำรวจและในบางระดับคุณสามารถรับเฮลิคอปเตอร์เพื่อสำรวจโลกได้! มันเป็นมากกว่าเกมทั่วไปและกราฟิกดูสบายตา!

Pulpo

ตัวอย่างที่ดีที่สุดของความเรียบง่ายของกราฟิกและแอนิเมชั่นที่สามารถสร้างความประทับใจให้ผู้คนเมื่อพวกเขาทำถูกต้อง.

พื้นผิว

ตรวจสอบ Surface ซึ่งเป็นการทดลองที่สวยงามและสร้างแรงบันดาลใจจาก Paul Lewis คุณไม่เพียง แต่สามารถเปลี่ยนขนาดความยืดหยุ่นวงโคจรอัตโนมัติโครงลวดและเม็ดฝนในการสาธิตเท่านั้น แต่ยังสามารถลากและวางรูปภาพของคุณลงไปเพื่อให้รู้สึกถึงเอฟเฟกต์ที่แตกต่างกัน.

อนุภาคภาพถ่าย

เพียงแค่วางภาพที่คุณชื่นชอบลงในการสาธิตนี้และสนุกกับการดูมันระเบิดเป็นอนุภาคมากมายและโต้ตอบกับแม่เหล็กบางรูปแบบ การทดสอบคือการรวมกันของสี่เทคโนโลยี: การลากและวางของ HTML5, ไฟล์ API, Canvas และ WebGL.

รัตน์-เถระ-izer

Rutt-Etra-Izer เป็นการจำลอง WebGL ของเครื่องสังเคราะห์วิดีโอ Rutt-Etra แบบคลาสสิก การสาธิตช่วยให้คุณสามารถใส่ภาพของคุณเองภายในและจัดการพวกเขา ด้วยสิ่งนี้ภาพ 2D สามารถมีลักษณะเหมือน 3D!

เต้นโยกเยก

การสาธิตที่เรียบง่าย แต่มีความสำคัญที่แสดงให้เห็นว่าของเหลวของ WebGL สามารถเป็นไปได้อย่างไรด้วย shader แสงแบบ anisotropic และการเปลี่ยนรูปจุดสุดยอดที่กระเพื่อม.

Ultranoir

การทดลองที่ยอดเยี่ยมอีกเรื่องหนึ่งแสดงให้เห็นถึงศักยภาพของ WebGL Nouvelle Vague นำเสนอประสบการณ์ 3 มิติตามบทกวีและการโต้ตอบแบบเรียลไทม์บน Twitter และสิ่งที่คุณเห็นจะเป็นทวีตที่ดำเนินการด้วยวัตถุการบินที่แตกต่างกัน แน่นอนเป็นวิธีศิลปะที่จะเพลิดเพลินไปกับทวีต.

ลูกคลื่นลิง

“เวลานี้ฉันแค่ต้องการทำแบบทดสอบเพื่อดูจำนวนตำแหน่งและบรรทัดฐานที่ฉันสามารถอัปเดตได้โดยตรงใน JavaScript ปรากฎว่า 2,000 ใช้ได้แล้ว :) ฉันยังเพิ่มในการทำแผนที่สภาพแวดล้อมเล็กน้อย และความแปลกประหลาด เพิ่มความแปลกประหลาดอยู่เสมอ.”

วิดีโอ FX

แอพที่น่าประทับใจที่สร้างโดย Daniel Pettersson ที่ให้คุณสามารถใช้เอฟเฟ็กต์หลังการประมวลผลหลายอย่างพร้อมกันกับตัวอย่าง Happy Feet 2 ลองและสนุก!

ของเหลว Voxels

การแสดงภาพ 3 มิติของอัลกอริธึม 2D น้ำคลาสสิกยังแสดงให้คุณเห็นว่า WebGL แบบโต้ตอบเป็นอย่างไร.

ตู้หนังสือ WebGL

เรียกดูหนังสือกว่า 10,000 เล่มครอบคลุมด้วย BookGL ของ WebGL นี้พัฒนาโดยทีม Google Data Arts นอกจากนี้คุณยังสามารถค้นหาตามหัวเรื่องเปิดโมเดลสามมิติโดยคลิกที่มันและดาวน์โหลดหนังสือบนโทรศัพท์ของคุณด้วยรหัส QR.

WebGL Globe

การทดลองของทีม Google ที่ยอดเยี่ยมซึ่งทำให้คุณรู้สึกเหมือนคุณอยู่ในอนาคตด้วยการสร้างภาพข้อมูลที่สวยงามสง่างามและมีอนาคต.

เที่ยวบินรอบโลก

แอพพลิเคชั่นสร้างภาพข้อมูลอีกรูปแบบหนึ่งที่ดึงดูดสายตาจากเส้นทางการบินของสายการบินใหญ่ ๆ!

ตัวกรองรูปภาพ WebGL

แอปพลิเคชั่นแก้ไขกราฟิคด้วย WebGL หรือไม่ มันไม่เคยเป็นไปไม่ได้ เหนือสิ่งอื่นใดมันรวดเร็วและราบรื่น!

WebGL น้ำ

“สระน้ำที่มีการสะท้อนการหักเหการกัดกร่อนและการบดเคี้ยวโดยรอบ สระว่ายน้ำถูกจำลองด้วยความสูงและมีทรงกลมที่สามารถโต้ตอบกับพื้นผิวของน้ำ.”

การสะท้อน

ปัญหาที่ใหญ่ที่สุดที่ WebGL ประสบอาจเป็นเรื่องความปลอดภัย ตามวิกิพีเดียทีมงานเตรียมความพร้อมฉุกเฉินคอมพิวเตอร์ของสหรัฐอเมริกา (US-CERT) ได้ออกคำเตือนว่า WebGL มีปัญหาด้านความปลอดภัยที่อาจเกิดขึ้นได้หลายประการซึ่งอาจนำไปสู่การใช้รหัสโดยอำเภอใจการปฏิเสธบริการ สิ่งนี้มีความหมายอย่างมากต่อเจ้าของเว็บไซต์.

อย่างไรก็ตามกลุ่ม Khronos ซึ่งรวมถึง Mozilla และ Google ได้แนะนำวิธีการแก้ปัญหาที่เป็นไปได้และแนวทางการพัฒนาในอนาคตเพื่อเสริมสร้างความปลอดภัยจากภัยคุกคามความปลอดภัยที่เป็นไปได้ หวังว่าปัญหาจะลดลงและสามารถแก้ไขได้ในอนาคตเนื่องจาก WebGL มีความเป็นไปได้มากมายตามที่นักพัฒนาที่มีความสามารถและเป็นมืออาชีพ!

แจ้งให้เราทราบว่าการทดลองใดทำให้คุณประทับใจมากที่สุดและแน่นอนหากคุณได้รับการทดลอง!

โพสต์ที่เกี่ยวข้องเพิ่มเติม:

• เว็บไซต์ HTML5: 48 การสาธิตการสังหารด้วยแฟลชที่มีศักยภาพ
• เว็บไซต์ HTML5: 15 การทดลองเพิ่มเติม
• แรงบันดาลใจการสาธิตการเคลื่อนไหว CSS3