Cesium着色器

news2024/11/23 15:44:17

GLSL（OpenGL Shading Language）是用于编写着色器的语言

着色器类型

顶点着色器：负责处理每个顶点的属性，如位置、颜色等。

片段着色器（或像素着色器）：负责计算最终像素的颜色。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试</title>
  <script src="./lib/webgl-utils.js"></script>
  <script src="./lib/webgl-debug.js"></script>
  <script src="./lib/cuon-utils.js"></script>
</head>

<body onload="main()">
  <canvas id="canvas" width="400" height="400"></canvas>
</body>

</html>
<!--脚本-->
<script>
  function main () {
    const canvas = document.getElementById('canvas');
    const gl = getWebGLContext(canvas);
    if (!gl) {
      console.log('WebGL初始化失败');
      return;
    }
    //WebGL程序包括运行在浏览器中的JavaScript和 运行在WebGL系统的着色器程序这两个部分。
    // 着色器程序是用GLSL（OpenGL Shading Language）编写的程序，运行在WebGL系统上，负责渲染图形。着色器程序包括顶点着色器和片元着色器两个部分。
    // 顶点着色器
    //  gl_Position = vec4():表示顶点位置，必需要赋值，否则无法渲染 vec4类型
    //  gl_PointSize = 10.0:表示点的尺寸（像素数） float类型
    /*
    float 类型表示单精度浮点数
    vec4 类型表示四维向量,即有四个浮点数组成的矢量,又称齐次坐标
    vec4(v0,v1,v2,v3)表示四维向量，v0,v1,v2,v3分别表示该向量的四个分量
    */
    const vertexShaderSource = `
      void main() {
        gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
        gl_PointSize = 10.0;
      }`;
    // 片元着色器:主要是处理片元，让其显示在屏幕上，从main函数开始执行
    /**
     * gl.drawArrays()函数：绘制图形，参数1：绘制方式，参数2：从哪个点开始，参数3：绘制多少个点
     * **/
    const fragmentShaderSource = `
      void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      }
      `
    // initShaders函数：将字符串形式的着色器代码从JavaScript传给WebGL系统，并建立着色器
    if (!initShaders(gl, vertexShaderSource, fragmentShaderSource)) {
      console.log('着色器初始化失败');
      return;
    }
    // 设置背景颜色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    // 清空canvas
    gl.clear(gl.COLOR_BUFFER_BIT);
    // 绘制点
    gl.drawArrays(gl.POINTS, 0, 1);


  }
</script>