Skip to main content

WebGL Learning Notes

阿琛8/22/24About 1 minGIS RelatedwebGL

WebGL Learning Notes

Introduction

Recently, while learning Cesium, I encountered some fundamental theoretical issues that I couldn't resolve, so I started learning WebGL to build a solid foundation.

About WebGL

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 3D rendering in an HTML <canvas> element in browsers that support it, without the use of any plug-ins. WebGL programs consist of control code written in JavaScript and special effects code (shader code) executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background.

First Look at WebGL

A WebGL program consists of control code written in JavaScript and shader code executed on the GPU (Graphics Processing Unit). The shader code is written in GLSL (OpenGL Shading Language). The focus will be on learning shaders to better understand Cesium textures.

Preparing for 3D Rendering

<body onload="main()">
  <canvas id="glcanvas" width="640" height="480">
    Your browser seems to not support or has disabled the HTML5 <code>&lt;canvas&gt;</code> element.
  </canvas>
</body>
// Start here
function main() {
  const canvas = document.querySelector("#glcanvas");
  // Initialize the WebGL context
  const gl = canvas.getContext("webgl");

  // Verify WebGL support
  if (!gl) {
    alert("Unable to initialize WebGL. Your browser, operating system, or hardware may not support it.");
    return;
  }

  // Clear all images using fully opaque black
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

If the WebGL context is successfully initialized, the variable 'gl' will be used to reference that context. In this example, we clear the existing elements in the context with black (repainting the canvas with the background color).

AI Translation | AI 翻译

This article was translated from Chinese to English by AI. If there are any inaccuracies, please refer to the original Chinese version.


本文由 AI 辅助从中文翻译为英文。如遇不准确之处，请以中文原版为准。