I am not sure what is the problem in this code, but when I try to draw lines of a cube which are far side (last 4 lines) from the camera view than the object disappear. However, I do able to draw 8 edge lines of the cube.
Lines (points) for the Cubes are as follows. Only first 8 lines (16 points) showed, but rest 4 lines (8 points) I couldn't add to the cube.
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0) //8
/*
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0) //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
*/
Much appreciate any help.
Here is the Code:
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
gl_Position = projectionMatrix*modelViewMatrix*vPosition;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
var canvas;
var gl;
var NumVertices = 24;
var vertices = [
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0) //8
/*
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0) //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
*/
];
var vertexColors = [
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
/*
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
*/
];
var near = 0.3;
var far = 10.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI/180.0;
var fovy = 90.0; // Field-of-view in Y direction angle (in degrees)
var aspect; // Viewport aspect ratio
var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);
var program;
var program_originline;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var l_vBuffer;
var l_vPosition;
var l_cBuffer;
var l_vColor;
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
aspect = canvas.width/canvas.height;
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
// Load shaders and initialize attribute buffers
program_originline = initShaders( gl, "vertex-shader", "fragment-shader" );
program = initShaders( gl, "vertex-shader", "fragment-shader" );
//CUBE Buffers
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
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);
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
//Static Line
var l_vertices = [
vec4(0.0, 0.0, 0.0, 1.0),
vec4(5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 5.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(-5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, -5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, -5.0, 1.0),
];
// Load the data into the GPU
l_vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );
var l_colors = [
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
];
l_cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );
l_vColor = gl.getAttribLocation( program_originline, "vColor" );
// buttons for viewing parameters
document.getElementById("Button1").onclick = function(){near *= 1.1; far *= 1.1;};
document.getElementById("Button2").onclick = function(){near *= 0.9; far *= 0.9;};
document.getElementById("Button3").onclick = function(){radius *= 2.0;};
document.getElementById("Button4").onclick = function(){radius *= 0.5;};
document.getElementById("Button5").onclick = function(){theta += dr;};
document.getElementById("Button6").onclick = function(){theta -= dr;};
document.getElementById("Button7").onclick = function(){phi += dr;};
document.getElementById("Button8").onclick = function(){phi -= dr;};
render();
}
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//LINE PROGRAM
gl.useProgram( program_originline );
gl.enableVertexAttribArray( l_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( l_vColor );
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 12);
modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
//CUBE PROGRAM
gl.useProgram( program );
gl.enableVertexAttribArray( vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor);
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 18 );
modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
requestAnimFrame(render);
}
You have to update the drawArrays's last parameter from 18 to 24 (since there are 12 lines per cube and 2 vertices per line).
gl.drawArrays( gl.LINES, 0, 24 );
And of course remember to uncomment the lines in the vertices and vertexColors arrays (and make sure the arrays don't have any missing or extra commas in them).
Here is your code after I made all the necessary fixes:
var canvas;
var gl;
var NumVertices = 24;
var vertices = [
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(-0.5, -0.5, 1.5, 1.0),//1
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(-0.5, 0.5, 1.5, 1.0),//2
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4(0.5, 0.5, 1.5, 1.0),//3
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, -0.5, 1.5, 1.0),//4
vec4( 0.5, -0.5, 0.5, 1.0), //8
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(-0.5, -0.5, 0.5, 1.0),//5
vec4( 0.5, -0.5, 0.5, 1.0), //8
vec4(-0.5, 0.5, 0.5, 1.0),//6
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4(0.5, 0.5, 0.5, 1.0),//7
vec4( 0.5, -0.5, 0.5, 1.0) //8
];
var vertexColors = [
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
vec4( 1.0, 0.0, 0.0, 1.0 ), // red
];
var near = 0.3;
var far = 10.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI/180.0;
var fovy = 90.0; // Field-of-view in Y direction angle (in degrees)
var aspect; // Viewport aspect ratio
var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);
var program;
var program_originline;
var cBuffer;
var vColor;
var vBuffer;
var vPosition;
var l_vBuffer;
var l_vPosition;
var l_cBuffer;
var l_vColor;
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
aspect = canvas.width/canvas.height;
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
// Load shaders and initialize attribute buffers
program_originline = initShaders( gl, "vertex-shader", "fragment-shader" );
program = initShaders( gl, "vertex-shader", "fragment-shader" );
//CUBE Buffers
cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(colorsArray), gl.STATIC_DRAW );
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);
vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
//gl.bufferData( gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW );
gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW );
vPosition = gl.getAttribLocation( program, "vPosition" );
//Static Line
var l_vertices = [
vec4(0.0, 0.0, 0.0, 1.0),
vec4(5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 5.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(-5.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, -5.0, 0.0, 1.0),
vec4(0.0, 0.0, 0.0, 1.0),
vec4(0.0, 0.0, -5.0, 1.0),
];
// Load the data into the GPU
l_vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_vertices), gl.STATIC_DRAW );
// Associate out shader variables with our data buffer
l_vPosition = gl.getAttribLocation( program_originline, "vPosition" );
var l_colors = [
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(1.0, 1.0, 0.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
vec4(0.0, 0.0, 1.0, 1.0),
];
l_cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(l_colors), gl.STATIC_DRAW );
l_vColor = gl.getAttribLocation( program_originline, "vColor" );
// buttons for viewing parameters
document.getElementById("Button1").onclick = function(){near *= 1.1; far *= 1.1;};
document.getElementById("Button2").onclick = function(){near *= 0.9; far *= 0.9;};
document.getElementById("Button3").onclick = function(){radius *= 2.0;};
document.getElementById("Button4").onclick = function(){radius *= 0.5;};
document.getElementById("Button5").onclick = function(){theta += dr;};
document.getElementById("Button6").onclick = function(){theta -= dr;};
document.getElementById("Button7").onclick = function(){phi += dr;};
document.getElementById("Button8").onclick = function(){phi -= dr;};
render();
}
var render = function(){
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//LINE PROGRAM
gl.useProgram( program_originline );
gl.enableVertexAttribArray( l_vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, l_vBuffer );
gl.vertexAttribPointer( l_vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( l_vColor );
gl.bindBuffer( gl.ARRAY_BUFFER, l_cBuffer );
gl.vertexAttribPointer( l_vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 12);
modelViewMatrixLoc = gl.getUniformLocation( program_originline, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program_originline, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
//CUBE PROGRAM
gl.useProgram( program );
gl.enableVertexAttribArray( vPosition );
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor);
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.drawArrays( gl.LINES, 0, 24 );
modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv( modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv( projectionMatrixLoc, false, flatten(projectionMatrix) );
requestAnimFrame(render);
}
<html>
<head>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/webgl-utils.js"></script>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
<script type="text/javascript" src="http://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
varying vec4 fColor;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
void main()
{
gl_Position = projectionMatrix*modelViewMatrix*vPosition;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
</head>
<body>
<div>
<canvas id="gl-canvas" width="300" height="300"></canvas>
</div>
<div>
<button id="Button1" type="button">1</button>
<button id="Button2" type="button">2</button>
<button id="Button3" type="button">3</button>
<button id="Button4" type="button">4</button>
<button id="Button5" type="button">5</button>
<button id="Button6" type="button">6</button>
<button id="Button7" type="button">7</button>
<button id="Button8" type="button">8</button>
</div>
</body>
</html>
Related
I have to write a program in which i should be able to click a button "add cube" and there will be added as many cubes as I want into the scene. I must be able to select any of them and move around. I managed to create one (hardcoded) cube and apply scaling and translation to it.
I tried to create a class "cube" and invoke intitialization and render as part of an object but didnt work as expected. Here is the working example for one cube and its transformations (note only the scaling and translation work)
HTML:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Lab 0</title>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColors;
varying vec4 fragColor;
uniform vec3 theta;
uniform float coeff;
uniform vec3 trCoeff;
uniform mat4 modelView;
uniform mat4 projection;
vec3 angles = radians( theta );
void main() {
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 );
mat4 sc = mat4(
coeff, 0, 0, 0,
0, coeff, 0, 0,
0, 0, coeff, 0,
0, 0, 0, 1
);
mat4 tr = mat4(
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
trCoeff.x, trCoeff.y, trCoeff.z, 1
);
fragColor = vColors;
//projection * modelView *
gl_Position = tr * rz * ry * rx * sc * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fragColor;
void main() {
gl_FragColor = vec4(fragColor);
}
</script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="MV.js"></script>
<script type="text/javascript" src="shape0.js"></script>
</head>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
<p> </p>
<button id="xButton">Rotate X</button>
<button id="yButton">Rotate Y</button>
<button id="zButton">Rotate Z</button>
<button id="stopButton">Stop Fucking Rotation</button>
<p> </p>
<button id="sUpButton">Scale Up</button>
<button id="sDownButton">Scale Down</button>
<p> </p>
<button id="leftButton">Left</button>
<button id="rightButton">Right</button>
<button id="upButton">Up</button>
<button id="downButton">Down</button>
<button id="closeButton">Closer</button>
<button id="furtherButton">Further</button>
<p> </p>
<button id="Button1">Increase Z</button>
<button id="Button2">Decrease Z</button>
<button id="Button3">Increase R</button>
<button id="Button4">Decrease R</button>
<p> </p>
<button id="Button5">Increase theta</button>
<button id="Button6">Decrease theta</button>
<button id="Button7">Increase phi</button>
<button id="Button8">Decrease phi</button>
<p> </p>
</html>
JS:
"use strict"
var canvas;
var gl;
var thetaRot = [10, 10, 10];
var thetaLoc;
var coeff = 1;
var coeffLoc;
var trCoeff = [0, 0, 0];
var trCoeffLoc;
var flag = true;
var axis = 0;
var xAxis = 0;
var yAxis = 1;
var zAxis = 2;
var near = 0.3;
var far = 3.0;
var radius = 4.0;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI / 180.0;
var fovy = 45.0; // Field-of-view in Y direction angle (in degrees)
var aspect; // Viewport aspect ratio
var mvMatrix, pMatrix;
var modelView, projection;
var eye;
const at = vec3(0.0, 0.0, 0.0);
const up = vec3(0.0, 1.0, 0.0);
var coord = {
// For cube
'1': vec3(0.1, 0.1, 0.1),
'2': vec3(0.5, 0.1, 0.1),
'3': vec3(0.5, 0.1, 0.5),
'4': vec3(0.1, 0.1, 0.5),
'5': vec3(0.1, 0.5, 0.1),
'6': vec3(0.1, 0.5, 0.5),
'7': vec3(0.5, 0.5, 0.5),
'8': vec3(0.5, 0.5, 0.1),
}
var vertices = [
// For cube
coord[4], coord[3], coord[2],
coord[2], coord[4], coord[1],
coord[1], coord[2], coord[5],
coord[5], coord[8], coord[2],
coord[2], coord[3], coord[8],
coord[8], coord[3], coord[7],
coord[7], coord[3], coord[4],
coord[4], coord[7], coord[6],
coord[6], coord[4], coord[1],
coord[1], coord[5], coord[6],
coord[6], coord[7], coord[8],
coord[8], coord[6], coord[5],
]
var colors = [
// each face of the cube
0, 0, 1, 1.0,
0, 0, 1, 1.0,
0, 0, 1, 1.0,
0, 0, 1, 1.0,
0, 0, 1, 1.0,
0, 0, 1, 1.0,
0, 1, 0, 1.0,
0, 1, 0, 1.0,
0, 1, 0, 1.0,
0, 1, 0, 1.0,
0, 1, 0, 1.0,
0, 1, 0, 1.0,
0, 0.7, 1, 1.0,
0, 0.7, 1, 1.0,
0, 0.7, 1, 1.0,
0, 0.7, 1, 1.0,
0, 0.7, 1, 1.0,
0, 0.7, 1, 1.0,
0.5, 0, 1, 1.0,
0.5, 0, 1, 1.0,
0.5, 0, 1, 1.0,
0.5, 0, 1, 1.0,
0.5, 0, 1, 1.0,
0.5, 0, 1, 1.0,
1, 0, 0, 1.0,
1, 0, 0, 1.0,
1, 0, 0, 1.0,
1, 0, 0, 1.0,
1, 0, 0, 1.0,
1, 0, 0, 1.0,
0.2, 0, 1, 1.0,
0.2, 0, 1, 1.0,
0.2, 0, 1, 1.0,
0.2, 0, 1, 1.0,
0.2, 0, 1, 1.0,
0.2, 0, 1, 1.0,
]
// add vertices for cone
window.onload = init;
function init() {
canvas = document.getElementById("gl-canvas");
gl = WebGLUtils.setupWebGL(canvas);
if (!gl) { alert("WebGL isn't available"); }
aspect = canvas.width / canvas.height;
var program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
gl.enable(gl.DEPTH_TEST);
var bufferId = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
gl.bufferData(gl.ARRAY_BUFFER, 50000, gl.STATIC_DRAW);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, flatten(vertices));
var vPosition = gl.getAttribLocation(program, "vPosition");
gl.vertexAttribPointer(vPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
var bufferColor = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, bufferColor);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
var vColors = gl.getAttribLocation(program, "vColors");
gl.vertexAttribPointer(vColors, 4, gl.FLOAT, false, 4 * Float32Array.BYTES_PER_ELEMENT, 0);
gl.enableVertexAttribArray(vColors);
thetaLoc = gl.getUniformLocation(program, "theta");
document.getElementById("xButton").onclick = function () {
flag = false
axis = xAxis;
};
document.getElementById("yButton").onclick = function () {
flag = false
axis = yAxis;
};
document.getElementById("zButton").onclick = function () {
flag = false
axis = zAxis;
};
document.getElementById("stopButton").onclick = function () {
flag = true;
};
document.getElementById("sUpButton").onclick = function () {
coeff += 0.1;
};
document.getElementById("sDownButton").onclick = function () {
coeff -= 0.1;
};
document.getElementById("leftButton").onclick = function () {
trCoeff[0] -= 0.1;
};
document.getElementById("rightButton").onclick = function () {
trCoeff[0] += 0.1;
};
document.getElementById("upButton").onclick = function () {
trCoeff[1] += 0.1;
};
document.getElementById("downButton").onclick = function () {
trCoeff[1] -= 0.1;
};
document.getElementById("closeButton").onclick = function () {
trCoeff[2] += 0.1;
};
document.getElementById("furtherButton").onclick = function () {
trCoeff[2] -= 0.1;
};
modelView = gl.getUniformLocation(program, "modelView");
projection = gl.getUniformLocation(program, "projection");
document.getElementById("Button1").onclick = function () { near *= 1.1; far *= 1.1; };
document.getElementById("Button2").onclick = function () { near *= 0.9; far *= 0.9; };
document.getElementById("Button3").onclick = function () { radius *= 2.0; };
document.getElementById("Button4").onclick = function () { radius *= 0.5; };
document.getElementById("Button5").onclick = function () { theta += dr; };
document.getElementById("Button6").onclick = function () { theta -= dr; };
document.getElementById("Button7").onclick = function () { phi += dr; };
document.getElementById("Button8").onclick = function () { phi -= dr; };
coeffLoc = gl.getUniformLocation(program, "coeff");
trCoeffLoc = gl.getUniformLocation(program, "trCoeff");
render();
}
function render() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
if (!flag) {
thetaRot[axis] += 2.0;
}
gl.uniform3fv(thetaLoc, thetaRot);
gl.uniform1f(coeffLoc, coeff);
gl.uniform3fv(trCoeffLoc, trCoeff);
eye = vec3(radius * Math.sin(theta) * Math.cos(phi),
radius * Math.sin(theta) * Math.sin(phi), radius * Math.cos(theta));
mvMatrix = lookAt(eye, at, up);
pMatrix = perspective(fovy, aspect, near, far);
gl.uniformMatrix4fv(modelView, false, flatten(mvMatrix));
gl.uniformMatrix4fv(projection, false, flatten(pMatrix));
gl.drawArrays(gl.TRIANGLES, 0, vertices.length);
requestAnimFrame(render);
}
I expect managing to add an infinite amount of object (or until I run out of ram) to the scene and to apply transformations to one at a time.
WebGL just draws pixels. It doesn't have a concept of a "Scene" and "objects". All of that is 100% up to you. How you represent objects and how you represent the scene is completely up to you. One example
const scene = [];
function addNewObjectToScene() {
const obj = {
x: Math.random() * 400,
y: Math.random() * 400,
};
scene.push(obj);
}
Now add a button or a timer or whatever you want to call addNewObjectToScene
In your own code you'd have a render or drawScene function that goes over your "scene" and draws each object
function render() {
for (const object of scene) {
gl.useProgram(whateverShaderProgramCurrentObjectNeeds);
// setBuffersAndAttributes for object
// for each attribute in object
// gl.bindBuffer(gl.ARRAY_BUFFER, bufferForThisAttribute)
// gl.enableVertexAttribArray(locationForThisAttrubute);
// gl.vertexAttribPointer(locationForThisAttibute, other settings for this attribute)
// set any uniforms. This is probably where you'd use x and y from the code above
// example:
// gl.uniform2f(offsetUniformLocation, object.x, object.y);
// now draw
// gl.drawArrays or gl.drawElements with how ever many vertices are in the current object.
}
}
How you organize your "scene" and what's in your objects is entire up to you. Three.js makes a scene from an object called THREE.Object3D each of which contains array of "children". This forms a scene graph.
Other apps do different things.
Being able to select one is also way too big a topic. What does "select" mean. Can you have an HTML <select> form where you pick from a dropdown list which object you want to select? Maybe there is an <input type="text"> element where you type the name of the object you want to select?
If you want to click on objects, well now you've got a way too broad of a topic to cover. You could store collision data for each object. You could compute the position of each triangle your data makes and see if the mouse hit. You could use GPU picking where you draw the scene with each object in a different color using different shaders and then look at the pixel under the mouse to see what color it is effectively telling you want object was chosen. But all of this is dependent on how you created your scene.
Suggest you read some tutorials on WebGL and on drawing multiple things and maybe a scene graph
I'm trying to draw a cube using the same indices and vertices used in three.js BoxGeometry. I feel like the vertices are good but somehow when I had the indices I can't manage to make it work.
Indices
[0,2,1,2,3,1,4,6,5,6,7,5,8,10,9,10,11,9,12,14,13,14,15,13,16,18,17,18,19,17,20,22,21,22,23,21]
Vertices
[
0.5,0.5,0.5,
0.5,0.5,-0.5,
0.5,-0.5,0.5,
0.5,-0.5,-0.5,
-0.5,0.5,-0.5,
-0.5,0.5,0.5,
-0.5,-0.5,-0.5,
-0.5,-0.5,0.5,
-0.5,0.5,-0.5,
0.5,0.5,-0.5,
-0.5,0.5,0.5,
0.5,0.5,0.5,
-0.5,-0.5,0.5,
0.5,-0.5,0.5,
-0.5,-0.5,-0.5,
0.5,-0.5,-0.5,
-0.5,0.5,0.5,
0.5,0.5,0.5,
-0.5,-0.5,0.5,
0.5,-0.5,0.5,
0.5,0.5,-0.5,
-0.5,0.5,-0.5,
0.5,-0.5,-0.5,
-0.5,-0.5,-0.5
]
And here is the code
let canvas = document.querySelector("canvas");
let gl = canvas.getContext("webgl");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const vsSource = `
attribute vec4 position;
uniform mat4 modelViewMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = position;
}
`;
const fsSource = `
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
`;
// Shader setup
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
var log = gl.getShaderInfoLog(vertexShader);
throw "Shader compilation failed\n\n" + log + "\n\n";
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
var log = gl.getShaderInfoLog(fragmentShader);
throw "Shader compilation failed\n\n" + log + "\n\n";
}
let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.validateProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
var log = gl.getProgramInfoLog(program);
throw "Program link failed\n\n" + log;
}
gl.useProgram(program);
let modelViewMatrix = gl.getUniformLocation(program, "modelViewMatrix");
let model = mat4.create();
gl.uniformMatrix4fv(modelViewMatrix, false, model);
var vertices = new Float32Array([
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
-0.5,
-0.5
]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
let position = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(position);
var indices = new Uint16Array([
0,
2,
1,
2,
3,
1,
4,
6,
5,
6,
7,
5,
8,
10,
9,
10,
11,
9,
12,
14,
13,
14,
15,
13,
16,
18,
17,
18,
19,
17,
20,
22,
21,
22,
23,
21
]);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);
<canvas></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
For the index buffer you have used the array data type Uint16Array:
var indices = new Uint16Array([...]);
So you have to use enumerator constant gl.UNSIGNED_SHORT rather than gl.UNSIGNED_BYTE for the data type parameter:
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
Since the greatest index is less than 256, you can use the array data type Uint8Array rather than Uint16Array, but keep the enumerator constant gl.UNSIGNED_BYTE:
var indices = new Uint8Array([...]);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_BYTE, 0);
When I resize my four canvases (actual width and height, not just CSS, to adapt to screen ratio when going fullscreen), the canvas which uses webgl does not update. Though I call
gl.viewport( 0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight );
it stays with original ratio, and so it is offset from the other canvas.
What am I missing ?
The only info I could find on the internet is to update my matrix too, but I do not use any matrix, I just use a texture on two triangles.
creation code :
gl.viewport(0, 0, game.w, game.h);
gl.vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
gl.fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
gl.program = createProgram(gl, [gl.vertexShader, gl.fragmentShader]);
gl.useProgram( gl.program);
gl.positionLocation = gl.getAttribLocation( gl.program, "a_position");
gl.texCoordLocation = gl.getAttribLocation( gl.program, "a_texCoord");
gl.texCoordBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, gl.texCoordBuffer );
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray( gl.texCoordLocation );
gl.vertexAttribPointer( gl.texCoordLocation , 2, gl.FLOAT, false, 0, 0);
gl.posBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER , gl.posBuffer );
gl.bufferData( gl.ARRAY_BUFFER , new Float32Array([
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
0.0, 1.0,
1.0, 0.0,
1.0, 1.0]), gl.STATIC_DRAW);
gl.enableVertexAttribArray( gl.positionLocation );
gl.vertexAttribPointer( gl.positionLocation, 2, gl.FLOAT, false, 0, 0 );
gl.resolutionLocation = gl.getUniformLocation( gl.program, "u_resolution" );
webglalpha = gl.getUniformLocation( gl.program, "alpha" );
I found out by myself, the resolution uniform has to be updated too :
gl.uniform2f( gl.resolutionLocation , game.width , game.height );
I want to draw object in just specific area. Please take a look this image for reference
The 2 triangles (picture A) being draw just in the area inside the quad (picture B), so the result will look clipped (picture C).
First i draw the quad just in stencil buffer.
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.stencilMask(0xff);
gl.depthMask(false);
gl.colorMask(false, false, false, false);
drawQuads();
in my understanding, now the stencil buffer has value 1s in the quad area. Then, draw the triangles.
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilMask(0x00);
gl.depthMask(true);
gl.colorMask(true, true, true, true);
drawTriagles();
I was expect the result will be like on the picture (C), but it's not. What I am doing wrong?
Please find the complete code here https://jsfiddle.net/z11zhf01/1
Your program works absolute correctly, but you have to tell the getContext function to create a stencil buffer, when the context is created:
gl = glcanvas.getContext("webgl", {stencil:true});
See Khronos WebGL Specification - WebGLContextAttributes:
stencil
If the value is true, the drawing buffer has a stencil buffer of at least 8 bits. If the value is false, no stencil buffer is available.
See the Example:
(function() {
var gl;
var gProgram;
var gVertexAttribLocation;
var gColorAttribLocation;
var gTriangleVertexBuffer;
var gTriangleColorBuffer;
var gQuadVertexBuffer;
var gQuadColorBuffer;
function initGL() {
var glcanvas = document.getElementById("glcanvas");
gl = glcanvas.getContext("webgl", {stencil:true});
}
function createAndCompileShader(type, source) {
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
throw new Error(gl.getShaderInfoLog(shader));
}
return shader;
}
function createAndLinkProgram(glVertexShader, glFragmentShader) {
var glProgram = gl.createProgram();
gl.attachShader(glProgram, glVertexShader);
gl.attachShader(glProgram, glFragmentShader);
gl.linkProgram(glProgram);
if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
throw new Error("Could not initialise shaders");
}
return glProgram;
}
function initShaderPrograms() {
var gVertexShader = createAndCompileShader(gl.VERTEX_SHADER, [
"attribute vec3 a_vertex;",
"attribute vec4 a_color;",
"varying vec4 v_color;",
"void main(void) {",
"v_color = a_color;",
"gl_Position = vec4(a_vertex, 1.0);",
"}"
].join("\n"));
var gFragmentShader = createAndCompileShader(gl.FRAGMENT_SHADER, [
"precision mediump float;",
"varying vec4 v_color;",
"void main(void) {",
"gl_FragColor = v_color;",
"}"
].join("\n"));
gProgram = createAndLinkProgram(gVertexShader, gFragmentShader);
}
function initGLAttribLocations() {
gVertexAttribLocation = gl.getAttribLocation(gProgram, "a_vertex");
gColorAttribLocation = gl.getAttribLocation(gProgram, "a_color");
}
function initBuffers() {
gTriangleVertexBuffer = gl.createBuffer();
gTriangleColorBuffer = gl.createBuffer();
gQuadVertexBuffer = gl.createBuffer();
gQuadColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleVertexBuffer);
var vertices = new Float32Array([
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0,
0.0, -1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, 1.0, 0.0
]);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleColorBuffer);
var colors = new Float32Array([
0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0
]);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadVertexBuffer);
var vertices = new Float32Array([
-1.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, 1.0, 0.0,
1.0, -1.0, 0.0
]);
for(let i = 0, ii = vertices.length; i < ii; ++i) {
vertices[i] *= 0.75;
}
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadColorBuffer);
var colors = new Float32Array([
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
1.0, 0.0, 0.0, 1.0,
]);
gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW);
}
function drawQuads() {
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadVertexBuffer);
gl.vertexAttribPointer(gVertexAttribLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gQuadColorBuffer);
gl.vertexAttribPointer(gColorAttribLocation, 4, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
function drawTriagles() {
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleVertexBuffer);
gl.vertexAttribPointer(gVertexAttribLocation, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, gTriangleColorBuffer);
gl.vertexAttribPointer(gColorAttribLocation, 4, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
function renderScene() {
gl.enable(gl.STENCIL_TEST);
gl.enable(gl.DEPTH_TEST);
// gl.enable(gl.CULL_FACE);
gl.useProgram(gProgram);
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
gl.enableVertexAttribArray(gVertexAttribLocation);
gl.enableVertexAttribArray(gColorAttribLocation);
gl.stencilOp(gl.KEEP, gl.KEEP, gl.REPLACE);
gl.stencilFunc(gl.ALWAYS, 1, 0xff);
gl.stencilMask(0xff);
gl.depthMask(false);
gl.colorMask(false, false, false, false);
drawQuads();
gl.stencilFunc(gl.EQUAL, 1, 0xff);
gl.stencilMask(0x00);
gl.depthMask(true);
gl.colorMask(true, true, true, true);
drawTriagles();
gl.disableVertexAttribArray(gVertexAttribLocation);
gl.disableVertexAttribArray(gColorAttribLocation);
gl.flush();
}
initGL();
initShaderPrograms();
initGLAttribLocations();
initBuffers();
renderScene();
}());
<main>
<canvas id="glcanvas" width="480" height="360">
WebGL not supported!
</canvas>
</main>
var gl;
var canvas;
var shaderProgram;
var triangleVertexBuffer;
var triangleVertexColorBuffer;
var stripElementBuffer;
var stripVertexBuffer;
//Declare new variables here
function createGLContext(canvas) {
var names = ["webgl", "experimental-webgl"];
var context = null;
for (var i=0; i < names.length; i++) {
try {
context = canvas.getContext(names[i]);
} catch(e) {}
if (context) {
break;
}
}
if (context) {
context.viewportWidth = canvas.width;
context.viewportHeight = canvas.height;
} else {
alert("Failed to create WebGL context!");
}
return context;
}
function loadShaderFromDOM(id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var shaderSource = "";
var currentChild = shaderScript.firstChild;
while (currentChild) {
if (currentChild.nodeType == 3) { // 3 corresponds to TEXT_NODE
shaderSource += currentChild.textContent;
}
currentChild = currentChild.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, shaderSource);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function setupShaders() {
vertexShader = loadShaderFromDOM("shader-vs");
fragmentShader = loadShaderFromDOM("shader-fs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Failed to setup shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
// For the triangle we want to use per-vertex color so
// the vertexColorAttribute, aVertexColor, in the vertex shader
// is enabled.
// You must enable this attribute here or in draw method before the
//triangle is drawn
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
}
function setupBuffers() {
triangleVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
var triangleVertices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
triangleVertexBuffer.itemSize = 3;
triangleVertexBuffer.numberOfItems = 3;
// Triangle vertex colours
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0, //v0
0.0, 1.0, 0.0, 1.0, //v1
0.0, 0.0, 1.0, 1.0 //v2
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 4;
triangleVertexColorBuffer.numberOfItems = 3;
// Add new items: the followings are newly added items
//hexagon vertices
hexagonVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, hexagonVertexBuffer);
var hexagonVertices = [
-0.3, 0.6, 0.0, //v0
-0.4, 0.8, 0.0, //v1
-0.6, 0.8, 0.0, //v2
-0.7, 0.6, 0.0, //v3
-0.6, 0.4, 0.0, //v4
-0.4, 0.4, 0.0, //v5
-0.3, 0.6, 0.0, //v6
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(hexagonVertices), gl.STATIC_DRAW);
hexagonVertexBuffer.itemSize = 3;
hexagonVertexBuffer.numberOfItems = 7;
//Triangle strip vertices.
stripVertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, stripVertexBuffer);
var stripVertices = [
-0.5, 0.2, 0.0, //v0
-0.4, 0.0, 0.0, //v1
-0.3, 0.2, 0.0, //v2
-0.2, 0.0, 0.0, //v3
-0.1, 0.2, 0.0, //v4
0.0, 0.0, 0.0, //v5
0.1, 0.2, 0.0, //v6
0.2, 0.0, 0.0, //v7
0.3, 0.2, 0.0, //v8
0.4, 0.0, 0.0, //v9
0.5, 0.2, 0.0, //v10
// Second strip
-0.5, -0.3, 0.0, //v11
-0.4, -0.5, 0.0, //v12
-0.3, -0.3, 0.0, //v13
-0.2, -0.5, 0.0, //v14
-0.1, -0.3, 0.0, //v15
0.0, -0.5, 0.0, //v16
0.1, -0.3, 0.0, //v17
0.2, -0.5, 0.0, //v18
0.3, -0.3, 0.0, //v19
0.4, -0.5, 0.0, //v20
0.5, -0.3, 0.0 //v21
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(stripVertices), gl.STATIC_DRAW);
stripVertexBuffer.itemSize = 3;
stripVertexBuffer.numberOfItems = 22;
// Strip vertex indices
stripElementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);
var indices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
// put correct indices here. Use degenerated triangles to link the
// strips together
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
stripElementBuffer.numberOfItems = 25;
}
function draw() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw triangle. No change is made to the last week's code here
// For the triangle we want to use per-vertex color so
// the vertexColorAttribute, aVertexColor, in the vertex shader
// is enabled
// gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
// Make vertex buffer "triangleVertexBuffer" the current buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBuffer);
// Link the current buffer to the attribute "aVertexPosition" in
// the vertex shader
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
// Make color buffer "triangleVertexColorBuffer" the current buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
// Link the current buffer to the attribute "aVertexColor" in
// the vertex shader
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems);
gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);
// Draw the newly added items
}
function startup() {
canvas = document.getElementById("myGLCanvas");
gl = createGLContext(canvas);
setupShaders();
setupBuffers();
gl.clearColor(1.0, 1.0, 1.0, 1.0);
draw();
}
startup();
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
varying vec4 vColor;
void main() {
vColor = aVertexColor;
gl_Position = vec4(aVertexPosition, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main() {
gl_FragColor = vColor;
}
</script>
<canvas id="myGLCanvas" width="250" height="250"></canvas>
Hey guys. New to WEBGL, trying to draw the triangle strip but no clue on how to approach this.
what I know:
When drawing with gl.TRIANGLE_STRIP mode, the order of the vertex coordinates or indices in the buffer is important.
Instead of specifying triangles by the programmer, WebGL constructs triangles automatically.
It reads vertex coordinate buffer or index buffer and use them in the following order to construct triangles:
these 2 lines in the code don't make any sense
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexBuffer.numberOfItems);
gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);
It generally makes no sense to call draw twice without changing something in between since to draw 2 things requires setting up different data.
Further, the 2nd line is just plain wrong
gl.drawElements(gl.TRIANGLE_STRIP, 0, stripVertexBuffer.numberOfItems, 25);
If you had opened your JavaScript Console you would have seen an error something like
There are several issues
The code is passing a bad value to the type parameter of gl.drawElements
Type parameter to gl.drawElements is the type of data in the current ELEMENT_ARRAY_BUFFER.
The 2nd parameter is the count.
It's passing the number of vertices (stripVertexBuffer.numberOfItems) not the number of indices (stripElementBuffer.numberOfItems)
It should be something like this
{
const primitive = gl.TRIANGLE_STRIP;
const count = stripElementBuffer.numberOfItems;
const offset = 0;
const indexType = gl.UNSIGNED_SHORT;
gl.drawElements(primitive, count, indexType, offset);
}
Fixing that though isn't enough because the code does not actually put indices in the index buffer. That code
// Strip vertex indices
stripElementBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, stripElementBuffer);
var indices = [
0.0, 0.5, 0.0,
-0.5, -0.5, 0.0,
0.5, -0.5, 0.0
// put correct indices here. Use degenerated triangles to link the
// strips together
];
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
stripElementBuffer.numberOfItems = 25;
also makes no sense. Indices are unsigned integer values from 0 to N where N is the one less than the number of vertices bound to the attributes. Further only 9 values are put in but the code sets stripElementBuffer.numberOfItems to 25 .. ?
Then, on top of all of that the code is not setting up the attributes for using the strip vertices.
To draw multiple things in WebGL works like this
for each thing you want to draw
gl.useProgram(theProgramYouWantToDrawWith);
// setup attributes
for each attribute
gl.bindBuffer(gl.ARRAY_BUFFER, bufferWithDataForAttribute);
gl.enableVertexAttribArray(attribLocation);
gl.vertexAttribPointer(attribLocation, ... how to get data out of buffer ...)
// if using indices setup the ELEMENT_ARRAY_BUFFER
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, bufferWithIndices);
// setup textures
for each texture you're going to draw with
gl.activeTexture(gl.TEXTURE0 + unit);
gl.bindTexture(gl.TEXTURE_??, someTexture);
// setup uniforms
for each uniform
gl.uniformXXX(...)
// draw
gl.drawXXX (either gl.drawArrays or gl.drawElements)
Before you can even attempt degenerate triangle strips you need to fix your code to follow that pattern. Also here's some other tutorials you might find helpful