Slice missing from WebGL triangle fan

Slice missing from WebGL triangle fan - javascript

I have been trying to create a full circle using the triangle fan approach. However, I've tried increasing the number of fans from 80 to 360. Then I tried increasing it to 500, 5000, 50000. It disappears at 50000 only because the slice is so small... I am wondering how I can fill in that missing slice.
Here is the code I am working with:
// RotatingTriangle.js (c) 2012 matsuda
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_ModelMatrix;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0, 0, 0, 1);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the rectangle
gl.drawArrays(gl.TRIANGLE_FAN, 0, n);
}
function initVertexBuffers(gl) {
var circle = {x: 0, y:0, r: 0.75};
var ATTRIBUTES = 2;
var numFans = 64;
var degreePerFan = (2* Math.PI) / numFans;
var vertexData = [
0.0, 0.0
];
// updated here, but the problem still persists
for(var i = 0; i <= numFans; i++) {
var index = 2 + i*2;
var angle = degreePerFan * (i+1);
//console.log(angle)
vertexData[index] = Math.cos(angle) * 0.5;
vertexData[index + 1] = Math.sin(angle) * 0.5;
}
//console.log(vertexData);
var vertexDataTyped = new Float32Array(vertexData);
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
　// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return numFans;
}
Picture of missing slice
// SOLUTION
for(var i = 0; i <= numFans; i++) {
var index = i*2; <--- (used to be 'var index = 2 + i*2;')
var angle = degreePerFan * (i+1);
//console.log(angle)
vertexData[index] = Math.cos(angle) * 0.5;
vertexData[index + 1] = Math.sin(angle) * 0.5;
}

I cannot reproduce the issue, however the generation of the vertices is not correct. The index of the 2nd vertex coordinate is 0.0, 0.0:
var index = 2*3 + i*2;
var index = 2 + i*2;
Vertex generation:
var vertexData = [
0.0, 0.0,
];
for(var i = 0; i <= numFans; i++) {
var index = 2 + i*2;
var angle = degreePerFan * i;
vertexData[index] = Math.cos(angle) * 0.5;
vertexData[index + 1] = Math.sin(angle) * 0.5;
}

Related

Fail to apply colors to object in WEBGL

Update to the question, the objective is to draw a circle that each vertice that has a random color.
I have all 1500 vertices with random colors but the colors in the circle appear to have a pattern.
Why is this happening? That could not cause by the logical of Math.random right?
What's the logic behind the coloring?
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'attribute vec4 a_Color;\n' +
'varying vec4 v_Color;\n' + // varying variable
'void main() {\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
' v_Color = a_Color;\n' + // Pass the data to the fragment shader
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'precision mediump float;\n' + // Precision qualifier (See Chapter 6)
'varying vec4 v_Color;\n' + // Receive the data from the vertex shader
'void main() {\n' +
' gl_FragColor = v_Color;\n' +
'}\n';
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl,canvas);
console.log(n);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
// Specify the color for clearing <canvas>
gl.clearColor(0, 0, 0, 1);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw the rectangle
gl.drawArrays(gl.TRIANGLES, 0, n);
}
function initVertexBuffers(gl,canvas) {
var Cx = 0;
var Cy = 0;
// var rect = ev.target.getBoundingClientRect();
var r = 300.0/canvas.height;
var vertices = [];
for (var i = 1; i <= 500; i++) {
vertices.push(Cx);
vertices.push(Cy);
vertices.push(Cx+r*Math.sin(i-1));
vertices.push(Cy+r*Math.cos(i-1));
vertices.push(Cx+r*Math.sin(i));
vertices.push(Cy+r*Math.cos(i));
// vertices.push(Math.random(),Math.random(),Math.random())
}
var vertexColors = [];
for (var i = 1; i <= 1500; i++){
vertexColors.push(Math.random(),Math.random(),Math.random(),1)
}
var n = vertices.length/2;
console.log(vertices);
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
// gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// var FSIZE = vertices.BYTES_PER_ELEMENT;
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexColors), gl.STATIC_DRAW);
// Get the storage location of a_Position, assign buffer and enable
var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
if(a_Color < 0) {
console.log('Failed to get the storage location of a_Color');
return -1;
}
gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Color); // Enable the assignment of the buffer object
return n;
}

WebGL canvas background

