WebGL学习系列-片元着色器简介

前言

到目前为止,我们绘制过点、三角形、矩形等,但使用的都是单色系。之前曾经说过着色器的概念,着色器分为顶点着色器和片元着色器,我们一直在使用顶点着色器,而对片元着色器基本没有提及过,本小节将展开对片元着色器的简单介绍。

彩色的点

之前提到过,顶点着色器决定点的大小、位置和颜色,而片元着色器是用于给像素着色的,初步看,片元着色器的任务好像给顶点着色器完成了,但实际上不然,顶点着色器只能决定点的颜色,如果绘制成了图形,图形填充的颜色就该由片元着色器处理了。

先来看一下我们将要绘制的彩色点的效果图:
彩色的点

我们一共绘制了三个点,而且三个点的颜色不同,接下来分析下代码,先来看下顶点着色器的代码:

// 顶点着色器代码(决定顶点的位置、大小、颜色)
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\n' +
  'attribute vec4 a_Color;\n' +
  'varying vec4 v_Color;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' + // 设置顶点的位置
  '  v_Color = a_Color;\n' +        // 顶点设置一个varying类型的颜色值,用于线性化处理
  '  gl_PointSize = 10.0;\n' +      // 设置顶点的大小
  '}\n';

上面的代码定义了两个color变量,然后把attribute类型的颜色变量赋值给了varying类型的颜色变量(你一定有很多疑惑,不要着急,下文会解释的)。

接着看看片元着色器的代码:

// 片元着色器代码(给像素上色)
var FSHADER_SOURCE =
  'precision mediump float;\n' +
  'varying vec4 v_Color;\n' + 
  'void main() {\n' +
  '  gl_FragColor = v_Color;\n' + // 设置像素的颜色
  '}\n';

片元着色器代码中,也定义了一个varying变量,而且变量名字也叫v_Color,最后把v_Color赋值给了内置颜色变量gl_FragColor,从而决定了像素点的颜色。一起来看一下变量传递说明图:

varying变量传递

我们会定义好一个顶点颜色缓冲区,然后逐顶点传递给顶点着色器中的a_Color变量,而a_Color赋值给了v_Color变量。最需要关注的就是,在顶点着色器和片元着色器中,两个varying变量直接关联赋值了,这是两种不同着色器传递信息的方式,以后介绍纹理时也会使用此种方式来传递坐标信息。最后在片元着色器中的v_Color变量就获取到了一个线性化的颜色值,然而最终决定像素颜色值的是gl_FragColor这个内置变量,所以最后进行了赋值。

我初步看到的时候也发现实在是复杂,但没办法,底层就是这样处理的,我们要确保需要传值的两个varying变量名称是一致的。varying用于着色器间信息的传递,它命名为varying,表示变化的意思,还有更加深层次的应用,稍后我们会继续解释。

初始化颜色信息跟初始化顶点信息非常的类似,代码如下:

// 三个顶点的颜色
 var verticesColors = new Float32Array([
    1.0,  0.0,  0.0, 
    0.0,  1.0,  0.0, 
    0.0,  0.0,  1.0
]);
// 创建一个缓存对象,用于存放顶点颜色数据
 var colorBuffer = context.createBuffer();
 // 绑定缓存对象
 context.bindBuffer(context.ARRAY_BUFFER, colorBuffer);
 // 把数据写到缓冲对象中
 context.bufferData(context.ARRAY_BUFFER, verticesColors, context.STATIC_DRAW);
 // 获取顶点着色器代码中的顶点颜色变量
 var a_Color = context.getAttribLocation(context.program, 'a_Color');
 // 设置变量获取数据规则
 context.vertexAttribPointer(a_Color, 3, context.FLOAT, false, 0, 0);
 // 允许变量从 ARRAY_BUFFER目标上绑定的缓冲区对象获取数据
 context.enableVertexAttribArray(a_Color);

