Tag: webGL

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.

阿琛2024/8/22About 1 min

Creating 2D Content with WebGL

Goal: Draw a 2D square

Importing the glMatrix Library

glMatrix: A library for performing matrix operations, imported and used via CDN.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <link rel="stylesheet" href="./webgl.css" type="text/css" />
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"
      integrity="sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ=="
      crossorigin="anonymous"
      defer
    ></script>
    <script src="webgl-demo.js" type="module" defer></script>
  </head>

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

阿琛2024/8/22Less than 1 minute