Getting started with WebGL

WebGL OpenGL ES 2.0 API HTML canvas 3D . WebGL (GPU) JavaScript ( ) . WebGL HTML .

WebGL . 3D OpenGL .

3D

WebGL 3D . HTML canvas WebGL onload .

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

JavaScript start() . WebGL .

var gl; // A global variable for the WebGL context

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

  gl = initWebGL(canvas); // Initialize the GL context

  // Only continue if WebGL is available and working

  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0); // Set clear color to black, fully opaque
    gl.enable(gl.DEPTH_TEST); // Enable depth testing
    gl.depthFunc(gl.LEQUAL); // Near things obscure far things
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); // Clear the color as well as the depth buffer.
  }
}

canvas . canvas . canvas . .

initWebGL() . WebGL .

gl . . . .

. .

WebGL

initWebGL() .

function initWebGL(canvas) {
  gl = null;

  try {
    // Try to grab the standard context. If it fails, fallback to experimental.
    gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
  } catch (e) {}

  // If we don't have a GL context, give up now
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser may not support it.");
    gl = null;
  }

  return gl;
}

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

: experimental-webgl . webgl .

WebGL . , .

. WebGL .

WebGL

WebGL . CSS height width . . width height . WebGL . WebGL viewport() .

WebGL gl canvas .

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

CSS . CSS . (SSAA) . ( ) .

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

Help improve MDN

Was this page helpful to you?

Yes No

Learn how to contribute

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

View this page on GitHub Report a problem with this content

WebGL

Getting started with WebGL

In this article

3D

WebGL

WebGL

WebGL

Help improve MDN