这里相信大家都很熟悉了,不再展开说明。

神奇的彩色三角形

到这里,我们已经学会使用varying变量来绘制多个不同颜色的点,接下来,我们把上一个示例给绘制成三角形,而不是点,如下代码所示:

// 绘制一个三角形
context.drawArrays(context.TRIANGLES, 0, n);

结果如下:
彩色三角形

是不是感觉很惊讶,咱们只在三个顶点中定义了颜色,结果看起来像是自动会渐变的。这就是片元着色器之所以叫片元的地方了。我们先来看渲染原理图:

渲染原理图

  1. 顶点着色器用于决定顶点的位置、大小和颜色(严格上来讲,是顶点关联了一个颜色值)
  2. 确定了顶点信息后,便可以绘制出三角形图形
  3. 有了三角形图形,webgl内部会对三角形进行光栅化,简单来讲,就是把三角形拆解成一个一个的像素点,然后发现了varying修饰的v_Color变量,利用顶点颜色信息,以及使用线性化计算方式,给每个像素点计算一个线性化的v_Color值,这就是varying有变化的意思的由来。在顶点中定义的varying变量,实际上,对于每个像素点,都有不同的值,最后调用片元着色器,把每个像素的颜色值(独有的v_Color值)传递给了片元着色器,最后设置到了颜色缓冲区,以便于最终在浏览器上显示。

着色器三大变量

通过前面的学习,我们一共接触了三种类型的着色器变量,分别是 attribute,uniform和 varying,现在简单回顾一下。
1. attribute 变量用于顶点着色器中,表示普通的变量。
2. uniform 变量用于顶点着色器和片元着色器中,用于表示不变的变量,比如,在顶点着色器中,表示点大小的变量,可以使用uniform,如果所有的顶点大小一致。
3. varying 变量用于顶点着色器和片元着色器之间的传递信息,通常用于传递颜色信息和坐标信息(比如纹理坐标)。

小结

理解片元着色器是按照逐像素进行着色是非常关键的,而顶点着色器则是逐顶点执行的。我们使用varying变量在顶点着色器和片元着色器之间共享数据,而且要注意的是,varying针对第个像素都有一个线性化的值,参考彩色三角形效果图就知道了。varying不仅仅用于传递颜色信息,它还经常用于传递纹理坐标信息,以便进行贴图。

源码下载

点击下载(片元着色器简介)

参考

<<WebGL编程指南:>>

  • 7
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webgl-fingerprint-defende.crx 是一个浏览器扩展文件,它的作用是提供WebGL指纹防御功能。WebGL是一种用于在网页浏览器中渲染3D图形的技术,而指纹则是通过收集浏览器和计算机的信息来识别用户身份的一种方法。 通常,浏览器会从操作系统和硬件中收集一些信息来创建一个独特的指纹识别码。这个识别码可以随着浏览器的使用而变化,因此可以用作用户识别。然而,一些网站可能会滥用这种技术来跟踪用户的在线行为,侵犯用户隐私。 webgl-fingerprint-defende.crx 文件可以帮助用户保护自己的隐私,防止被WebGL指纹识别出来。它通过修改浏览器的WebGL指纹数据,使之变得随机或无法识别。这样,即使网站尝试使用WebGL指纹进行用户跟踪,也无法准确识别用户的真实身份。 使用 webgl-fingerprint-defende.crx 文件可以有效地防止被WebGL指纹追踪,保护用户的个人隐私。它的安装和使用也非常简单,只需将文件添加到浏览器的扩展管理页面即可。然后,在用户浏览网页时,该扩展将自动激活并对WebGL指纹进行保护。 需要注意的是,虽然这个扩展可以有效防止WebGL指纹追踪,但在使用时仍需注意个人隐私的其他方面。同时,由于浏览器和WebGL技术的不断更新和演变,扩展的效果可能会有所变化。因此,保持扩展的更新和关注相关的隐私保护措施是很重要的。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值