WebGL: 2D and 3D graphics for the web

รองรับ WebGL ในFirefox 4+, Google Chrome 9+, Opera 12+, Safari 5.1+, Internet Explorer 11+ และMicrosoft Edge build 10240+; อย่างไรก็ตามอุปกรณ์ของผู้ใช้จะต้องมีฮาร์ดแวร์ที่รองรับคุณสมบัติเหล่านี้

WebGL 2 API แนะนำการสนับสนุนชุดคุณลักษณะ OpenGL ES 3.0 เป็นส่วนใหญ่ มีให้ผ่านทาง WebGL2RenderingContext ส่วนต่อประสาน

องค์ประกอบ <canvas> ยังถูกใช้โดยCanvas APIเพื่อทำกราฟิก 2D บนหน้าเว็บ

การอ้างอิง

อินเตอร์เฟสมาตรฐาน

ส่วนขยาย

Events

• webglcontextlost
• webglcontextrestored
• webglcontextcreationerror

Constants and types

• WebGL constants
• WebGL types

WebGL 2

WebGL 2 is a major update to WebGL which is provided through the WebGL2RenderingContext interface. It is based on OpenGL ES 3.0 and new features include:

• 3D textures,
• Sampler objects,
• Uniform Buffer objects,
• Sync objects,
• Query objects,
• Transform Feedback objects,
• Promoted extensions that are now core to WebGL 2: Vertex Array objects, instancing, multiple render targets, fragment depth.

See also the blog post "WebGL 2 lands in Firefox" and webglsamples.org/WebGL2Samples for a few demos.

Guides and tutorials

Below, you'll find an assortment of guides to help you learn WebGL concepts and tutorials that offer step-by-step lessons and examples.

Guides

Data in WebGL

A guide to variables, buffers, and other types of data used when writing WebGL code.

WebGL best practices

Tips and suggestions to help you improve the quality, performance, and reliability of your WebGL content.

Using extensions

A guide to using WebGL extensions.

Tutorials

WebGL tutorial

A beginner's guide to WebGL core concepts. A good place to start if you don't have previous WebGL experience.

Examples

A basic 2D WebGL animation example

This example demonstrates the simple animation of a one-color shape. Topics examined are adapting to aspect ratio differences, a function to build shader programs from sets of multiple shaders, and the basics of drawing in WebGL.

WebGL by example

ชุดตัวอย่างสดพร้อมคำอธิบายสั้น ๆ ที่แสดงแนวคิดและความสามารถของ WebGL ตัวอย่างจะถูกจัดเรียงตามหัวข้อและระดับความยากซึ่งครอบคลุมบริบทการเรนเดอร์ WebGL, การโปรแกรม shader, พื้นผิว, เรขาคณิต, การโต้ตอบกับผู้ใช้และอื่น ๆ

บทเรียนขั้นสูง

การฉายมุมมองโมเดล WebGL

คำอธิบายโดยละเอียดของเมทริกซ์หลักสามตัวที่โดยทั่วไปใช้เพื่อแสดงมุมมองวัตถุสามมิติ: แบบจำลองมุมมองและเมทริกซ์การฉายภาพ

คณิตศาสตร์เมทริกซ์สำหรับเว็บ

คู่มือที่มีประโยชน์เกี่ยวกับการทำงานของเมทริกซ์การแปลง 3D และสามารถใช้บนเว็บได้ - ทั้งสำหรับการคำนวณ WebGL และในการแปลง CSS3

ทรัพยากร

• Raw WebGL: คำแนะนำเกี่ยวกับ WebGLคำบรรยายโดย Nick Desaulniers ที่แนะนำพื้นฐานของ WebGL นี่เป็นจุดเริ่มต้นที่ดีหากคุณไม่เคยเขียนโปรแกรมกราฟิกระดับต่ำมาก่อน
• เว็บไซต์ Khronos WebGL เว็บไซต์หลักสำหรับ WebGL ที่ Khronos Group
• WebGL Fundamentalsบทช่วยสอนพื้นฐานพร้อมพื้นฐานของ WebGL
• สนามเด็กเล่น WebGLเครื่องมือออนไลน์สำหรับการสร้างและแบ่งปันโครงการ WebGL เหมาะสำหรับการสร้างต้นแบบอย่างรวดเร็วและการทดสอบ
• WebGL Academyเครื่องมือแก้ไข HTML / JavaScript พร้อมบทช่วยสอนเพื่อเรียนรู้พื้นฐานของการเขียนโปรแกรม webgl
• สถิติ WebGLเว็บไซต์ที่มีสถิติเกี่ยวกับความสามารถของ WebGL ในเบราว์เซอร์บนแพลตฟอร์มต่างๆ

