WebGL着色器取样器sampler2D

您所在的位置:网站首页 sampler什么意思 WebGL着色器取样器sampler2D

WebGL着色器取样器sampler2D

2023-08-18 06:53| 来源: 网络整理| 查看: 265

取样器sampler2D

本文是WebGL教程(电子书)的2.10节内容

WebGL在处理图片纹理编写片元着色器的时候,会通过sampler2D关键字声明一个纹理相关的变量,sampler2D和vec2、float表示一种数据类型,只不过sampler2D关键字声明的变量表示一种取样器类型变量,简单点说就是该变量对应纹理图片的像素数据。

声明变量 `uniform sampler2D u_Sampler;`

在前面课程中讲解过,通过attribute关键字声明的顶点变量,需要通过javascript调用gl.vertexAttribPointer()等WebGL API传递attribute变量对应的顶点数据,对于片元着色器中表示图片像素数据的sampler2D变量,一样需要javascript调用gl.uniform1i()等WebGL API传递图像数据。所以sampler2D关键字声明变量的时候,需要使用uniform关键字进行修饰。

内置函数texture2D

WebGL着色器提供了内置函数texture2D,可以直接使用,通过texture2D函数,可以从纹理图像提取像素值,赋值给内置变量gl_FragColor

// 采集纹素,逐片元赋值像素值 gl_FragColor = texture2D(u_Sampler,v_TexCoord); attribute vec4 a_Position;//顶点位置坐标 attribute vec2 a_TexCoord;//纹理坐标 varying vec2 v_TexCoord;//插值后纹理坐标 void main() { //顶点坐标apos赋值给内置变量gl_Position gl_Position = a_Position; //纹理坐标插值计算 v_TexCoord = a_TexCoord; } //所有float类型数据的精度是highp precision highp float; // 接收插值后的纹理坐标 varying vec2 v_TexCoord; // 纹理图片像素数据 uniform sampler2D u_Sampler; void main() { // 采集纹素,逐片元赋值像素值 gl_FragColor = texture2D(u_Sampler,v_TexCoord); }


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3