Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • 文章
WebGPU教程
  • WebGL教程
  • ES GLSL着色器语言
  • WebGL教程(旧版本)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原官网文档 (opens new window)
Web3D系统课程视频
  • 1. 声明一个变量
  • 2. 声明一个常量const
  • 3. 数据类型—基本类型
  • 4. 数据类型-向量
  • 5. 数据类型-矩阵
  • 6. if-else语句和for语句
  • 7. 内置变量
  • 8. attribute、uniform、varying
  • 9. 顶点和片元着色器
  • 10. 取样器sampler2D
  • 11. 内置函数
  • 12. 着色器计算精度precision
  • 13. 函数
  • 14. 结构体
    • 15. discard舍弃片元
    • 16. 数组
    • 17. 预处理
    • ES GLSL着色器语言
    郭隆邦
    2026-05-22
    目录

    14. 结构体

    # 结构体struct

    在着色器语言GLSL ES前面内容介绍过浮点数float、整形数int、三维向量vec3、4x4矩阵mat4等各种数据类型,关于结构体主要功能就是利用WebGL着色器已经提供的常见数据类型,自定义一个新的数据类型。

    WebGL着色器语言中结构体和C语言类似,结构体是由多个同类或不同类的数据类型构成的一个集合。

    // 首先定义一个结构体,也就是自定义一个数据类型
    struct DirectionalLight {
      vec3 direction;
      vec4 color;
      float shadowBias;
    };
    // 使用自定义的结构体,或者说使用自定义的数据类型DirectionalLight声明一个变量
    uniform DirectionalLight dirLight;
    

    struct是声明结构体的关键字,DirectionalLight是自定义结构体的名称,可以根据表达的含义自由命名,你可以把自定义的结构体DirectionalLight理解为自定义的数据类型,自定义的数据类型DirectionalLight就像浮点数float、三维向量vec3一样可以用来声明一个变量。

    # 访问分量(点符号.)

    三维向量vec3、4x4矩阵mat4等数据类型可以通过点符号.访问自身的变量或元素,对于结构体关键字struct自定义的数据类型也一样可以通过点符号访问自身的变量或元素,你可把webgl着色器的结构体类比javascript的对象,对象可以通过点符号访问对象自身的属性。

    vec3 dir = vec3(1.0,0.0,0.0);
    dir.x = 100.0// x分量赋值
    float x = dir.x;// 访问x分量,赋值给其它变量
    
    struct DirectionalLight {
      vec3 direction;
      vec4 color;
    };
    uniform DirectionalLight dirLight;
    // 结构体成员赋值
    dirLight.color = vec4(0.8,0.6,0.1,1.0);
    // 访问成员,赋值给其它变量
    vec4 newcol = dirLight.color;
    

    # 结构体uniform变量数据传递

    // 获得结构体位置
    var lightColor = gl.getUniformLocation(program,'directionalLight.color');
    // 结构体的一个属性传递数据
    gl.uniform4f(lightColor, 1.0, 0.0, 1.0,0.7);
    
    13. 函数
    15. discard舍弃片元

    ← 13. 函数 15. discard舍弃片元→

    Theme by Vdoing | Copyright © 2016-2026 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式