Cesium着色器

GLSL(OpenGL Shading Language)是用于编写着色器的语言

着色器类型

  1. 顶点着色器:负责处理每个顶点的属性,如位置、颜色等。

  2. 片段着色器 (或像素着色器):负责计算最终像素的颜色。

    javascript 复制代码
    <!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>

webGl坐标系

三维坐标系(笛卡尔坐标系)右手坐标系

  • X 轴:水平,从左向右延伸(正方向)。
  • Y 轴:垂直,从下向上延伸(正方向)。
  • Z 轴:从屏幕外向屏幕内(观察者的方向),即从你眼睛到屏幕的方向是 Z 轴的正方向。

Cesium中的着色器:

PostProcessStage

Cesium使用这一类来应用后处理效果,例如模糊、颜色调整等。你可以编写自定义的片段着色器,展示雨天、雪花、雾等效果。

Uniforms和Varyings

  1. Uniforms:全局变量,所有片段共享,通常用于传递常量数据。
  2. Varyings:从顶点着色器传递到片段着色器的变量,每个片段的值可以不同。
相关推荐
lzb_kkk14 天前
【实习总结】Qt通过Qt Linguist(语言家)实现多语言支持
开发语言·c++·qt·1024程序员节·qt linguist·qt 语言家
枫景Maple16 天前
Shader开发(六)什么是着色器
游戏引擎·着色器
Yangy_Jiaojiao22 天前
三维手眼标定
1024程序员节
guozhetao24 天前
【图论,拓扑排序】P1347 排序
数据结构·c++·python·算法·leetcode·图论·1024程序员节
gis分享者1 个月前
学习threejs,使用自定义GLSL 着色器,生成漂流的3D能量球
3d·threejs·着色器·glsl·shadermaterial·能量球
lzb_kkk1 个月前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
徐子竣1 个月前
[学习记录]Unity-Shader-几何着色器
unity·游戏引擎·着色器
徐子竣2 个月前
Unity Shader开发-着色器变体(1)-着色器变体概述
unity·游戏引擎·着色器
0点51 胜2 个月前
像素着色器没有绘制的原因
着色器
lzb_kkk2 个月前
【MFC】编辑框、下拉框、列表控件
c语言·开发语言·c++·mfc·1024程序员节