WebGL

WebGL - API, OpenGL ES 2.0, HTML canvas , . WebGL , JavaScript ( ), . WebGL HTML- - -.

WebGL. , . OpenGL.

3D

, WebGL 3D - canvas. HTML canvas onload, WebGL.

html

<body >
  <canvas id="glcanvas" width="640" height="480">
    Your browser doesn't appear to support the HTML5
    <code>&lt;canvas&gt;</code> element.
  </canvas>
</body>

WebGL

start(), JavaScript- . - WebGL .

var gl; //     WebGL

function start() {
  var canvas = document.getElementById("glcanvas");

  gl = initWebGL(canvas); //   GL

  //    WebGL   

  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0); //        ,  
    gl.enable(gl.DEPTH_TEST); //    
    gl.depthFunc(gl.LEQUAL); //    :     
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); //      .
  }
}

, - canvas, canvas. , canvas, , .

canvas, initWebGL(); , - WebGL.

, gl . , ( ) , . , . , , .

. .

WebGL

initWebGL() :

function initWebGL(canvas) {
  gl = null;

  try {
    //    .   ,   .
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  } catch (e) {}

  //      GL,  
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser may not support it.");
    gl = null;
  }

  return gl;
}

WebGL canvas, canvas "webgl". , , "experimental-webgl". , , , WebGL. , . gl null (, WebGL ), WebGL , .

: , "experimental-webgl" - , . , "webgl".

, WebGL, , .

WebGL, , .

WebGL

WebGL canvas, CSS. canvas , . canvas . , WebGL , , , WebGL viewport(), .

WebGL gl canvas, :

gl.viewport(0, 0, canvas.width, canvas.height);

canvas , , , , CSS, . CSS , ; ( super sample antialiasing - SSAA) ( ). (MSAA) , , , , , .

WebGL - : Luz Caballero : DEV.OPERA. , WebGL, WebGL WebGL.
OpenGL - OpenGL, Joe Groff. OpenGL, . OpenGL. OpenGL, .

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

This page was last modified on 17 . 2024 . by MDN contributors.

View this page on GitHub Report a problem with this content

WebGL

WebGL

In this article

3D

WebGL

WebGL

WebGL

Help improve MDN