WebGL着色器discard舍弃片元

discard舍弃片元

本文是WebGL电子书的2.15节内容

discard关键字通常出现在片元着色器的if语句或for语句中,discard的使用语法就像for语句中的continuebreak关键字一样,直接编写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>
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Threejs可视化

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值