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
    目录

    6. if-else语句和for语句

    # if-else语句和for语句

    着色器语言GLSL中关于if语句、for语句的使用,和javascript语言、C语言中的if语句、for语句执行逻辑规则基本一致,这里默认你已经有一定的编程基础,也就不做过多讲解,只是简单说明一下。

    单独使用if

    if(x>100){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);//红色
    }
    

    if-else形式

    bool colorBool;
    // 根据布尔值设置片元的像素值
    if(bool){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);//红色
    }else {
      gl_FragColor = vec4(0.0,0.0,1.0,1.0);//蓝色
    }
    

    if-else if-else if-...else形式

    if(x<10){
    
    }else if (x<20) {
    
    }else if (x<30) {
    
    }else {
    
    }
    

    # continue和break关键字

    continue:直接跳到for循环的下一个循环 break:for循环终止执行

    for (int i = 0; i < 20; i++) {
      ...
      if(i==15){
        continue;//进行下次循环,执行i=16对应的循环
      }
      ...
    }
    
    for (int i = 0; i < 20; i++) {
      ...
      if(i==15){
        break;//直接终止循环执行,i=16、17等后面的循环不再执行
      }
      ...
    }
    
    5. 数据类型-矩阵
    7. 内置变量

    ← 5. 数据类型-矩阵 7. 内置变量→

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