I am hoping someone can support reviewing my attached html and js code to correct my error. Or at minimum share with me a similar example so that I can learn to correct my errors.
The expectation is to create a textured Pyramid successfully using different images in .js (WebGL) on a each face of a pyramid. Please see my html and js code. I am unable to see any image. I tried fixing the CORS error with local host and still see nothing. I do not know where the error is to correct the issue.
HTML:
<!DOCTYPE html>
<html>
<button id = "ButtonX">Rotate X</button>
<button id = "ButtonY">Rotate Y</button>
<button id = "ButtonZ">Rotate Z</button>
<button id = "ButtonT">Toggle Rotation</button>
<img id="face0" src="face0.png" hidden crossorigin="anonymous"></img>
<img id="face1" src="face1.jpg" hidden crossorigin="anonymous"></img>
<img id="face2" src="face2.png" hidden crossorigin="anonymous"></img>
<img id="face3" src="face3.png" hidden crossorigin="anonymous"></img>
<script id="vertex-shader" type="x-shader/x-vertex">
#version 300 es
in vec4 aPosition;
in vec4 aColor;
in vec2 aTexCoord;
out vec4 vColor;
out vec2 vTexCoord;
uniform vec3 uTheta;
void main()
{
// Compute the sines and cosines of theta for each of
// the three axes in one computation.
vec3 angles = radians(uTheta);
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);
vColor = aColor;
vTexCoord = aTexCoord;
gl_Position = rz * ry * rx * aPosition;
gl_Position.z = -gl_Position.z;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#version 300 es
precision mediump float;
in vec4 vColor;
in vec2 vTexCoord;
out vec4 fColor;
uniform sampler2D uTex0;
uniform sampler2D uTex1;
void
main()
{
fColor = vColor*(texture(uTex0, vTexCoord)*texture(uTex1, vTexCoord));
}
</script>
<script type="text/javascript" src="../SmithLarisaProj7/initShaders.js"></script>
<script type="text/javascript" src="../SmithLarisaProj7/utility.js"></script>
<script type="text/javascript" src="../SmithLarisaProj7/MVnew.js"></script>
<script type="text/javascript" src="../SmithLarisaProj7/SmithLarisaPyramid.js"></script>
<body>
<canvas id="gl-canvas" width="1024" height="1024">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
JS:
"use strict";
var canvas;
var gl;
var numPositions = 12;
var positionsArray = [];
var normalsArray = [];
var colorsArray = [];
var texSize = 64;
var numChecks = 8;
var axis=0;
var program;
var texture;
var imageUrls = [
"face0.png",
"face1.jpg",
"face2.png",
"face3.png"
];
var t1, t2;
var c;
var flag = true;
var vertices = [
vec4(0.5, -0.2722, 0.2886, 1.0),
vec4(0.0, -0.2772, -0.5773, 1.0),
vec4(-0.5, -0.2722, 0.2886, 1.0),
vec4(0.0, 0.5443, 0.0, 1.0)
];
var vertexColors = [
vec4(0.0, 0.0, 1.0, 1.0), // blue
vec4(1.0, 0.0, 1.0, 1.0), // magenta
vec4(0.0, 1.0, 1.0, 1.0), // cyan
vec4(0.0, 0.0, 0.0, 1.0) // white
];
/* 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 positionsArray = [];
var colorsArray = [];
var texCoordsArray = [];
var texCoord0 = [
vec2(0, 0),
vec2(0, 1),
vec2(1, 1),
vec2(1, 0)
];
var texCoord1 = [
vec2(0, 0),
vec2(0, 1),
vec2(1, 1),
vec2(1, 0)
];
var texCoord2 = [
vec2(0, 0),
vec2(0, 1),
vec2(1, 1),
vec2(1, 0)
];
var texCoord3 = [
vec2(0, 0),
vec2(0, 1),
vec2(1, 1),
vec2(1, 0)
];
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var axis = xAxis;
var theta = vec3(45.0, 45.0, 45.0);
var thetaLoc;
function configureTexture(images, textureUnit) {
gl.activeTexture(gl.TEXTURE0 = textureUnit);
texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, images);
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(program, "uTexMap" + textureUnit),textureUnit);
}
function tri(a, b, c, texCoord) {
positionsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[0]);
positionsArray.push(vertices[b]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[1]);
positionsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[2]);
positionsArray.push(vertices[a]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[0]);
positionsArray.push(vertices[c]);
colorsArray.push(vertexColors[a]);
texCoordsArray.push(texCoord[2]);
}
function colorPyramid()
{
tri(1, 2, 3, texCoord0);
tri(2, 3, 0, texCoord1);
tri(3, 1, 2, texCoord2);
tri(0, 2, 1, texCoord3);
}
window.onload = function init() {
canvas = document.getElementById("gl-canvas");
gl = canvas.getContext('webgl2');
if (!gl) alert("WebGL 2.0 isn't available");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.enable(gl.DEPTH_TEST);
var numImages = imageUrls.length;
for(var i=0; i<numImages; i++) {
var images = document.getElementById("face" + (i+1));
configureTexture(images, i);
}
//
// Load shaders and initialize attribute buffers
//
program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
colorPyramid();
var cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW);
var colorLoc = gl.getAttribLocation( program, "aColor");
gl.vertexAttribPointer(colorLoc, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(colorLoc);
var vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(positionsArray), gl.STATIC_DRAW);
var positionLoc = gl.getAttribLocation( program, "aPosition");
gl.vertexAttribPointer(positionLoc, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionLoc );
var tBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, tBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(texCoordsArray), gl.STATIC_DRAW);
var texCoordLoc = gl.getAttribLocation(program, "aTexCoord");
gl.vertexAttribPointer(texCoordLoc, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(texCoordLoc);
var image = document.getElementById("face");
configureTexture(image);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture1);
gl.uniform1i(gl.getUniformLocation( program, "uTex0"), 0);
gl.activeTexture(gl.TEXTURE3 );
gl.bindTexture(gl.TEXTURE_2D, texture3);
gl.uniform1i(gl.getUniformLocation( program, "uTex1"), 3);
thetaLoc = gl.getUniformLocation(program, "uTheta");
document.getElementById("ButtonX").onclick = function(){axis = xAxis;};
document.getElementById("ButtonY").onclick = function(){axis = yAxis;};
document.getElementById("ButtonZ").onclick = function(){axis = zAxis;};
document.getElementById("ButtonT").onclick = function(){flag = !flag;};
render();
}
var render = function() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
if(flag) theta[axis] += 2.0;
gl.uniform3fv(thetaLoc, theta);
for(i=0;i<12;i++){
gl.bindTexture(gl.TEXTURE_2D, texture[i+start])
gl.drawArrays(gl.TRIANGLES, 12*i, numPositions);
}
requestAnimationFrame(render);
}
I tried using a php opening a local host to fix CORS error, but still am unable to see any image. Therefore, I believe there is an issue in the code.