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:从顶点着色器传递到片段着色器的变量,每个片段的值可以不同。
相关推荐
Duo1J2 天前
【OpenGL】LearnOpenGL学习笔记28 - 延迟渲染 Deferred Rendering
笔记·学习·图形渲染·着色器
Duo1J5 天前
【OpenGL】LearnOpenGL学习笔记25 - 法线贴图 NormalMap
笔记·学习·图形渲染·贴图·着色器
Duo1J5 天前
【OpenGL】LearnOpenGL学习笔记26 - 视差贴图 Parallax Map
笔记·学习·图形渲染·贴图·着色器
gis分享者14 天前
学习threejs,使用自定义GLSL 着色器,实现水面、粒子特效
threejs·着色器·glsl·粒子·shadermaterial·unrealbloompass·水面
小咪一会16 天前
JVM 基础
jvm·1024程序员节
空灵之海19 天前
Ubuntu系统安全合规配置
linux·ubuntu·系统安全·1024程序员节
阿啄debugIT22 天前
装饰(Decorator)模式可以在不修改对象外观和功能的情况下添加或者删除对象功能
软件工程·1024程序员节
浩浩乎@1 个月前
【openGLES】着色器语言(GLSL)
人工智能·算法·着色器
lzb_kkk2 个月前
【实习总结】Qt通过Qt Linguist(语言家)实现多语言支持
开发语言·c++·qt·1024程序员节·qt linguist·qt 语言家
枫景Maple2 个月前
Shader开发(六)什么是着色器
游戏引擎·着色器