I would like to simply add a "sky" background in my scene so that it won't cover the objects but just being visible after them.
I've tried to, but I have no idea to do it without applying it over the other objects drawn in the scene.
Unfortunately I've to do all this without using any advanced library such as three.js and so on.
The background I'd like to use is in /Assets/sky.jpg
Here the js file:
var program0;
var program1;
var gl;
var shaderDir;
var baseDir;
var lastUpdateTime;
var boatModel;
var rockModel;
var rock2Model;
var oceanModel;
var object = [];
//attributes and uniforms
var positionAttributeLocation = Array();
var uvAttributeLocation = Array();
var matrixLocation = Array();
var textLocation = Array();
var normalAttributeLocation = Array();
var normalMatrixPositionHandle = Array();
var worldViewMatrixLocation = Array();
var worldViewMatrixLocation_transpose = Array();
var materialDiffColorHandle = Array();
var lightDirectionHandle = Array();
var lightColorHandle = Array();
var ambientLightcolorHandle = Array();
var specularColorHandle = Array();
var specShineHandle = Array();
var vaos = new Array();
var textures = new Array();
var modelStr = Array();
var modelTexture = Array();
//matrices
var viewMatrix;
var perspectiveMatrix;
//lights
//define directional light
var dirLightAlpha = -utils.degToRad(180);
var dirLightBeta = -utils.degToRad(100);
var directionalLight;
var directionalLightColor;
var ambientLight = [0.5, 0.5, 0.5];
var specularColor = [0.0, 0.0, 0.0];
var specShine = 0.0;
//camera
var cx = 0;
var cy = 0;
var cz = 1;
var camAngle = 0;
var camElev = 5;
//boat kinematics
var linearDir = 0;
var linearVel = 0;
var velX = 0;
var velZ = 0;
var maxLinearVel = 0.01;
var linearAcc = 0.0001;
var linearDrag = 0.005;
var turningDir = 0;
var angularVel = 0.0;
var maxAngularVel = 0.2;
var angularAcc = 0.01;
var angularDrag = 0.01;
modelStr[0] = 'Assets/Boat/Boat.obj';
modelStr[1] = 'Assets/Rocks/Rock1/rock1.obj';
modelStr[2] = 'Assets/Rocks/Rock2/Rock_1.obj';
modelStr[3] = 'Assets/ocean-obj/ocean.obj';
//modelStr[3] = 'Assets/ocean2/hdri-ca-sky.obj';
modelTexture[0] = 'Assets/Boat/textures/boat_diffuse.bmp';
modelTexture[1] = 'Assets/Rocks/Rock1/textures/rock_low_Base_Color.png';
modelTexture[2] = 'Assets/Rocks/Rock2/Rock_1_Tex/Rock_1_Base_Color.jpg';
modelTexture[3] = 'Assets/ocean-obj/woter.jpg';
//modelTexture[3] = 'Assets/ocean2/CA-Sky-2016-04-15-11-30-am.jpg';
modelTexture[4] = 'Assets/Sea/sea.jpg'
var nFrame = 0;
/***********************************************************************************************/
class Item {
x; y; z;
Rx; Ry; Rz;
S;
vertices;
normals;
indices;
texCoords;
materialColor;
constructor(x, y, z, Rx, Ry, Rz, S) {
this.x = x;
this.y = y;
this.z = z;
this.Rx = Rx;
this.Ry = Ry;
this.Rz = Rz;
this.S = S;
}
buildWorldMatrix() {
return utils.MakeWorld(this.x, this.y, this.z, this.Rx, this.Ry, this.Rz, this.S);
}
setAttr(objectVertices, objectNormals, objectIndices, objectTexCoords) {
this.vertices = objectVertices;
this.normals = objectNormals;
this.indices = objectIndices;
this.texCoords = objectTexCoords;
}
setMaterialColor(materialColorArray) {
this.materialColor = materialColorArray;
}
}
//objects
var rock = new Item(1.0, -0.5, -3.0, 0.0, 0.0, 0.0, 1.0 / 20.0);
var boat = new Item(0.0, -0.15, 0.0, 90.0, 0.0, 0.0, 1.0 / 1000.0);
var rock2 = new Item(-1.0, -0.4, -3, -30.0, 0.0, 0.0, 1.0 / 10.0);
var ocean = new Item(0.0, -0.02, 0.0, 90.0, 0.0, 0.0, 100.0);
function isPowerOf2(value) {
return (value & (value - 1)) == 0;
}
function main() {
utils.resizeCanvasToDisplaySize(gl.canvas);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
setFloorCoord();
/* Load corresponding information from the models */
object[0] = boat;
object[1] = rock;
object[2] = rock2;
object[3] = ocean;
boat.setAttr(boatModel.vertices, boatModel.vertexNormals, boatModel.indices, boatModel.textures);
boat.setMaterialColor([1.0, 1.0, 1.0]); // set material color for boat
rock.setAttr(rockModel.vertices, rockModel.vertexNormals, rockModel.indices, rockModel.textures);
rock.setMaterialColor([1.0, 1.0, 1.0]); // set material color for rock
rock2.setAttr(rock2Model.vertices, rock2Model.vertexNormals, rock2Model.indices, rock2Model.textures);
rock2.setMaterialColor([1.0, 1.0, 1.0]);
ocean.setAttr(oceanModel.vertices, oceanModel.vertexNormals, oceanModel.indices, oceanModel.textures);
ocean.setMaterialColor([1.0, 1.0, 1.0]);
directionalLight = [Math.cos(dirLightAlpha) * Math.cos(dirLightBeta),
Math.sin(dirLightAlpha),
Math.cos(dirLightAlpha) * Math.sin(dirLightBeta)
];
directionalLightColor = [1.0, 1.0, 1.0];
/* Retrieve the position of the attributes and uniforms */
getShadersPos()
objectWorldMatrix = Array();
objectWorldMatrix[0] = boat.buildWorldMatrix(); //boat WorldMatrix
objectWorldMatrix[1] = rock.buildWorldMatrix(); //rock WorlMatrix
objectWorldMatrix[2] = rock2.buildWorldMatrix();
objectWorldMatrix[3] = ocean.buildWorldMatrix();
perspectiveMatrix = utils.MakePerspective(90, gl.canvas.width / gl.canvas.height, 0.1, 100.0);
viewMatrix = utils.MakeView(0.0, 1.0, 1.0, 15.0, 0.0);
setBuffers();
drawScene();
}
async function init() {
var path = window.location.pathname;
var page = path.split("/").pop();
baseDir = window.location.href.replace(page, '');
shaderDir = baseDir + "shaders/";
var canvas = document.getElementById("c");
lastUpdateTime = (new Date).getTime();
gl = canvas.getContext("webgl2");
if (!gl) {
document.write("GL context not opened");
return;
}
await utils.loadFiles([shaderDir + 'vs.glsl', shaderDir + 'fs.glsl'], function (shaderText) {
var vertexShader = utils.createShader(gl, gl.VERTEX_SHADER, shaderText[0]);
var fragmentShader = utils.createShader(gl, gl.FRAGMENT_SHADER, shaderText[1]);
program0 = utils.createProgram(gl, vertexShader, fragmentShader);
});
await utils.loadFiles([shaderDir + 'vs_unlit.glsl', shaderDir + 'fs_unlit.glsl'], function (shaderText) {
var vertexShader = utils.createShader(gl, gl.VERTEX_SHADER, shaderText[0]);
var fragmentShader = utils.createShader(gl, gl.FRAGMENT_SHADER, shaderText[1]);
program1 = utils.createProgram(gl, vertexShader, fragmentShader);
});
//###################################################################################
//This loads the obj model in the boatModel variable
var boatObjStr = await utils.get_objstr(baseDir + modelStr[0]);
boatModel = new OBJ.Mesh(boatObjStr);
//###################################################################################
//###################################################################################
//This loads the obj model in the rockModel variable
var rockObjStr = await utils.get_objstr(baseDir + modelStr[1]);
rockModel = new OBJ.Mesh(rockObjStr);
//###################################################################################
//###################################################################################
//This loads the obj model in the rockModel variable
var rock2ObjStr = await utils.get_objstr(baseDir + modelStr[2]);
rock2Model = new OBJ.Mesh(rock2ObjStr);
//###################################################################################
var oceanObjStr = await utils.get_objstr(baseDir + modelStr[3]);
oceanModel = new OBJ.Mesh(oceanObjStr);
initControls(canvas);
main();
}
function getShadersPos() {
positionAttributeLocation[0] = gl.getAttribLocation(program0, "a_position");
uvAttributeLocation[0] = gl.getAttribLocation(program0, "a_uv");
matrixLocation[0] = gl.getUniformLocation(program0, "matrix");
worldViewMatrixLocation[0] = gl.getUniformLocation(program0, "worldviewmatrix");
worldViewMatrixLocation_transpose[0] = gl.getUniformLocation(program0, "worldviewmatrix_t");
textLocation[0] = gl.getUniformLocation(program0, "u_texture");
normalAttributeLocation[0] = gl.getAttribLocation(program0, "inNormal");
normalMatrixPositionHandle[0] = gl.getUniformLocation(program0, 'nMatrix');
materialDiffColorHandle[0] = gl.getUniformLocation(program0, 'mDiffColor');
lightDirectionHandle[0] = gl.getUniformLocation(program0, 'lightDirection');
lightColorHandle[0] = gl.getUniformLocation(program0, 'lightColor');
ambientLightcolorHandle[0] = gl.getUniformLocation(program0, 'ambientLightcolor');
specularColorHandle[0] = gl.getUniformLocation(program0, 'specularColor');
specShineHandle[0] = gl.getUniformLocation(program0, 'SpecShine');
}
function setBuffers() {
for (let i = 0; i < object.length; i++) {
vaos[i] = gl.createVertexArray();
gl.bindVertexArray(vaos[i])
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(object[i].vertices), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation[0]);
gl.vertexAttribPointer(positionAttributeLocation[0], 3, gl.FLOAT, false, 0, 0);
var uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(object[i].texCoords), gl.STATIC_DRAW);
gl.enableVertexAttribArray(uvAttributeLocation[0]);
gl.vertexAttribPointer(uvAttributeLocation[0], 2, gl.FLOAT, false, 0, 0);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(object[i].indices), gl.STATIC_DRAW);
var normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(object[i].normals), gl.STATIC_DRAW);
gl.enableVertexAttribArray(normalAttributeLocation[0]);
gl.vertexAttribPointer(normalAttributeLocation[0], 3, gl.FLOAT, false, 0, 0);
textures[i] = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textures[i]);
image = new Image();
image.crossOrigin = "anonymous";
image.src = baseDir + modelTexture[i];
image.onload = function (texture, image) {
return function () {
gl.activeTexture(gl.TEXTURE0)
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
// Check if the image is a power of 2 in both dimensions.
if (isPowerOf2(image.width) && isPowerOf2(image.height)) {
// Yes, it's a power of 2. Generate mips.
gl.generateMipmap(gl.TEXTURE_2D);
} else {
// No, it's not a power of 2. Turn off mips and set wrapping to clamp to edge
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
}
};
}(textures[i], image);
}
}
function drawObjects() {
for (let i = 0; i < object.length; ++i) {
gl.useProgram(program0);
var viewWorldMatrix = utils.multiplyMatrices(viewMatrix, objectWorldMatrix[i]);
var projectionMatrix = utils.multiplyMatrices(perspectiveMatrix, viewWorldMatrix);
gl.uniformMatrix4fv(matrixLocation[0], gl.FALSE, utils.transposeMatrix(projectionMatrix));
gl.uniformMatrix4fv(worldViewMatrixLocation_transpose[0], gl.FALSE, utils.transposeMatrix(utils.invertMatrix(utils.transposeMatrix(viewWorldMatrix))));
gl.uniformMatrix4fv(worldViewMatrixLocation[0], gl.FALSE, utils.transposeMatrix(viewWorldMatrix));
gl.uniformMatrix4fv(normalMatrixPositionHandle[0], gl.FALSE, utils.transposeMatrix(utils.invertMatrix(utils.transposeMatrix(objectWorldMatrix[i]))));
gl.uniform3fv(materialDiffColorHandle[0], object[i].materialColor);
gl.uniform3fv(lightColorHandle[0], directionalLightColor);
gl.uniform3fv(lightDirectionHandle[0], directionalLight);
gl.uniform3fv(ambientLightcolorHandle[0], ambientLight);
gl.uniform3fv(specularColorHandle[0], specularColor);
gl.uniform1f(specShineHandle[0], specShine);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, textures[i]);
gl.uniform1i(textLocation[0], textures[i]);
gl.bindVertexArray(vaos[i]);
gl.drawElements(gl.TRIANGLES, object[i].indices.length, gl.UNSIGNED_SHORT, 0);
}
}
var counter = 0;
function animate(item) {
var currentTime = (new Date).getTime();
if (lastUpdateTime != null) {
boatDynamic(currentTime);
var deltaC = (30 * (currentTime - lastUpdateTime)) / 1000.0;
//item.z += deltaC/100;
//item.Rz += deltaC;
}
/* depending on which object we want to animate we change the worldmatrix of the object */
//objectWorldMatrix[0] = utils.MakeWorld(0.0, item.y, item.z, item.Rx, item.Ry, item.Rz, item.S);
counter += 0.005;
//item.z = counter % 2;
//item.y = counter;
//(0, -1, 2, 45, 0)
//item.z -= 0.002;
viewMatrix = utils.MakeView(cx + item.x, cy + 1, 2 + item.z, camElev, 0);
//<---- la barca si muove verso la z negativa
//item.y += 0.002;
objectWorldMatrix[0] = item.buildWorldMatrix();
//objectWorldMatrix[1] = rock.buildWorldMatrix();
//objectWorldMatrix[2] = rock2.buildWorldMatrix();
lastUpdateTime = currentTime;
}
function drawScene() {
animate(boat);
gl.clearColor(0.85, 0.85, 0.85, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST);
// DRAW THE OBJECTS IN THE SCENE
drawObjects();
window.requestAnimationFrame(drawScene);
}
//controls
var keys = [];
var vz = 0.0;
var rvy = 0.0;
var keyFunctionDown = function (e) {
if (!keys[e.keyCode]) {
keys[e.keyCode] = true;
switch (e.keyCode) {
case 37: //LEFT ARROW KEY DOWN
turningDir = - 1;
break;
case 39: //RIGHT ARROW KEY DOWN
turningDir = + 1;
break;
case 38: //UP ARROW KEY DOWN
linearDir = + 1;
break;
case 40: //DOWN ARROW KEY DOWN
linearDir = - 1;
break;
//camera controls
case 87:
camElev += 5;
console.log(camElev)
break;
case 83:
camElev -= 5;
console.log(camElev)
break;
}
}
}
var keyFunctionUp = function (e) {
if (keys[e.keyCode]) {
keys[e.keyCode] = false;
switch (e.keyCode) {
case 37: //LEFT ARROW KEY UP
turningDir = 0;
break;
case 39: //RIGHT ARROW KEY UP
turningDir = 0;
break;
case 38: //UP ARROW KEY UP
linearDir = 0;
break;
case 40: //DOWN ARROW KEY DOWN
linearDir = 0;
break;
}
}
}
function initControls(canvas) {
window.addEventListener("keyup", keyFunctionUp, false);
window.addEventListener("keydown", keyFunctionDown, false);
}
function boatDynamic(currentTime) {
//console.log(linearVel);
//boat turning
angularVel += turningDir * angularAcc;
if (Math.abs(angularVel) >= maxAngularVel)
angularVel = Math.sign(angularVel) * maxAngularVel;
//angular velocity degradation
angularVel = angularVel * (1 - angularDrag);
boat.Rx += angularVel;
//boat speed
linearVel += linearDir * linearAcc;
if (Math.abs(linearVel) >= maxLinearVel)
linearVel = Math.sign(linearVel) * maxLinearVel;
//linear vel degradation
linearVel = linearVel * (1 - linearDrag)
//linear velocity axis decomposition
velX = - linearVel * Math.cos(utils.degToRad(boat.Rx));
velZ = - linearVel * Math.sin(utils.degToRad(boat.Rx));
boat.x += velX;
boat.z += velZ;
//simple boat "wobbling" around its y axis, must be implemented better
if (Math.random() > 0.8) {
boat.Ry += Math.sin(utils.degToRad(currentTime)) / 8;
}
}
function dirLightChange(value, type) {
if (type == 'alpha')
dirLightAlpha = -utils.degToRad(value);
else
dirLightBeta = -utils.degToRad(value);
directionalLight = [Math.cos(dirLightAlpha) * Math.cos(dirLightBeta),
Math.sin(dirLightAlpha),
Math.cos(dirLightAlpha) * Math.sin(dirLightBeta)
];
drawObjects();
}
function onColorChange(value, type) {
let result = HEX2RGB(value);
var r = result[0] / 255.0;
var g = result[1] / 255.0;
var b = result[2] / 255.0;
if (type == 'ambient')
ambientLight = [r, g, b];
else if (type == 'directional')
directionalLightColor = [r, g, b];
else if (type == 'material')
boat.setMaterialColor([r, g, b]);
else
specularColor = [r, g, b];
drawObjects();
}
function onSpecShineChange(value) {
specShine = value;
drawObjects();
}
window.onload = init;
Here the repo with the entire project: repo

