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

    15. discard舍弃片元

    # discard舍弃片元

    discard关键字通常出现在片元着色器的if语句或for语句中,discard的使用语法就像for语句中的continue和break关键字一样,直接编写discard;即可,但是discard的功能比较特殊,专门用于着色器片元处理。

    如果想理解discard,你首先应该建立逐片元的概念。GPU的片元着色器在逐个处理片元的过程中,会把不符合程序条件的代码舍弃掉。

    # discard一个代码案例

    //点绘制模式
    gl.drawArrays(gl.POINTS, 0, 4);
    
    <!-- 顶点着色器源码 -->
    <script id="vertexShader" type="x-shader/x-vertex">
      //attribute声明vec4类型变量apos
      attribute vec4 apos;
      void main() {
        //点渲染的方形区域像素大小
        gl_PointSize = 100.0;
        //顶点坐标apos赋值给内置变量gl_Position
        //逐顶点处理数据
        gl_Position = apos;
      }
    
    </script>
    <!-- 片元着色器源码 -->
    <script id="fragmentShader" type="x-shader/x-fragment">
      precision lowp float;// 所有float类型数据的精度是lowp
      void main() {
        // 计算方形区域每个片元距离方形几何中心的距离
        // gl.POINTS模式点渲染的方形区域,方形中心是0.5,0.5,左上角是坐标原点,右下角是1.0,1.0,
        float r = distance(gl_PointCoord, vec2(0.5, 0.5));
        //根据距离设置片元
        if(r > 0.5){
          // 距离方形中心距离大于0.5的片元剪裁舍弃掉
          discard;
        }
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
      }
    
    </script>
    
    14. 结构体
    16. 数组

    ← 14. 结构体 16. 数组→

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