《WebGL编程指南》学习笔记 0着色器获取js数据

// 定义着色器代码
var vertexShaderSource = `
    // ... 省略其他定义 ...
    attribute vec4 a_Position; // 位置属性
    attribute vec2 a_TexCoord; // 纹理坐标属性
    varying vec2 v_TexCoord; // 传递给片元着色器的纹理坐标
    // ... 省略其他定义 ...
 
    void main() {
        // 设置位置
        gl_Position = u_ModelViewMatrix * u_ProjectionMatrix * a_Position;
        // 传递纹理坐标到片元着色器
        v_TexCoord = a_TexCoord;
    }
`;
 
var fragmentShaderSource = `
    // ... 省略其他定义 ...
    precision mediump float; // 设置浮点数的计算精度
    varying vec2 v_TexCoord; // 从顶点着色器接收纹理坐标
    uniform sampler2D u_Sampler; // 纹理单元
    // ... 省略其他定义 ...
 
    void main() {
        // 获取纹理颜色
        vec4 color = texture2D(u_Sampler, v_TexCoord);
        // 输出颜色
        gl_FragColor = color;
    }
`;
 
// 创建着色器程序的函数
function createProgram(gl, vertexShaderSource, fragmentShaderSource) {
    // ... 省略创建着色器和程序的代码 ...
}
 
// 使用函数创建着色器程序
var program = createProgram(gl, vertexShaderSource, fragmentShaderSource);

这个例子展示了如何在WebGL中定义着色器代码，并使用JavaScript函数创建着色器程序。在着色器中，我们定义了attribute变量来接收位置和纹理坐标数据，并使用uniform来接收纹理和矩阵数据。在顶点着色器中，我们设置了顶点的位置，并将纹理坐标传递到片元着色器。在片元着色器中，我们使用texture2D函数来对纹理坐标进行纹理查询，并设置片元的最终颜色。最后，我们使用一个JavaScript函数来创建着色器程序，这个函数应该包括创建着色器、附加着色器源码、编译着色器以及链接着色器程序的步骤。