method 1 easiest
clear the depth buffer
turn off the depth test
draw a plane with your sky texture
turn on the depth test
draw your objects
method 2 (slightly more efficient)
clear the depth buffer
set depth func to LESS
turn on the depth test
draw your opaque objects
set depth func to LEQUAL
draw a plane with your sky texture at Z = 1
draw your transparent objects
Note: drawing a plane at Z = 1 is easiest with a custom shader that just does that.
Example: https://stackoverflow.com/a/52508687/128511
Many old outdated 3D engines try to use the system that draws everything else. In other words they only implement one thing, a loop that draws all objects with a single projection matrix and view matrix, so they have to compute a model matrix that positions the plane so that it just happens to show up at -Z in the current view and the current projection. That's silly IMO.
Another thing slightly less outdated 3D engines do is let each object the draw use a different projection and view matrix. In that case projections and view matrices for the planes can be set to something like (assuming the plane has vertices at Z = 0
view matrix = identity
projection matrix = [
1, 0, 0, 0
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 1, 1,
];
Will move Z to 1.
You then probably want to set the first 1 (width) and second 1 (height) as shown in this answer (same as above)
If it was me though I'd do what modern engines do and use a different shader like the one in the first link above just for drawing an image.
Note: you might also want to look into skyboxes

Trouble with drawing tree in webgl

Getting more errors again this time, except this time it's on the webgl side instead of the mathy algorithm side.
My previous post was just about drawing a simple 2d recursive tree. The thing I'm trying to do now is to draw a tree at the location of the mouseclick, and with red lines if left click, blue if right. I fixed my previous problem and was able to get the tree to show up in my previous build of the program. However, now a tree doesn't even show up when I click on the canvas. When I console log the array where the points are stored however, all the points seem to be there. I think I'm missing something, but I don't know webgl enough to know what that may be.
I have made a working program that can draw different colored points depending on mouse click, at the mouse position, but I'm still not experienced enough to figure out what I have in that program that is allowing it to work and why this current program isn't able to display anything.
my current program:
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' +
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' +
'}\n';
var m = 0;
function main() {
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var uniform1i = 0;
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// // Get the storage location of a_Position
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
// Get the storage location of u_FragColor
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
// Register function (event handler) to be called on a mouse press
canvas.onmousedown = function (ev) { click(ev, gl, canvas, a_Position, u_FragColor) };
// Specify the color for clearing <canvas>
gl.clearColor(1.0, 1.0, 1.0, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.LINES, 0, 1, m);
}
function click(ev, gl, canvas, a_Position, u_FragColor) {
var x = ev.clientX; // x coordinate of a mouse pointer
var y = ev.clientY; // y coordinate of a mouse pointer
var rect = ev.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);
if (ev.button == 0) {
var depth = 4;
gl.uniform4f(u_FragColor, 1.0, 0, 0, 1.0);// Red
//red tree, 4 steps, length 50, halved each step
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl, x, y);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
m = n;
}
if (ev.button == 2) {
var depth = 6;
//blue tree, 6 steps, length 40, halved each step
gl.uniform4f(u_FragColor, 0, 0, 1.0, 1.0);// Blue
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl, x, y);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
m = n;
}
}
function initVertexBuffers(gl, x, y) {
let start = [];
let points = createPoints(x, y, 0.4, 4, Math.PI / 2, start);
console.log(points);
var vertices = new Float32Array(points);
let n = points.length / 2; // The number of vertices
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return n;
}
//var points = [x, y];
//var angle = 0;
//var prevPoints = [];
//var prevPointIndex = 0;
function createPoints(x, y, length, depth, angle, points) {
if (depth > 0) {
//draws line
let x2 = x + length * Math.cos(angle);
let y2 = y + length * Math.sin(angle);
points.push(x, y, x2, y2);
//draw left branch;
createPoints(x2, y2, length / 2, depth - 1, angle + Math.PI / 4, points);
//goes back
//points.push(x2, y2);
//draw right branch
createPoints(x2, y2, length / 2, depth - 1, angle - Math.PI / 4, points);
//goes back
//points.push(x2, y2);
//console.log(points);
return points;
}
return;
}
my bets are that I'm missing something in the main or click functions, but I'm posting everything because I'm not 100% sure.

