KillerSheltie
Reputation: 87
WebGL Recreate Overlapping Triangles
I'm trying to create a program without css that displays several overlapping triangles on a black background. Once I can get the triangles to display (like in the picture attached only with different colors), I need to implement either a z-buffer or a painter's algorithm; but first, I can't figure out what's wrong in the code below that they aren't displaying at all. I think it's an issue with my shaders perhaps?
<!doctype html>
<html>
<body>
<canvas width = "500" height = "500" id = "canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
gl = canvas.getContext('webgl');
var positions = [
0, 1, -1, -1, 1, -1,
-1, -1, -0, -1, -1, -0.5,
1, -1, 0, -1, 1, -0.5,
1, 1, 0, 1, 1, -1,
-1, 1, -1, 0, -0, 1
];
var colors = [
1,0,1, 1,0,1, 1,0,1, 1,0,1,//purple
0,0,1, 0,0,1, 0,0,1, 0,0,1,//blue
1,1,0, 1,1,0, 1,1,0, 1,1,0,//yellow
1,0,0, 1,0,0, 1,0,0, 1,0,0,//red
0,1,0, 0,1,0, 0,1,0, 0,1,0, //green
];
//vertex buffer
var vbuffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
//color buffer
var cbuffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
//shaders
var vCode =
`
attribute vec2 a_Position;
attribute vec3 a_Color;
varying vec3 v_Color;
void main()
{
gl_Position = vec4(a_Position, 0.0, 1.0);
v_Color = a_Color;
}`;
var fragCode =
`
precision mediump float;
varying vec3 v_Color;
void main()
{
gl_FragColor = vec4(v_Color, 1.0);
}`;
//vertex shader
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vCode);
gl.compileShader(vShader);
//fragment shader
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragCode);
gl.compileShader(fShader);
var shaders = gl.createProgram();
gl.attachShader(shaders, vShader);
gl.attachShader(shaders, fShader);
gl.linkProgram(shaders);
//vertex buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
var _position = gl.getAttribLocation(shaders, "position");
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(_position);
//color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer);
var _color = gl.getAttribLocation(shaders, "color");
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_color);
gl.useProgram(shaders);
//depth testing
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.depthMask(gl.FALSE);
//clears buffer
gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.cbuffer_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 15);
</script>
</body>
</html>
Upvotes: 0
Views: 203
Answers (1)
AnonCoder
Reputation: 26
There are four mistakes in the code. I corrected the mistakes and added explanations. Here is the working code:
<!doctype html>
<html>
<body>
<canvas width = "500" height = "500" id = "canvas"></canvas>
<script>
var canvas = document.getElementById('canvas');
gl = canvas.getContext('webgl');
var positions = [
0, 1, -1, -1, 1, -1,
-1, -1, -0, -1, -1, -0.5,
1, -1, 0, -1, 1, -0.5,
1, 1, 0, 1, 1, -1,
-1, 1, -1, 0, -0, 1
];
/*var colors = [
1,0,1, 1,0,1, 1,0,1, 1,0,1,//purple
0,0,1, 0,0,1, 0,0,1, 0,0,1,//blue
1,1,0, 1,1,0, 1,1,0, 1,1,0,//yellow
1,0,0, 1,0,0, 1,0,0, 1,0,0,//red
0,1,0, 0,1,0, 0,1,0, 0,1,0, //green
];
BUG 1: Color array should be 3 values per vertex. This code assumes 4 values are used
*/
var colors = [
1,0,1, 1,0,1, 1,0,1, //purple
0,0,1, 0,0,1, 0,0,1, //blue
1,1,0, 1,1,0, 1,1,0, //yellow
1,0,0, 1,0,0, 1,0,0, //red
0,1,0, 0,1,0, 0,1,0 //green
];
//vertex buffer
var vbuffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
//color buffer
var cbuffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
//shaders
var vCode =
`
attribute vec2 a_Position;
attribute vec3 a_Color;
varying vec3 v_Color;
void main()
{
gl_Position = vec4(a_Position, 0.0, 1.0);
v_Color = a_Color;
}`;
var fragCode =
`
precision mediump float;
varying vec3 v_Color;
void main()
{
gl_FragColor = vec4(v_Color, 1.0);
}`;
//vertex shader
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vCode);
gl.compileShader(vShader);
//fragment shader
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragCode);
gl.compileShader(fShader);
var shaders = gl.createProgram();
gl.attachShader(shaders, vShader);
gl.attachShader(shaders, fShader);
gl.linkProgram(shaders);
//vertex buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
//var _position = gl.getAttribLocation(shaders, "position"); BUG 2: attribute name is "a_Position"
var _position = gl.getAttribLocation(shaders, "a_Position");
//gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0); BUG 3: a_Position is a vec2. It only accepts 2 values.
gl.vertexAttribPointer(_position, 2, gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(_position);
//color buffer
gl.bindBuffer(gl.ARRAY_BUFFER, cbuffer);
//var _color = gl.getAttribLocation(shaders, "color"); BUG 4: attribute name is "a_Color"
var _color = gl.getAttribLocation(shaders, "a_Color");
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_color);
gl.useProgram(shaders);
//depth testing
gl.disable(gl.DEPTH_TEST);
gl.enable(gl.BLEND);
gl.depthMask(gl.FALSE);
//clears buffer
gl.clearColor(0.5, 0.5, 0.5, 0.9);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.cbuffer_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 15);
</script>
</body>
</html>Upvotes: 1
Related Questions
- WebGL gl.triangle make square
- How can I draw two triangles colored by vertex in WebGL?
- webgl trying to draw a triangle
- Creating random positions of triangles using Webgl
- How to make overlapping triangles
- Why is the WebGL instancing extension only drawing one triangle instead of two?
- Making a Mesh Plane in WebGL with Triangles
- Triangulating a Plane in WebGL
- how to offset a 2D triangle in a webgl shader?
- WebGL triangles in a cube