ห้องสมุด

• glMatrixเป็นเมทริกซ์ JavaScript และไลบรารีเวกเตอร์สำหรับแอป WebGL ประสิทธิภาพสูง
• PhiloGLเป็นเฟรมเวิร์ก WebGL สำหรับการสร้างภาพข้อมูลการสร้างโค้ดและการพัฒนาเกม
• Pixi.jsเป็นตัวเรนเดอร์ WebGL 2D แบบโอเพนซอร์สที่รวดเร็วและรวดเร็ว
• PlayCanvasเป็นนเกมโอเพนซอร์ซ
• Sylvesterเป็นห้องสมุดโอเพนซอร์ซสำหรับจัดการเวกเตอร์และเมทริกซ์ ไม่ได้รับการปรับให้เหมาะสมกับ WebGL แต่มีความแข็งแกร่งมาก
• three.jsเป็นไลบรารี 3D WebGL แบบโอเพนซอร์สที่มีคุณลักษณะครบถ้วน
• Phaserเป็นเฟรมเวิร์กโอเพนซอร์สที่รวดเร็วและสนุกสำหรับเกมเบราว์เซอร์ที่ขับเคลื่อนด้วย Canvas และ WebGL
• RedGL  เป็นไลบรารี 3D WebGL แบบโอเพ่นซอร์ส
• vtk.js  เป็นห้องสมุด JavaScript สำหรับการสร้างภาพทางวิทยาศาสตร์ในเบราว์เซอร์ของคุณ

ข้อมูลจำเพาะ

Browser compatibility

WebGL 1

Compatibility notes

นอกเหนือจากเบราว์เซอร์แล้ว GPU เองยังต้องการการสนับสนุนคุณสมบัติ ตัวอย่างเช่น S3 การบีบอัดพื้นผิว (S3TC) มีเฉพาะในแท็บเล็ตที่ใช้ Tegra เท่านั้น เบราว์เซอร์ส่วนใหญ่ทำให้บริบท WebGL พร้อมใช้งานผ่านwebglชื่อบริบท แต่เบราว์เซอร์ที่เก่ากว่านั้นต้องการexperimental-webglเช่นกัน นอกจากนี้การที่จะเกิดขึ้นWebGL 2webgl2เป็นอย่างถอยหลังได้และจะมีชื่อบริบท

บันทึกตุ๊กแก

การแก้ไขข้อบกพร่องและการทดสอบ WebGL

เริ่มต้นด้วย Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7) มีการตั้งค่าสองแบบที่ให้คุณควบคุมความสามารถของ WebGL สำหรับการทดสอบ:

webgl.min_capability_mode

คุณสมบัติบูลีนที่เมื่อtrueเปิดใช้งานโหมดความสามารถขั้นต่ำ เมื่ออยู่ในโหมดนี้ WebGL จะได้รับการกำหนดค่าให้สนับสนุนชุดคุณลักษณะขั้นต่ำเปลือยและความสามารถที่จำเป็นตามข้อกำหนด WebGL เท่านั้น วิธีนี้ช่วยให้คุณมั่นใจได้ว่ารหัส WebGL ของคุณจะทำงานบนอุปกรณ์หรือเบราว์เซอร์ใด ๆ โดยไม่คำนึงถึงความสามารถของพวกเขา นี่คือfalseค่าเริ่มต้น

webgl.disable_extensions

คุณสมบัติบูลีนที่เมื่อtrueปิดใช้งานส่วนขยาย WebGL ทั้งหมด นี่คือfalseค่าเริ่มต้น

ดูสิ่งนี้ด้วย

• Canvas API
• ข้อมูลความเข้ากันได้เกี่ยวกับส่วนขยาย WebGL