WebGL: 2D and 3D graphics for the web

This translation is incomplete. Please help translate this article from English

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 บนหน้าเว็บ

การอ้างอิง

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

ส่วนขยาย

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:

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WebGLRenderingContextChrome Full support 9Edge Full support 12
Notes
Full support 12
Notes
Notes To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Firefox Full support 4IE Full support 11
Notes
Full support 11
Notes
Notes To access the WebGL context, use experimental-webgl rather than the standard webgl identifier.
Opera Full support 12Safari Full support 5.1WebView Android Full support YesChrome Android Full support 25Firefox Android Full support YesOpera Android Full support 12Safari iOS Full support 8Samsung Internet Android Full support 1.5

Legend

Full support  
Full support
See implementation notes.
See implementation notes.

WebGL 2

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
WebGL2RenderingContextChrome Full support 56Edge Full support 79Firefox Full support 51IE No support NoOpera Full support 43Safari No support NoWebView Android Full support 58Chrome Android Full support 58Firefox Android Full support 51Opera Android Full support 43Safari iOS No support NoSamsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support

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ค่าเริ่มต้น

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