Viewing: developer.mozilla.org

3D

"index.html"
"webgl-demo.js"

"index.html"

html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>WebGL </title>
    <script src="webgl-demo.js" type="module"></script>
  </head>

  <body>
    <canvas id="glcanvas" width="640" height="480"></canvas>
  </body>
</html>

WebGL

"webgl-demo.js"

main();

//
// 
//
function main() {
  const canvas = document.querySelector("#glcanvas");
  // GL 
  const gl = canvas.getContext("webgl");

  // WebGL 
  if (gl === null) {
    alert(
      "WebGL ",
    );
    return;
  }

  // 
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // 
  gl.clear(gl.COLOR_BUFFER_BIT);
}

main() WebGL

canvas

WebGLRenderingContext getContext() "webgl" WebGL getContext() null

gl

WebGL

An introduction to WebGL: Luz Caballero dev.opera.com WebGL WebGL WebGL
WebGL Fundamentals
An intro to modern OpenGL: Joe Groff OpenGL OpenGL OpenGL OpenGL

MDN

MDN 2023123

GitHub

WebGL: 2D 3D
1. WebGL
2. WebGL
3. WebGL 2D
4. WebGL
5. WebGL
6. WebGL 3D
7. WebGL
8. WebGL
9. WebGL