WebGL (ห้องสมุดกราฟิกเว็บ) เป็น JavaScript API สำหรับการแสดงผลกราฟิก 3 มิติและ 2D แบบโต้ตอบที่มีประสิทธิภาพสูงภายในเว็บเบราว์เซอร์ที่รองรับโดยไม่ต้องใช้ปลั๊กอิน WebGL ทำได้โดยการแนะนำ API ที่สอดคล้องกับ OpenGL ES 2.0 อย่างใกล้ชิดซึ่งสามารถใช้ในองค์ประกอบ HTML5 <canvas>
ความสอดคล้องนี้ทำให้ API สามารถได้รับประโยชน์จากการเร่งความเร็วของกราฟิกฮาร์ดแวร์ที่อุปกรณ์ของผู้ใช้ใช้
รองรับ 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 บนหน้าเว็บ
การอ้างอิง
อินเตอร์เฟสมาตรฐาน
ส่วนขยาย
ANGLE_instanced_arrays
EXT_blend_minmax
EXT_color_buffer_float
EXT_color_buffer_half_float
EXT_disjoint_timer_query
EXT_float_blend
EXT_frag_depth
EXT_sRGB
EXT_shader_texture_lod
EXT_texture_compression_bptc
EXT_texture_compression_rgtc
EXT_texture_filter_anisotropic
OES_element_index_uint
OES_fbo_render_mipmap
OES_standard_derivatives
OES_texture_float
OES_texture_float_linear
OES_texture_half_float
OES_texture_half_float_linear
OES_vertex_array_object
OVR_multiview2
WEBGL_color_buffer_float
WEBGL_compressed_texture_astc
WEBGL_compressed_texture_atc
WEBGL_compressed_texture_etc
WEBGL_compressed_texture_etc1
WEBGL_compressed_texture_pvrtc
WEBGL_compressed_texture_s3tc
WEBGL_compressed_texture_s3tc_srgb
WEBGL_debug_renderer_info
WEBGL_debug_shaders
WEBGL_depth_texture
WEBGL_draw_buffers
WEBGL_lose_context
Events
Constants and 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 สำหรับการสร้างภาพทางวิทยาศาสตร์ในเบราว์เซอร์ของคุณ
ข้อมูลจำเพาะ
สเปค | สถานะ | คิดเห็น |
---|---|---|
WebGL 1.0 | Recommendation | คำจำกัดความเบื้องต้น อ้างอิงจาก OpenGL ES 2.0 |
WebGL 2.0 | Editor's Draft | สร้างบน WebGL 1. ขึ้นอยู่กับ OpenGL ES 3.0 |
OpenGL ES 2.0 | Standard | |
OpenGL ES 3.0 | Standard |
Browser compatibility
WebGL 1
WebGL 2
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
ค่าเริ่มต้น