JavaScript WebGL 设置颜色

·  阅读 91

引子

JavaScript WebGL 绘制一个面之后想着可以尝试复杂一点的了,没想到设置颜色的时候又出现问题了。

设置颜色

在之前的示例中,都是设置单一的颜色,但每个顶点都可以拥有各自的颜色信息。

基于绘制三角形主要有下面几方面变化:

  • 数据

  • 顶点着色器

  • 片元着色器

  • 缓冲颜色数据

数据

颜色数据有 4 个分量:R、G、B、A 。


let colors = [

    1.0, 0.0, 0.0, 1.0, // red

    0.0, 1.0, 0.0, 1.0, // green

    0.0, 0.0, 1.0, 1.0, // blue

];

复制代码

顶点着色器

之前都是只提供了位置变量,对于颜色需要提供额外的颜色变量进行存储。此外还需要输出对应的颜色到下一个阶段。


const source = `

    attribute vec3 vertexPos;

    attribute vec4 vertexColor;

    varying vec4 vColor;

    void main(void){

    gl_Position = vec4(vertexPos, 1);

    vColor = vertexColor;

}

`;

复制代码

这里面多了一个 varying 类型的变量,这是一种顶点着色器给片断着色器传值的方式。

片元着色器

片元着色器接受对应的变量也要进行声明。


const fragmentSource = `

    precision highp float;

    varying vec4 vColor;

    void main(void){

    gl_FragColor = vColor;

    }

`;

复制代码

这里出现了变量,需要用 precision highp float 设置片元着色器的浮点数精度。顶点着色器有默认的精度可以不用显式设置。

缓冲颜色数据

顶点位置数据进行了缓冲,颜色数据也要进行缓冲。


/**

* 缓冲颜色数据

* @param {*} gl WebGL 上下文

* @param {*} shaderProgram 着色器程序

* @param {*} colorData 颜色数据

*/

function setColorBuffers(gl, shaderProgram, colorData) {

    // 创建空白的缓冲对象

    const buffer = gl.createBuffer();

    // 绑定目标

    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    // WebGL 不支持直接使用 JavaScript 原始数组类型,需要转换

    const dataFormat = new Float32Array(colorData);

    // 初始化数据存储

    gl.bufferData(gl.ARRAY_BUFFER, dataFormat, gl.DYNAMIC_DRAW);

    // 获取对应数据索引,变量跟顶点着色器里面对应

    const vertexPos = gl.getAttribLocation(shaderProgram, "vertexColor");

    // 解析顶点数据

    gl.vertexAttribPointer(vertexPos, 4, gl.FLOAT, false, 0, 0);

    // 启用顶点属性,顶点属性默认是禁用的。

    gl.enableVertexAttribArray(vertexPos);

}

复制代码

效果

这是示例,效果如下:

95-result

发现颜色渐变发散开来了,这个是因为在光栅化过程中,转变为像素时对颜色进行了插值。

在程序中只定义了三个顶点的颜色,它们之间像素的颜色会随着像素位置变化,相邻像素之间同一种单色的差值是定值。如果不想要这样的效果,可以在片元着色器中自定义。

动态自定义示例

这是示例,片元着色器主要变化:


const fragmentSource = `

    precision highp float;

    varying vec4 vColor;

    int findMax(float r, float g, float b) {

    if (r > g && r > b) {

    return 0;

    }

    if (g > r && g > b) {

    return 1;

    }

    return 2;

    }

    void main(void){

        float red = vColor.r;

        float green = vColor.g;

        float blue = vColor.b;

        int max = findMax(red, green, blue);

        vec4 finalColor = vColor;

        if (max == 0) {

            finalColor = vec4(1.0, 0.0, 0.0, 1.0);

        }

        else if (max == 1) {

            finalColor = vec4(0.0, 1.0, 0.0, 1.0);

        }

        else if (max == 2) {

            finalColor = vec4(0.0, 0.0, 1.0, 1.0);

        }

        gl_FragColor = finalColor;

    }

`;

复制代码

findMax 方法会对每个像素的颜色的分量进行比较,将最终颜色设置为最大的一个分量。下面是效果:

95-custom

参考资料

看完了《迪丽丽的奇幻冒险》,找了这个导演另一部作品《阿祖尔和阿斯马尔》

这个故事神话色彩很强,整体内容感觉不错。里面的服装依然华丽,建筑依然精致,很明显的用了大量对称。

95-poster

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改