编辑纹理颜色-WebGL

我使用WebGL在一个简单的立方体上应用了纹理。纹理为两种颜色的检查板；结果是：

我想知道如何编辑颜色的纹理只为一些像素，以获得像眼睛或嘴巴在这个立方体上，使用不同的颜色

这是我用来构建检查板的代码：

var colorsArray = [];

var vertexColors = [
                    vec4( 1.0, 0.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 1.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 0.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 1.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 0.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 1.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 1.0, 1.0, 1.0 ),  //
                    vec4( 1.0, 1.0, 1.0, 1.0 )   //
                    ];

var move_forward = false;

// TEXTURE
var texSize = 256;
var numChecks = 8;
var c;

var image1 = new Uint8Array(4*texSize*texSize);

for ( var i = 0; i < texSize; i++ ) {
    for ( var j = 0; j <texSize; j++ ) {
        var patchx = Math.floor(i/(texSize/numChecks));
        var patchy = Math.floor(j/(texSize/numChecks));
        if(patchx%2 ^ patchy%2) c = 255;
        else c = 0;
        //c = 255*(((i & 0x8) == 0) ^ ((j & 0x8)  == 0))
        image1[4*i*texSize+4*j] = c;
        image1[4*i*texSize+4*j+1] = c;
        image1[4*i*texSize+4*j+2] = c;
        image1[4*i*texSize+4*j+3] = 255;
    }
}

var image2 = new Uint8Array(4*texSize*texSize);

// Create a checkerboard pattern
for ( var i = 0; i < texSize; i++ ) {
    for ( var j = 0; j <texSize; j++ ) {
        image2[4*i*texSize+4*j] = 127+127*Math.sin(0.1*i*j);
        image2[4*i*texSize+4*j+1] = 127+127*Math.sin(0.1*i*j);
        image2[4*i*texSize+4*j+2] = 127+127*Math.sin(0.1*i*j);
        image2[4*i*texSize+4*j+3] = 255;
    }
}

var texture1, texture2;
var t1, t2;

var texCoordsArray = [];

var texCoord = [
                vec2(0, 0),
                vec2(0, 1),
                vec2(1, 1),
                vec2(1, 0)
                ];

function configureTexture() {
    texture1 = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture1 );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, image1);
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
                     gl.NEAREST_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

    texture2 = gl.createTexture();
    gl.bindTexture( gl.TEXTURE_2D, texture2 );
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, texSize, texSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, image2);
    gl.generateMipmap( gl.TEXTURE_2D );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER,
                     gl.NEAREST_MIPMAP_LINEAR );
    gl.texParameteri( gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
}

var colorsArray=[]；
可变顶点颜色=[
vec4（1.0,0.0,1.0,1.0）//
vec4（1.0,1.0,1.0,1.0）//
vec4（1.0,0.0,1.0,1.0）//
vec4（1.0,1.0,1.0,1.0）//
vec4（1.0,0.0,1.0,1.0）//
vec4（1.0,1.0,1.0,1.0）//
vec4（1.0,1.0,1.0,1.0）//
vec4（1.0,1.0,1.0,1.0）//
];
var向前移动=错误；
//质地
var-texSize=256；
var numChecks=8；
var c；
var image1=新的UINT8阵列（4*texSize*texSize）；
对于（变量i=0；i对于（var j=0；j这个问题有多种解决方案

（最佳选项）使用着色器将加载的面图像分层到棋盘上方。如果需要，甚至可以避免完全使用棋盘纹理。这是最佳选项，因为学习着色器对于任何图形情况都是必须的

加载面部图像并将其混合到纹理中

（选项不好，但有效）使用一些奇特的数学在纹理上绘制一个面

其中每一项都需要一些知识来完成：



第三种方法是最复杂的，但最容易实现，不需要太多额外的知识。我不知道你想要的脸有多复杂，任何比卡通眼睛和嘴巴更复杂的东西都是不可能的

一般的想法是编写一个函数，在2个点上绘制一条曲线（例如in）。这是我的方程：x（x-30）*0.03。在JS中，只需在0到30之间绘制一个for循环，然后计算该函数，这就是眼睛底部的高度（相对于起点）.你也可以取消这个功能来占据眼球的顶部。然后你可以为瞳孔画一个圆圈。然后对另一只眼睛重复。这只是我对它的看法，你真的需要玩它并获得创造性

祝你好运！
谢谢你的帮助，这些都是很好的解决方案，我无法使用其他着色器来完成此任务，不幸的是，我无法加载其他图像，我需要更改检查板上2个小正方形的颜色来绘制眼睛：例如3行-第3列和第7列；以及其他指向嘴巴的颜色。只需更改图像数组。类似于
image1.set（[255,255,255,255]，4*（y*texSize+x））
（使用
set
一次指定多个元素）。或者您可以使用单独的二维画布绘制面，然后将其用作纹理数据。