我使用 WebGL 在一个简单的立方体上应用了纹理。纹理是一个有 2 种颜色的棋盘;这是结果:
我想知道如何只为某些像素编辑纹理的颜色,以便使用不同的颜色在这个立方体上获得眼睛或嘴巴之类的东西。
这是我用来构建检查板的代码:
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);
}
这个问题有多种解决方案。
(最佳选项)使用着色器将您加载的面部图像分层放置在棋盘之上。如果您愿意,这甚至可以让您完全避免为棋盘使用纹理。这是最好的选择,因为学习着色器对于任何图形情况都是必须的。
加载面部图像并将其混合到纹理中。
(糟糕的选择,但有效)使用一些奇特的数学方法在纹理上绘制一张脸。
每一个都需要一些知识才能完成:
第三种方法最棘手,但最容易实现,无需太多额外知识。我不知道你想要的脸有多复杂,任何比卡通眼睛和嘴巴更复杂的东西都是不可能的。
一般的想法是编写一个函数,使曲线(例如在Desmos 中)跨越 2 个点。这是我的方程:x(x-30)*0.03。在 JS 中,只需为 0 到 30 做一个 for 循环,然后评估该函数,这将是眼睛底部的高度(相对于起点)。您也可以否定该功能以获得眼睛的顶部。然后你可以为瞳孔画一个圆圈。然后对另一只眼睛重复。这只是我的看法,您确实需要玩弄它并发挥创意。
祝你好运!
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句