Three.js 着色器 纹理贴图映射和彩色图转灰度图

Three.js 网格材质都有一个 map 属性,该属性用来设置网格模型的颜色贴图,渲染器系统会调用网格材质对应的着色器代码解析 map 属性的值进行渲染。本节课通过自定义着色器的纹理贴图代码来展示网格材质 map 属性对应的着色器原理。

顶点纹理坐标数据 uv

通过 Three.js 的球体、矩形平面、立方体等特定几何体构造函数创建一个几何体对象,构造函数会按照特定的算法生成顶点位置 position、顶点法向量 normal、顶点纹理坐标 uv 数据。

//球体

var geometry = new THREE.SphereBufferGeometry(60, 25, 25);

// 查看几何体的顶点数据

console.log(geometry.attributes);

// 顶点纹理坐标attributes.uv的itemSize属性值是2,意味着顶点纹理坐标是二维向量

// 查看几何体顶点纹理坐标数据uv

console.log(geometry.attributes.uv);

纹理贴图

ShaderMaterial 中设置一个属性来表示纹理贴图,对应着色器中 texture 变量。

uniforms: {

// texture对应顶点着色器中uniform声明的texture变量

texture: {

// 加载纹理贴图返回Texture对象作为texture的值

// Texture对象对应着色器中sampler2D数据类型变量

value: new THREE.TextureLoader().load('./Earth.jpg')

},

},

着色器

编写着色器代码从纹理贴图上采集像素值然后赋值给片元。

顶点着色器

使用 ShaderMaterial API 的时候顶点纹理坐标变量 uv 和顶点位置变量 position 一样不需要手动声明,系统会自动声明 attribute vec2 uv;

// varying关键字声明一个变量表示顶点纹理坐标插值后的结果

varying vec2 vUv;

void main(){

// 顶点纹理坐标uv数据进行插值计算

vUv = uv;

// 投影矩阵projectionMatrix、视图矩阵viewMatrix、模型矩阵modelMatrix

gl_Position = projectionMatrix*viewMatrix*modelMatrix*vec4( position, 1.0 );

}

片元着色器

uniform 关键字声明一个数据类型为 sampler2D 的变量 texture,对应 uniforms 中 texture 的值。

纹理映射功能的片元着色器贴图

// 声明一个纹理对象变量

uniform sampler2D texture;

// 顶点片元化后有多少个片元就有多少个纹理坐标数据vUv

varying vec2 vUv;

void main() {

//内置函数texture2D通过纹理坐标vUv获得贴图texture的像素值

gl_FragColor = texture2D( texture, vUv );

}

彩色图转灰度图片元着色器代码

// 声明一个纹理对象变量

uniform sampler2D texture;

// 顶点片元化后有多少个片元就有多少个纹理坐标数据vUv

varying vec2 vUv;

void main() {

//内置函数texture2D通过纹理坐标vUv获得贴图texture的像素值

vec4 tColor = texture2D( texture, vUv );

//计算RGB三个分量光能量之和,也就是亮度

float luminance = 0.299*tColor.r+0.587*tColor.g+0.114*tColor.b;

//逐片元赋值,RGB相同均为亮度值,用黑白两色表达图片的明暗变化

gl_FragColor = vec4(luminance,luminance,luminance,1);

}

以上是 Three.js 着色器 纹理贴图映射和彩色图转灰度图 的全部内容, 来源链接: utcz.com/z/264145.html

回到顶部