WebGL基础2-颜色、纹理

2023-07-28 11:31:12

色彩与纹理：用 WebGL 点亮你的 3D 世界

1. 颜色：为图像注入生机

在 WebGL 的世界中，色彩是你的画笔，用于为你的 3D 图像注入活力。你可以通过定义一个 varying vec4 vColor; 变量在顶点之间传递颜色信息，并在片元着色器中使用它指定每个像素的颜色。

想象一下，你要给一个立方体上色，你可以为每个面指定不同的颜色，或者使用纹理贴图创造更加丰富的色彩效果。灯光也可以派上用场，为物体增添阴影和高光，让它们看起来更加真实。

代码示例：

// 顶点着色器
varying vec4 vColor;

void main() {
    // ...其他顶点着色器代码
    vColor = vec4(1.0, 0.0, 0.0, 1.0); // 指定顶点颜色
}

// 片元着色器
varying vec4 vColor;

void main() {
    // ...其他片元着色器代码
    gl_FragColor = vColor; // 设置像素颜色
}

2. 纹理：让图像栩栩如生

纹理就像贴纸，可以为你的物体表面添加额外的细节和质感。它可以模拟各种材料的外观，从木材的纹理到金属的光泽。纹理图像被加载到显存中，然后应用到物体表面，创造出逼真的效果。

使用纹理的关键在于纹理坐标。它们告诉着色器在纹理中对应的位置，使你能够正确地应用纹理。

代码示例：

// ...创建纹理对象和加载图像的代码

// 顶点着色器
varying vec2 vTexCoord; // 定义纹理坐标

void main() {
    // ...其他顶点着色器代码
    vTexCoord = vec2(0.0, 0.0); // 设置纹理坐标
}

// 片元着色器
varying vec2 vTexCoord;

uniform sampler2D uTexture; // 定义纹理采样器

void main() {
    // ...其他片元着色器代码
    gl_FragColor = texture2D(uTexture, vTexCoord); // 采样纹理并设置像素颜色
}