我正在尝试创建一个由两个立方体组成的程序，一个带有颜色，另一个带有彩色纹理。这些立方体根据键盘输入移动和旋转，如下所示:
u - 上、d - 下、l - 左、r - 右、i - 内、o - 出、g - 增长、s - 收缩
x/y/z - 沿立方体的 x/y/z 轴旋转
shift + x/y/z - 与上面相同，但方向相反，按钮在立方体之间切换。
这是 HTML 文件:
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform vec3 theta;
uniform vec4 posiz;
void main()
{
// Compute the sines and cosines of theta for each of the three axes in one computation.
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
// Remember: these matrices are column-major
mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0 );
// position matrix
mat4 posMat = mat4( 1.0, 0.0, 0.0, 0.0,
0.0, 1.0, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
posiz[0], posiz[1], posiz[2], 1.0 );
// size matrix
mat4 sizMat = mat4( posiz[3], 0.0, 0.0, 0.0,
0.0, posiz[3], 0.0, 0.0,
0.0, 0.0, posiz[3], 0.0,
0.0, 0.0, 0.0, 1.0 );
fColor = vColor;
gl_Position = sizMat * posMat * rz * ry * rx * vPosition;
}
</script>
<script id="vertex-shader-texture" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
attribute vec2 vTexCoord;
varying vec4 fColor;
varying vec2 fTexCoord;
uniform vec3 theta;
void main()
{
// Compute the sines and cosines of theta for each of
// the three axes in one computation.
vec3 angles = radians( theta );
vec3 c = cos( angles );
vec3 s = sin( angles );
// Remeber: thse matrices are column-major
mat4 rx = mat4( 1.0, 0.0, 0.0, 0.0,
0.0, c.x, s.x, 0.0,
0.0, -s.x, c.x, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 ry = mat4( c.y, 0.0, -s.y, 0.0,
0.0, 1.0, 0.0, 0.0,
s.y, 0.0, c.y, 0.0,
0.0, 0.0, 0.0, 1.0 );
mat4 rz = mat4( c.z, -s.z, 0.0, 0.0,
s.z, c.z, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0 );
fColor = vColor;
fTexCoord = vTexCoord;
gl_Position = rz * ry * rx * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script id="fragment-shader-texture" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
varying vec2 fTexCoord;
uniform sampler2D texture;
void
main()
{
gl_FragColor = fColor * texture2D( texture, fTexCoord );
}
</script>
<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="myCubes.js"></script>
<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<br/>
<input type = "button" value = "First" id = "switchButton" ></input>
<img id = "texImage" src = "diagram.png" hidden></img>
</body>
</html>
文件 webgl-utils.js、initShaders.js 和 MV.js 可以在这里找到:
http://www.cs.unm.edu/~angel/WebGL/7E/Common/
这是随附的 javascript 文件:
var canvas;
var gl;
var numVertices = 36;
var pointsArray = [];
var colorsArray = [];
var texCoordsArray = [];
var texture; // second cube texture
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis1 = 0;
var axis2 = 0;
var rot1 = 1.0; // rate of rotation
var rot2 = 1.0;
var theta1 = [ 0, 0, 0 ];
var theta2 = [ 0, 0, 0 ];
// cube position along x, y, and z axis and size
var posiz1 = [ 0, 0, 0, 1 ];
var posiz2 = [ 0, 0, 0, 1 ];
// used to send info back to html, I think
var thetaLoc;
var posLoc;
var firstCube = true;
// globals
var program;
var programTexture;
var iBuffer;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var cBufferTexture;
var vColorTexture;
var vBufferTexture;
var vPositionTexture;
var tBuffer;
var vTexCoord;
var image;
var vertices = [
vec3( -0.5, -0.5, 0.5 ),
vec3( -0.5, 0.5, 0.5 ),
vec3( 0.5, 0.5, 0.5 ),
vec3( 0.5, -0.5, 0.5 ),
vec3( -0.5, -0.5, -0.5 ),
vec3( -0.5, 0.5, -0.5 ),
vec3( 0.5, 0.5, -0.5 ),
vec3( 0.5, -0.5, -0.5 )
];
var vertexColors = [
vec4( 0.0, 0.0, 0.0, 1.0 ), // black
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow
vec4( 0.0, 1.0, 0.0, 1.0 ), // green
vec4( 0.0, 0.0, 1.0, 1.0 ), // blue
vec4( 1.0, 0.0, 1.0, 1.0 ), // magenta
vec4( 1.0, 1.0, 1.0, 1.0 ), // white
vec4( 0.0, 1.0, 1.0, 1.0 ) // cyan
];
// indices of the 12 triangles that comprise the cube
var indices = [
1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6,
4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5
];
// texture coordinates
var texCoord = [
vec2(0, 0),
vec2(0, 1),
vec2(1, 1),
vec2(1, 0)
];
function configureTexture( image )
{
texture = gl.createTexture();
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image );
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 );
gl.uniform1i(gl.getUniformLocation(programTexture, "texture"), 0);
}
function quad(a, b, c, d)
{
pointsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[0]);
pointsArray.push(vertices[b]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[1]);
pointsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[2]);
pointsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[0]);
pointsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[2]);
pointsArray.push(vertices[d]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[3]);
}
function colorCube()
{
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 );
}
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//event listeners for buttons
document.getElementById( "switchButton" ).onclick = function ()
{
firstCube = !firstCube; // switch between cubes
if (firstCube) document.getElementById("switchButton").value = "First";
else document.getElementById("switchButton").value = "Second";
};
window.onkeydown = function(event)
{
var key = String.fromCharCode(event.keyCode);
if (firstCube)
{
if (key == 'R') posiz1[0] += .1;
else if (key == 'L') posiz1[0] -= .1;
else if (key == 'U') posiz1[1] += .1;
else if (key == 'D') posiz1[1] -= .1;
else if (key == 'I') posiz1[2] += .1;
else if (key == 'O') posiz1[2] -= .1;
else if (key == 'G') posiz1[3] += .1;
else if (key == 'S') posiz1[3] -= .1;
if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
rot1 = -1.0;
else if (key == 'X' || key == 'Y' || key == 'Z')
rot1 = 1.0;
if (key == 'X') axis1 = xAxis;
if (key == 'Y') axis1 = yAxis;
if (key == 'Z') axis1 = zAxis;
}
else
{
if (key == 'R') posiz2[0] += .1;
else if (key == 'L') posiz2[0] -= .1;
else if (key == 'U') posiz2[1] += .1;
else if (key == 'D') posiz2[1] -= .1;
else if (key == 'I') posiz2[2] += .1;
else if (key == 'O') posiz2[2] -= .1;
else if (key == 'G') posiz2[3] += .1;
else if (key == 'S') posiz2[3] -= .1;
if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
rot2 = -1.0;
else if (key == 'X' || key == 'Y' || key == 'Z')
rot2 = 1.0;
if (key == 'X') axis2 = xAxis;
if (key == 'Y') axis2 = yAxis;
if (key == 'Z') axis2 = zAxis;
}
};
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
// Load shaders and initialize attribute buffers
program = initShaders( gl, "vertex-shader", "fragment-shader" );
programTexture = initShaders( gl, "vertex-shader-texture", "fragment-shader-texture" );
gl.useProgram( program );
colorCube();
// array element buffer
iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
// color array attribute buffer
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
// vertex array attribute buffer
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
// get started on textured cube
gl.useProgram( programTexture);
cBufferTexture = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBufferTexture );
gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
vColorTexture = gl.getAttribLocation( programTexture, "vColor" );
gl.vertexAttribPointer( vColorTexture, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColorTexture );
vBufferTexture = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBufferTexture );
gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
vPositionTexture = gl.getAttribLocation( programTexture, "vPosition" );
gl.vertexAttribPointer( vPositionTexture, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPositionTexture );
tBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, tBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(texCoordsArray), gl.STATIC_DRAW );
vTexCoord = gl.getAttribLocation( programTexture, "vTexCoord" );
gl.vertexAttribPointer( vTexCoord, 2, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vTexCoord );
image = document.getElementById("texImage");
configureTexture( image );
render();
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
// connect location to variable in html
thetaLoc = gl.getUniformLocation(program, "theta");
posizLoc = gl.getUniformLocation(program, "posiz");
// handle rendering of first cube
theta1[axis1] += rot1;
gl.uniform3fv(thetaLoc, theta1);
gl.uniform4fv(posizLoc, posiz1);
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
// handle rendering of second textured cube
gl.useProgram(programTexture);
thetaLoc = gl.getUniformLocation(programTexture, "theta");
posizLoc = gl.getUniformLocation(programTexture, "posiz");
theta2[axis2] += rot2;
gl.uniform3fv(thetaLoc, flatten(theta2));
gl.uniform4fv(posizLoc, posiz2);
gl.drawArrays( gl.TRIANGLES, 0, numVertices );
// gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
requestAnimFrame( render );
}
由于某种原因，没有出现任何立方体。对代码进行了一些修改，我发现 javascript 代码因以下更改而中断
// get started on textured cube
注释行。以下 JavaScript 代码与上面的 JavaScript 代码相同，只是“开始使用纹理立方体”注释行下方的代码:
var canvas;
var gl;
var numVertices = 36;
var pointsArray = [];
var colorsArray = [];
var texCoordsArray = [];
var texture; // second cube texture
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis1 = 0;
var axis2 = 0;
var rot1 = 1.0; // rate of rotation
var rot2 = 1.0;
var theta1 = [ 0, 0, 0 ];
var theta2 = [ 0, 0, 0 ];
// cube position along x, y, and z axis and size
var posiz1 = [ 0, 0, 0, 1 ];
var posiz2 = [ 0, 0, 0, 1 ];
// used to send info back to html, I think
var thetaLoc;
var posLoc;
var firstCube = true;
// globals
var program;
var programTexture;
var iBuffer;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var cBufferTexture;
var vColorTexture;
var vBufferTexture;
var vPositionTexture;
var tBuffer;
var vTexCoord;
var image;
var vertices = [
vec3( -0.5, -0.5, 0.5 ),
vec3( -0.5, 0.5, 0.5 ),
vec3( 0.5, 0.5, 0.5 ),
vec3( 0.5, -0.5, 0.5 ),
vec3( -0.5, -0.5, -0.5 ),
vec3( -0.5, 0.5, -0.5 ),
vec3( 0.5, 0.5, -0.5 ),
vec3( 0.5, -0.5, -0.5 )
];
var vertexColors = [
vec4( 0.0, 0.0, 0.0, 1.0 ), // black
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 1.0, 0.0, 1.0 ), // yellow
vec4( 0.0, 1.0, 0.0, 1.0 ), // green
vec4( 0.0, 0.0, 1.0, 1.0 ), // blue
vec4( 1.0, 0.0, 1.0, 1.0 ), // magenta
vec4( 1.0, 1.0, 1.0, 1.0 ), // white
vec4( 0.0, 1.0, 1.0, 1.0 ) // cyan
];
// indices of the 12 triangles that comprise the cube
var indices = [
1, 0, 3, 3, 2, 1, 2, 3, 7, 7, 6, 2,
3, 0, 4, 4, 7, 3, 6, 5, 1, 1, 2, 6,
4, 5, 6, 6, 7, 4, 5, 4, 0, 0, 1, 5
];
// texture coordinates
var texCoord = [
vec2(0, 0),
vec2(0, 1),
vec2(1, 1),
vec2(1, 0)
];
function configureTexture( image )
{
texture = gl.createTexture();
gl.bindTexture( gl.TEXTURE_2D, texture );
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D( gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image );
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 );
gl.uniform1i(gl.getUniformLocation(programTexture, "texture"), 0);
}
function quad(a, b, c, d)
{
pointsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[0]);
pointsArray.push(vertices[b]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[1]);
pointsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[2]);
pointsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[0]);
pointsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[2]);
pointsArray.push(vertices[d]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[3]);
}
function colorCube()
{
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 );
}
window.onload = function init()
{
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
//event listeners for buttons
document.getElementById( "switchButton" ).onclick = function ()
{
firstCube = !firstCube; // switch between cubes
if (firstCube) document.getElementById("switchButton").value = "First";
else document.getElementById("switchButton").value = "Second";
};
window.onkeydown = function(event)
{
var key = String.fromCharCode(event.keyCode);
if (firstCube)
{
if (key == 'R') posiz1[0] += .1;
else if (key == 'L') posiz1[0] -= .1;
else if (key == 'U') posiz1[1] += .1;
else if (key == 'D') posiz1[1] -= .1;
else if (key == 'I') posiz1[2] += .1;
else if (key == 'O') posiz1[2] -= .1;
else if (key == 'G') posiz1[3] += .1;
else if (key == 'S') posiz1[3] -= .1;
if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
rot1 = -1.0;
else if (key == 'X' || key == 'Y' || key == 'Z')
rot1 = 1.0;
if (key == 'X') axis1 = xAxis;
if (key == 'Y') axis1 = yAxis;
if (key == 'Z') axis1 = zAxis;
}
else
{
if (key == 'R') posiz2[0] += .1;
else if (key == 'L') posiz2[0] -= .1;
else if (key == 'U') posiz2[1] += .1;
else if (key == 'D') posiz2[1] -= .1;
else if (key == 'I') posiz2[2] += .1;
else if (key == 'O') posiz2[2] -= .1;
else if (key == 'G') posiz2[3] += .1;
else if (key == 'S') posiz2[3] -= .1;
if (event.shiftKey == 0 && (key == 'X' || key == 'Y' || key == 'Z'))
rot2 = -1.0;
else if (key == 'X' || key == 'Y' || key == 'Z')
rot2 = 1.0;
if (key == 'X') axis2 = xAxis;
if (key == 'Y') axis2 = yAxis;
if (key == 'Z') axis2 = zAxis;
}
};
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
// Load shaders and initialize attribute buffers
program = initShaders( gl, "vertex-shader", "fragment-shader" );
programTexture = initShaders( gl, "vertex-shader-texture", "fragment-shader-texture" );
gl.useProgram( program );
colorCube();
// array element buffer
iBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, iBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(indices), gl.STATIC_DRAW);
// color array attribute buffer
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW );
vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );
// vertex array attribute buffer
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );
// get started on textured cube
render();
}
function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// connect location to variable in html
thetaLoc = gl.getUniformLocation(program, "theta");
posizLoc = gl.getUniformLocation(program, "posiz");
// handle rendering of first cube
theta1[axis1] += rot1;
gl.uniform3fv(thetaLoc, theta1);
gl.uniform4fv(posizLoc, posiz1);
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
// handle rendering of second cube
theta2[axis2] += rot2;
gl.uniform3fv(thetaLoc, theta2);
gl.uniform4fv(posizLoc, posiz2);
gl.drawElements( gl.TRIANGLES, numVertices, gl.UNSIGNED_BYTE, 0 );
requestAnimFrame( render );
}
这个 JavaScript 文件在渲染两个彩色立方体时工作正常，但我不知道如何在第二个立方体上渲染纹理。
我的修改基于文件texturedCube1.js和texturedCube1.html，可以在此处检索:http://www.cs.unm.edu/~angel/WebGL/7E/07/ .
我是一个新手，你可能可以从我的代码中看出这一点，而且我并不总是确定幕后发生了什么。我将继续修改 JavaScript 代码，但如果有人至少可以帮助阐明为什么我的立方体消失或如何同时获得彩色立方体和纹理立方体，那将非常有帮助。
非常感谢您提前提供的帮助和时间!
最佳答案
我没有尝试运行您的代码，但看起来您在这里遇到了问题:
vBufferTexture = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBufferTexture );
gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
vPositionTexture = gl.getAttribLocation( programTexture, "vPosition" );
// here:
gl.vertexAttribPointer( vPositionTexture, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPositionTexture );
pointsArray 是一个 vec3 数组，但您传递 4 作为组件数量。尝试:
gl.vertexAttribPointer( vPositionTexture, 3, gl.FLOAT, false, 0, 0 );
关于javascript - 我的立方体消失了，我不知道为什么，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29956074/