The code you posted only calls gl.drawXXX one time in main so it's never going to draw anything ever again.
You have things set up so when the mouse is pressed click will be called but click never calls gl.drawXXX
Further, every time click is called you make a new buffer with a new set of points. That is not the normal way to use WebGL. The normal way is to setup your points once (once per thing you want to draw) and then use matrices to change position, orientation, scale.
I suggest you read some other tutorials on WebGL. This one kind of does what you're doing now but it follows up with how to change position, orientation, and scale, followed by how to do it with matrices for more flexibility. It also covers drawing multiple things
In any case to fix your code as is you need to draw after changing the vertices
// Vertex shader program
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'void main() {\n' +
' gl_Position = a_Position;\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'precision mediump float;\n' +
'uniform vec4 u_FragColor;\n' +
'void main() {\n' +
' gl_FragColor = u_FragColor;\n' +
'}\n';
var m = 0;
function main() {
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var uniform1i = 0;
var gl = canvas.getContext('webgl');
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// // Get the storage location of a_Position
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return;
}
// Get the storage location of u_FragColor
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
if (!u_FragColor) {
console.log('Failed to get the storage location of u_FragColor');
return;
}
// Register function (event handler) to be called on a mouse press
canvas.onmousedown = function (ev) { click(ev, gl, canvas, a_Position, u_FragColor) };
}
function click(ev, gl, canvas, a_Position, u_FragColor) {
var x = ev.clientX; // x coordinate of a mouse pointer
var y = ev.clientY; // y coordinate of a mouse pointer
var rect = ev.target.getBoundingClientRect();
x = ((x - rect.left) - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2);
if (ev.button == 0) {
var depth = 4;
gl.uniform4f(u_FragColor, 1.0, 0, 0, 1.0);// Red
//red tree, 4 steps, length 50, halved each step
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl, x, y);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
m = n;
}
if (ev.button == 2) {
var depth = 6;
//blue tree, 6 steps, length 40, halved each step
gl.uniform4f(u_FragColor, 0, 0, 1.0, 1.0);// Blue
// Write the positions of vertices to a vertex shader
var n = initVertexBuffers(gl, x, y);
if (n < 0) {
console.log('Failed to set the positions of the vertices');
return;
}
m = n;
}
// Specify the color for clearing <canvas>
gl.clearColor(1.0, 1.0, 1.0, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.LINES, 0, m);
}
function initVertexBuffers(gl, x, y) {
let start = [];
let points = createPoints(x, y, 0.4, 4, Math.PI / 2, start);
console.log(points);
var vertices = new Float32Array(points);
let n = points.length / 2; // The number of vertices
// Create a buffer object
var vertexBuffer = gl.createBuffer();
if (!vertexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
// Bind the buffer object to target
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// Write date into the buffer object
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return -1;
}
// Assign the buffer object to a_Position variable
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
// Enable the assignment to a_Position variable
gl.enableVertexAttribArray(a_Position);
return n;
}
//var points = [x, y];
//var angle = 0;
//var prevPoints = [];
//var prevPointIndex = 0;
function createPoints(x, y, length, depth, angle, points) {
if (depth > 0) {
//draws line
let x2 = x + length * Math.cos(angle);
let y2 = y + length * Math.sin(angle);
points.push(x, y, x2, y2);
//draw left branch;
createPoints(x2, y2, length / 2, depth - 1, angle + Math.PI / 4, points);
//goes back
//points.push(x2, y2);
//draw right branch
createPoints(x2, y2, length / 2, depth - 1, angle - Math.PI / 4, points);
//goes back
//points.push(x2, y2);
//console.log(points);
return points;
}
return;
}
main();
//----
function initShaders(gl, vSrc, fSrc) {
const program = twgl.createProgram(gl, [vSrc, fSrc]);
gl.program = program; // THIS IS EXTREMELY BAD AND WRONG CODE!!!
gl.useProgram(program); // THIS IS ALSO WRONG!
return program;
}
canvas { border: 1px solid black; }
<canvas id="webgl"></canvas>
<script src="https://twgljs.org/dist/4.x/twgl.min.js"></script>
There are many issues with the code
gl.program is not a thing. Whatever book or tutorial you're learning from that is a horrible, bad, and wrong thing to do. WebGL programs usually have multiple shader programs so a function like initShaders needs to return the created program so that you can call it multiple times with different vertex shader source and fragment shader source to make multiple programs. It should not hack one created program on to the webgl context where it doesn't belong.
Note: even though I implemented initShaders since you didn't supply it it's clear from your code it was doing gl.program = gl.createProgram. That's nonsense code. It's common to have multiple programs.
calling gl.useProgram in initShaders is also arguably wrong. (It's clear again since it's not called anywhere in your code that your version of initShaders was doing that. Again it makes no sense since in a normal WebGL page you'd have multiple shaders so you'd need to call gl.useProgram multiple times.
The tutorial you're reading looks old as it's concatenating strings for GLSL. The easiest way to make GLSL is to use multi-line template literals
var VSHADER_SOURCE = `
attribute vec4 a_Position;
void main() {
gl_Position = a_Position;
}
`;
so much easier
It's calling some function getWebGLContext. No need for anything like that. Just use canvas.getContext('webgl')
the call to gl.drawArrays has m in the wrong place. The correct way to call gl.drawArrays is gl.drawArrays(primitiveType, offset, vertexCount). Offset is almost ways 0. There is no 4th parameter.
Please consider reading some better tutorials like the ones linked above.

how does these vertices end up in clip coordinate(-1,1)?

Hi guys I been learning webGl these days and reading this textbook on webGl2.
Here is an example out of this book.
'use strict';
// A set of utility functions for /common operations across our application
const utils = {
// Find and return a DOM element given an ID
getCanvas(id) {
const canvas = document.getElementById(id);
if (!canvas) {
console.error(`There is no canvas with id ${id} on this page.`);
return null;
}
return canvas;
},
// Given a canvas element, return the WebGL2 context
getGLContext(canvas) {
return canvas.getContext('webgl2') || console.error('WebGL2 is not available in your browser.');
},
// Given a canvas element, expand it to the size of the window
// and ensure that it automatically resizes as the window changes
autoResizeCanvas(canvas) {
const expandFullScreen = () => {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
};
expandFullScreen();
// Resize screen when the browser has triggered the resize event
window.addEventListener('resize', expandFullScreen);
},
// Given a WebGL context and an id for a shader script,
// return a compiled shader
getShader(gl, id) {
const script = document.getElementById(id);
if (!script) {
return null;
}
const shaderString = script.text.trim();
let shader;
if (script.type === 'x-shader/x-vertex') {
shader = gl.createShader(gl.VERTEX_SHADER);
} else if (script.type === 'x-shader/x-fragment') {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else {
return null;
}
gl.shaderSource(shader, shaderString);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader));
return null;
}
return shader;
},
// Normalize colors from 0-255 to 0-1
normalizeColor(color) {
return color.map(c => c / 255);
},
// De-normalize colors from 0-1 to 0-255
denormalizeColor(color) {
return color.map(c => c * 255);
},
// Returns computed normals for provided vertices.
// Note: Indices have to be completely defined--NO TRIANGLE_STRIP only TRIANGLES.
calculateNormals(vs, ind) {
const
x = 0,
y = 1,
z = 2,
ns = [];
// For each vertex, initialize normal x, normal y, normal z
for (let i = 0; i < vs.length; i += 3) {
ns[i + x] = 0.0;
ns[i + y] = 0.0;
ns[i + z] = 0.0;
}
// We work on triads of vertices to calculate
for (let i = 0; i < ind.length; i += 3) {
// Normals so i = i+3 (i = indices index)
const v1 = [],
v2 = [],
normal = [];
// p2 - p1
v1[x] = vs[3 * ind[i + 2] + x] - vs[3 * ind[i + 1] + x];
v1[y] = vs[3 * ind[i + 2] + y] - vs[3 * ind[i + 1] + y];
v1[z] = vs[3 * ind[i + 2] + z] - vs[3 * ind[i + 1] + z];
// p0 - p1
v2[x] = vs[3 * ind[i] + x] - vs[3 * ind[i + 1] + x];
v2[y] = vs[3 * ind[i] + y] - vs[3 * ind[i + 1] + y];
v2[z] = vs[3 * ind[i] + z] - vs[3 * ind[i + 1] + z];
// Cross product by Sarrus Rule
normal[x] = v1[y] * v2[z] - v1[z] * v2[y];
normal[y] = v1[z] * v2[x] - v1[x] * v2[z];
normal[z] = v1[x] * v2[y] - v1[y] * v2[x];
// Update the normals of that triangle: sum of vectors
for (let j = 0; j < 3; j++) {
ns[3 * ind[i + j] + x] = ns[3 * ind[i + j] + x] + normal[x];
ns[3 * ind[i + j] + y] = ns[3 * ind[i + j] + y] + normal[y];
ns[3 * ind[i + j] + z] = ns[3 * ind[i + j] + z] + normal[z];
}
}
// Normalize the result.
// The increment here is because each vertex occurs.
for (let i = 0; i < vs.length; i += 3) {
// With an offset of 3 in the array (due to x, y, z contiguous values)
const nn = [];
nn[x] = ns[i + x];
nn[y] = ns[i + y];
nn[z] = ns[i + z];
let len = Math.sqrt((nn[x] * nn[x]) + (nn[y] * nn[y]) + (nn[z] * nn[z]));
if (len === 0) len = 1.0;
nn[x] = nn[x] / len;
nn[y] = nn[y] / len;
nn[z] = nn[z] / len;
ns[i + x] = nn[x];
ns[i + y] = nn[y];
ns[i + z] = nn[z];
}
return ns;
},
// A simpler API on top of the dat.GUI API, specifically
// designed for this book for a simpler codebase
configureControls(settings, options = {
width: 300
}) {
// Check if a gui instance is passed in or create one by default
const gui = options.gui || new dat.GUI(options);
const state = {};
const isAction = v => typeof v === 'function';
const isFolder = v =>
!isAction(v) &&
typeof v === 'object' &&
(v.value === null || v.value === undefined);
const isColor = v =>
(typeof v === 'string' && ~v.indexOf('#')) ||
(Array.isArray(v) && v.length >= 3);
Object.keys(settings).forEach(key => {
const settingValue = settings[key];
if (isAction(settingValue)) {
state[key] = settingValue;
return gui.add(state, key);
}
if (isFolder(settingValue)) {
// If it's a folder, recursively call with folder as root settings element
return utils.configureControls(settingValue, {
gui: gui.addFolder(key)
});
}
const {
value,
min,
max,
step,
options,
onChange = () => null,
} = settingValue;
// set state
state[key] = value;
let controller;
// There are many other values we can set on top of the dat.GUI
// API, but we'll only need a few for our purposes
if (options) {
controller = gui.add(state, key, options);
} else if (isColor(value)) {
controller = gui.addColor(state, key)
} else {
controller = gui.add(state, key, min, max, step)
}
controller.onChange(v => onChange(v, state))
});
},
// Calculate tangets for a given set of vertices
calculateTangents(vs, tc, ind) {
const tangents = [];
for (let i = 0; i < vs.length / 3; i++) {
tangents[i] = [0, 0, 0];
}
let
a = [0, 0, 0],
b = [0, 0, 0],
triTangent = [0, 0, 0];
for (let i = 0; i < ind.length; i += 3) {
const i0 = ind[i];
const i1 = ind[i + 1];
const i2 = ind[i + 2];
const pos0 = [vs[i0 * 3], vs[i0 * 3 + 1], vs[i0 * 3 + 2]];
const pos1 = [vs[i1 * 3], vs[i1 * 3 + 1], vs[i1 * 3 + 2]];
const pos2 = [vs[i2 * 3], vs[i2 * 3 + 1], vs[i2 * 3 + 2]];
const tex0 = [tc[i0 * 2], tc[i0 * 2 + 1]];
const tex1 = [tc[i1 * 2], tc[i1 * 2 + 1]];
const tex2 = [tc[i2 * 2], tc[i2 * 2 + 1]];
vec3.subtract(a, pos1, pos0);
vec3.subtract(b, pos2, pos0);
const c2c1b = tex1[1] - tex0[1];
const c3c1b = tex2[0] - tex0[1];
triTangent = [c3c1b * a[0] - c2c1b * b[0], c3c1b * a[1] - c2c1b * b[1], c3c1b * a[2] - c2c1b * b[2]];
vec3.add(triTangent, tangents[i0], triTangent);
vec3.add(triTangent, tangents[i1], triTangent);
vec3.add(triTangent, tangents[i2], triTangent);
}
// Normalize tangents
const ts = [];
tangents.forEach(tan => {
vec3.normalize(tan, tan);
ts.push(tan[0]);
ts.push(tan[1]);
ts.push(tan[2]);
});
return ts;
}
};
'use strict';
let
gl,
program,
vao,
indices,
indicesBuffer,
modelViewMatrix = mat4.create(),
projectionMatrix = mat4.create(),
normalMatrix = mat4.create();
function initProgram() {
// Configure `canvas`
const canvas = utils.getCanvas('webgl-canvas');
utils.autoResizeCanvas(canvas);
// Configure `gl`
gl = utils.getGLContext(canvas);
gl.clearColor(0.9, 0.9, 0.9, 1);
gl.clearDepth(100);
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
// Shader source
const vertexShader = utils.getShader(gl, 'vertex-shader');
const fragmentShader = utils.getShader(gl, 'fragment-shader');
// Configure `program`
program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Could not initialize shaders');
}
gl.useProgram(program);
// Set locations onto `program` instance
program.aVertexPosition = gl.getAttribLocation(program, 'aVertexPosition');
program.aVertexNormal = gl.getAttribLocation(program, 'aVertexNormal');
program.uProjectionMatrix = gl.getUniformLocation(program, 'uProjectionMatrix');
program.uModelViewMatrix = gl.getUniformLocation(program, 'uModelViewMatrix');
program.uNormalMatrix = gl.getUniformLocation(program, 'uNormalMatrix');
program.uLightDirection = gl.getUniformLocation(program, 'uLightDirection');
program.uLightAmbient = gl.getUniformLocation(program, 'uLightAmbient');
program.uLightDiffuse = gl.getUniformLocation(program, 'uLightDiffuse');
program.uMaterialDiffuse = gl.getUniformLocation(program, 'uMaterialDiffuse');
}
// Configure lights
function initLights() {
gl.uniform3fv(program.uLightDirection, [0, 0, -1]);
gl.uniform4fv(program.uLightAmbient, [0.01, 0.01, 0.01, 1]);
gl.uniform4fv(program.uLightDiffuse, [0.5, 0.5, 0.5, 1]);
gl.uniform4f(program.uMaterialDiffuse, 0.1, 0.5, 0.8, 1);
}
/**
* This function generates the example data and create the buffers
*
* 4 5 6 7
* +----------+-------------+---------+
* | | | |
* | | | |
* | | | |
* | | | |
* | | | |
* +----------+-------------+---------+
* 0 1 2 3
*
*/
function initBuffers() {
const vertices = [-20, -8, 20, // 0
-10, -8, 0, // 1
10, -8, 0, // 2
20, -8, 20, // 3
-20, 8, 20, // 4
-10, 8, 0, // 5
10, 8, 0, // 6
20, 8, 20 // 7
];
indices = [
0, 5, 4,
1, 5, 0,
1, 6, 5,
2, 6, 1,
2, 7, 6,
3, 7, 2
];
// Create VAO
vao = gl.createVertexArray();
// Bind Vao
gl.bindVertexArray(vao);
const normals = utils.calculateNormals(vertices, indices);
const verticesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//console.log('vertices', vertices);
// Configure instructions
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, 3, gl.FLOAT, false, 0, 0);
const normalsBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalsBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
// Configure instructions
gl.enableVertexAttribArray(program.aVertexNormal);
gl.vertexAttribPointer(program.aVertexNormal, 3, gl.FLOAT, false, 0, 0);
indicesBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
// Clean
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
}
function draw() {
const {
width,
height
} = gl.canvas;
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(projectionMatrix, 45, width / height, 0.1, 10000);
mat4.identity(modelViewMatrix);
mat4.translate(modelViewMatrix, modelViewMatrix, [0, 0, -40]);
mat4.copy(normalMatrix, modelViewMatrix);
mat4.invert(normalMatrix, normalMatrix);
mat4.transpose(normalMatrix, normalMatrix);
gl.uniformMatrix4fv(program.uModelViewMatrix, false, modelViewMatrix);
gl.uniformMatrix4fv(program.uProjectionMatrix, false, projectionMatrix);
gl.uniformMatrix4fv(program.uNormalMatrix, false, normalMatrix);
// We will start using the `try/catch` to capture any errors from our `draw` calls
try {
// Bind
gl.bindVertexArray(vao);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indicesBuffer);
// Draw
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
// Clean
gl.bindVertexArray(null);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
}
// We catch the `error` and simply output to the screen for testing/debugging purposes
catch (error) {
console.error(error);
}
}
function render() {
requestAnimationFrame(render);
draw();
}
function init() {
initProgram();
initBuffers();
initLights();
render();
}
init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix.js"></script>
<!-- modules -->
<!-- vertex Shader -->
<script id="vertex-shader" type="x-shader/x-vertex">
#version 300 es
precision mediump float;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
uniform mat4 uNormalMatrix;
uniform vec3 uLightDirection;
uniform vec4 uLightAmbient;
uniform vec4 uLightDiffuse;
uniform vec4 uMaterialDiffuse;
in vec3 aVertexPosition;
in vec3 aVertexNormal;
out vec4 vVertexColor;
void main(void) {
vec3 N = vec3(uNormalMatrix * vec4(aVertexNormal, 1.0));
vec3 L = normalize(uLightDirection);
float lambertTerm = dot(N, -L);
// Ambient
vec4 Ia = uLightAmbient;
// Diffuse
vec4 Id = uMaterialDiffuse * uLightDiffuse * lambertTerm;
// Set varying to be used inside of fragment shader
vVertexColor = vec4(vec3(Ia + Id), 1.0);
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<!-- fragment Shader -->
<script id="fragment-shader" type="x-shader/x-fragment">
#version 300 es
precision mediump float;
in vec4 vVertexColor;
out vec4 fragColor;
void main(void) {
fragColor = vVertexColor;
}
</script>
<canvas id="webgl-canvas"></canvas>
here the vertices are defined as
const vertices = [
-20, -8, 20, // 0
-10, -8, 0, // 1
10, -8, 0, // 2
20, -8, 20, // 3
-20, 8, 20, // 4
-10, 8, 0, // 5
10, 8, 0, // 6
20, 8, 20 // 7
];
As I've learned that webGl use clipspace coordinates, which goes from -1 to +1. However here these vertices are out of this range.
Could someone please point me to the code where it transforms these vertices to clipspace coordinates? I've been looking at the code for a while but cannot seem to find it myself.

Please consider reading these lessons on WebGL. Here are some that explain clipspace and here is one that explains how to use matrices to convert from some space to clipspace using matrix math and here is one that explains how convert from 3D space to clipspace with matrix math and one that explains how to get perspective with matrix math and this one that explains how cameras work with a view matrix
In answer to your question this line in the vertex shader
gl_Position = uProjectionMatrix * uModelViewMatrix * vec4(aVertexPosition, 1.0);
converts from those vertices into clip space by choosing the correct matrices to assign uProjectionMatrix and uModelViewMatrix. uModelViewMatrix positions, scales, and orients the model in view space. uProjectionMatrix then converts from view space to clip space with a perspective projection.

unable to stop at breakpoints

The debugger statement (billed as surefire way to stop) gives me an "ERROR undeclared identifier" in chrome. Source code is JavaScript WebGL
I have even tried to set breakpoints in pages that run correctly. I have enabled WebGL Inspector extension and checked the "Allow access to file URLs" box
I'm sorry to bother anyone because I am missing something obvious and basic.
Julia mine
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 vPos;
void main(void) {
gl_Position = vec4(vPos, 1.);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
uniform vec2 c;
uniform vec2 scale;
void main(void) {
float x1 = 2.0;
float y1 = -2.0;
float R = (gl_FragCoord.x - scale.x) / scale.y;
float I = (gl_FragCoord.y - scale.x) / scale.y;
// float R2 = R*R, I2 = I*I;
float R2 = R;
debugger;
float I2 = I;
int mm;
for (int m = 0; m < 255; m++) {
debugger;
x1 = 2.0 + exp(R2) / 2.0 * cos(I2);
y1 = -2.0 + exp(R2) * sin(I2);
if (x1 >= 0.0000001) break;
R2 = x1;
I2 = y1;
} //end for m
if (mm == 254) gl_FragColor = vec4(0., 0., 0., 1.);
else {
float a = float(mm);
a = mod(a, 15.) / 5.;
gl_FragColor = vec4(max(0., abs(a - 1.5) - .5),
max(0., 1. - abs(a - 0.8)), max(0., 1. - abs(a - 2.)), 0.94);
} //end else
}
</script>
<script type="text/javascript">
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) str += k.textContent;
k = k.nextSibling;
}
var shader;
if (shaderScript.type == "x-shader/x-fragment")
shader = gl.createShader(gl.FRAGMENT_SHADER);
else if (shaderScript.type == "x-shader/x-vertex")
shader = gl.createShader(gl.VERTEX_SHADER);
else return null;
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) == 0)
alert(gl.getShaderInfoLog(shader));
return shader;
}
var gl, canvas;
var cLoc, size, frames = 0,
timer_fr, time,
n = 8,
k, To = 30,
T, Tp, animation = true;
var orb = [
[.248, 0, .15],
[.27, 0, .2],
[.33, .033, .1],
[.42, .228, .1],
[.27, .564, .1],
[-.162, .78, .1],
[-.534, .612, .1],
[-.726, .3, .1],
[-.75, .0, .05],
[.248, 0, .15]
];
function webGLStart() {
canvas = document.getElementById("canned");
size = Math.min(window.innerWidth, window.innerHeight) - 35;
canvas.width = size;
canvas.height = size;
if (!window.WebGLRenderingContext) {
alert("Your browser does not support WebGL. See http://get.webgl.org");
return;
}
try {
gl = canvas.getContext("experimental-webgl");
} catch (e) {}
if (!gl) {
alert("Can't get WebGL");
return;
}
gl.viewport(0, 0, size, size);
var prog = gl.createProgram();
gl.attachShader(prog, getShader(gl, "shader-vs"));
gl.attachShader(prog, getShader(gl, "shader-fs"));
gl.linkProgram(prog);
gl.useProgram(prog);
var posAtrLoc = gl.getAttribLocation(prog, "vPos");
gl.enableVertexAttribArray(posAtrLoc);
var posBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
var vertices = new Float32Array([-1, -1, 0, 1, -1, 0, -1, 1, 0, 1, 1, 0]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(posAtrLoc, 3, gl.FLOAT, false, 0, 0);
cLoc = gl.getUniformLocation(prog, "c");
gl.uniform2f(gl.getUniformLocation(prog, "scale"), size / 2, size / 3);
time = new Date().getTime();
k = 0;
Tp = -1;
T = time / 1000 + orb[k][2] * To;
timer_fr = setInterval(fr, 500);
anim();
canvas.resize = function () {
var size = Math.min(window.innerWidth, window.innerHeight) - 35;
canvas.width = size;
canvas.height = size;
gl.uniform2f(gl.getUniformLocation(prog, "scale"), size / 2, size / 3);
gl.viewport(0, 0, size, size);
draw();
}
}
function anim() {
var tim = new Date().getTime() / 1000;
var a = (T - tim) / (To * orb[k][2]);
gl.uniform2f(cLoc, orb[k][0] * a + orb[k + 1][0] * (1 - a),
orb[k][1] * a + orb[k + 1][1] * (1 - a));
draw();
if (tim > T) {
k++;
if (k > n) k = 0;
T += orb[k][2] * To;
}
frames++;
if (animation) requestAnimationFrame(anim);
}
function draw() {
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function setT(v) {
To = v.valueOf();
}
function run(v) {
if (animation) {
animation = false;
Tp = new Date().getTime() / 1000;
document.getElementById('runBtn').value = "Run ";
} else {
animation = true;
if (Tp > 0) {
T += new Date().getTime() / 1000 - Tp;
Tp = -1;
}
anim();
document.getElementById('runBtn').value = "Stop";
}
}
function fr() {
var ti = new Date().getTime();
var fps = Math.round(1000 * frames / (ti - time));
document.getElementById("framerate").value = fps;
frames = 0;
time = ti;
}
</script>
<br>T
<input size="2" value="30" onchange="setT( this.value )">sec
<input type="button" onclick="run()" value="Stop" size="1" id="runBtn">fps
<input size="2" id="framerate">
<br>Julia sets animation (canvas is matched to the browser window and you can change period of animation <i>T</i>). Simplified remake of the Java based
Julia Orbit trip.
<i>C</i> is moved near the main cardioid of the Mandelbrot set.
<hr>WebGL Demos
<i>updated</i> 18 August 2010

You cant use the "debugger" statement in glsl shader code.
The "debugger" statement is an extension by the developer tools and is only valid in javascript.

Develop Reference

JavaScript is the programming language of the Web.

Slice missing from WebGL triangle fan - javascript

Related

Fail to apply colors to object in WEBGL

WebGL canvas background

Trouble with drawing tree in webgl

how does these vertices end up in clip coordinate(-1,1)?

unable to stop at breakpoints

Categories

Resources