I keep getting the following error when I run my code: "INVALID_VALUE: getAttribLocation: no object or object deleted"
I am brand new to webGL and any help will be greatly appreciated! Sorry if this question is too broad.
HTML
<html>
<head>
<script type="text/javascript" src = "prog1.js"></script>
<script type="text/javascript" src = "webgl-utils.js"></script>
<script type="text/javascript" src = "webgl-debug.js"></script>
<script type="text/javascript" src = "cuon-utils.js"></script>
<script type="text/javascript" src = "cuon-matrix.js"></script>
</head>
<body onload="init()">
<script id ="vertexShader" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 vertexPosition;
void main(){
gl_position = vertexPosition;
}
</script>
<script id ="fragmentShader" type ="x-shader/x-fragment">
void main(){
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
</script>
<canvas id = "webgl" width = "300" height = "300"></canvas>
</body>
</html>
JAVASCRIPT
function flatten(a) {
return a.reduce(function(b, v) {
b.push.apply(b, v);
return b
}, [])
}
function init() {
var positions = [
[-0.25, 0.5, 0],
[-0.5, 0.0, 0],
[0.0, 0.0, 0.0]
];
var triangles = [
[0, 1, 2]
];
// initialize the GL context
canvas = document.getElementById("webgl");
gl = getWebGLContext(canvas, false);
// initialize the program object
var vertexSource = document.getElementById("vertexShader").text;
var fragmentSource = document.getElementById("fragmentShader").text;
program = createProgram(gl, vertexSource, fragmentSource);
gl.useProgram(program);
// initialize the buffer objects
positionBuffer = gl.createBuffer();
triangleBuffer = gl.createBuffer();
// copy vertex data to the gpu
positionArray = new Float32Array(flatten(positions));
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW);
// copy triangle data to the gpu
triangleArray = new Uint16Array(flatten(triangles));
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleArray, gl.STATIC_DRAW);
requestAnimationFrame(draw);
}
function draw() {
var vertexSource = document.getElementById("vertexShader").text;
var fragmentSource = document.getElementById("fragmentShader").text;
gl.clearColor(0.0, 0.8, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var vertexPositionLocation = gl.getAttribLocation(program, "vertexPosition");
gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexPositionLocation);
gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0);
}
Your shader program probably didn't compile/link and your createProgram function returned null. The error explains it directly
INVALID_VALUE: getAttribLocation: no object or object deleted"
Since getAttribLocation takes only 2 values. The first is a WebGLProgram and get second a string. Since your string is a constant then there must be something wrong with your program argument. "no object" probably means "is null" or "undefined"
When I run your code with my substitution for createProgram I get
*** Error compiling shader: ERROR: 0:4: 'gl_position' : undeclared identifier
ERROR: 0:4: 'assign' : cannot convert from 'attribute mediump 4-component vector of float' to 'float'
function flatten(a) {
return a.reduce(function(b, v) {
b.push.apply(b, v);
return b
}, [])
}
function init() {
var positions = [
[-0.25, 0.5, 0],
[-0.5, 0.0, 0],
[0.0, 0.0, 0.0]
];
var triangles = [
[0, 1, 2]
];
// initialize the GL context
canvas = document.getElementById("webgl");
gl = canvas.getContext("webgl");
// initialize the program object
var vertexSource = document.getElementById("vertexShader").text;
var fragmentSource = document.getElementById("fragmentShader").text;
program = createProgram(gl, vertexSource, fragmentSource);
gl.useProgram(program);
// initialize the buffer objects
positionBuffer = gl.createBuffer();
triangleBuffer = gl.createBuffer();
// copy vertex data to the gpu
positionArray = new Float32Array(flatten(positions));
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, positionArray, gl.STATIC_DRAW);
// copy triangle data to the gpu
triangleArray = new Uint16Array(flatten(triangles));
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, triangleBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, triangleArray, gl.STATIC_DRAW);
requestAnimationFrame(draw);
}
function draw() {
var vertexSource = document.getElementById("vertexShader").text;
var fragmentSource = document.getElementById("fragmentShader").text;
gl.clearColor(0.0, 0.8, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
var vertexPositionLocation = gl.getAttribLocation(program, "vertexPosition");
gl.vertexAttribPointer(vertexPositionLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexPositionLocation);
gl.drawElements(gl.TRIANGLES, triangleArray.length, gl.UNSIGNED_SHORT, 0);
}
function createProgram(gl, vs, fs) {
return twgl.createProgramFromSources(gl, [vs, fs]);
}
init();
<script id ="vertexShader" type="x-shader/x-vertex">
precision mediump float;
attribute vec4 vertexPosition;
void main(){
gl_position = vertexPosition;
}
</script>
<script id ="fragmentShader" type ="x-shader/x-fragment">
void main(){
gl_FragColor = vec4(1.0, 1.0, 0.0, 1.0);
}
</script>
<canvas id = "webgl" width = "300" height = "300"></canvas>
<script src="https://twgljs.org/dist/twgl.min.js"></script>
The bug is it's gl_Position not gl_position. It's case sensitive.
You should probably print your shader compilation and linking errors using standard boilerplate WebGL code and make sure to check the JavaScript console for error messages or use an alert or throw an exception if they fail to compile.
PS: please use running snippets when you can. It's less work for the rest of us.
Related
I can't seem to figure out why my code isn't working. When I run it I get these errors:
Error: WebGL warning: vertexAttribPointer: Bad type: NONE
Error: WebGL warning: drawArrays: no VBO bound to enabled vertex attrib index 1u!
I followed this example: Link
EDIT: now the code works, it should show a colored triangle
MyCode:
var gl;
var shaderProgram;
var triangleVertices =
[ // X, Y, R, G, B
0.0, 0.5, 1.0, 1.0, 0.0,
-0.5, -0.5, 0.7, 0.0, 1.0,
0.5, -0.5, 0.1, 1.0, 0.6
];
var triangleVertexBufferObject;
var positionAttribLocation;
var colorAttribLocation;
var vertShaderCode = 'precision mediump float;'+
'attribute vec2 vertPosition;'+
'attribute vec3 vertColor;'+
'varying vec3 fragColor;'+
'void main()'+
'{'+
' fragColor = vertColor;'+
' gl_Position = vec4(vertPosition, 0.0, 1.0);'+
'}';
var fragShaderCode =
'precision mediump float;'+
'varying vec3 fragColor;'+
'void main()'+
'{'+
' gl_FragColor = vec4(fragColor, 1.0);'+
'}';
function initGL(canvas) {
try {
gl = canvas.getContext("webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
function initShaders() {
var fragmentShader = getShader(fragShaderCode, gl.FRAGMENT_SHADER);
var vertexShader = getShader(vertShaderCode, gl.VERTEX_SHADER);
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
}
function initBuffers() {
triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
positionAttribLocation = gl.getAttribLocation(shaderProgram, "vertPosition");
colorAttribLocation = gl.getAttribLocation(shaderProgram, "vertColor");
gl.vertexAttribPointer(
positionAttribLocation, // attribute location
2, //number of elements per attribute
gl.FLOAT, // type of element
gl.FALSE,
5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex
0//offset from the beginning of a single vertex to this attribute
);
gl.vertexAttribPointer(
colorAttribLocation,
3,
gl.FLOAT,
gl.FALSE,
5 * Float32Array.BYTES_PER_ELEMENT,
2 * Float32Array.BYTES_PER_ELEMENT
);
gl.enableVertexAttribArray(positionAttribLocation);
gl.enableVertexAttribArray(colorAttribLocation);
}
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0/*verts to skip*/, 3/*verts to draw*/);
}
function getShader(code, type){
var shader = gl.createShader(type);
gl.shaderSource(shader, code);
gl.compileShader(shader);
return shader;
}
this.start = function(spritesCompiledDone, scriptsCompiledDone, roomsCompiledDone, customObjectsCompiledDone, soundsCompiledDone, currentIdGen){
document.body.style.cursor = "auto";
var canvas = document.createElement("canvas");
canvas.width = 640;
canvas.height = 480;
canvas.style.position = "fixed";
canvas.style.top = "0px";
canvas.style.left = "0px";
document.body.appendChild(canvas);
initGL(canvas);
initShaders();
initBuffers();
gl.useProgram(shaderProgram);
gl.clearColor(0.2, 0.1, 0.7, 1.0);
drawScene();
}
It looks like I have done all the steps to get the attribute locations and pointers but it doesn't work. I don't understand how no VBO can be bound as I use gl.bindBuffer which should still be active in the draw phase.
You should change the following things:
function initBuffers() {
triangleVertexBufferObject = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexBufferObject);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
positionAttribLocation = gl.getAttribLocation(shaderProgram, "vertPosition");
colorAttribLocation = gl.getAttribLocation(shaderProgram, "vertColor");
gl.vertexAttribPointer(
positionAttribLocation, // attribute location
2, //number of elements per attribute
gl.FLOAT, // type of element
gl.FALSE, // to => false,
5 * Float32Array.BYTES_PER_ELEMENT,//size of induvidual vertex
0//offset from the beginning of a single vertex to this attribute
);
gl.vertexAttribPointer(
colorAttribLocation,
3,
gl.Float, //to => gl.FLOAT,
gl.False, //to => false,
5 * Float32Array.BYTES_PER_ELEMENT,
5 * Float32Array.BYTES_PER_ELEMENT //to => 2 * Float32Array.BYTES_PER_ELEMENT
);
gl.enableVertexAttribArray(positionAttribLocation);
gl.enableVertexAttribArray(colorAttribLocation);
}
Edit:
After grueling reviewal of the code I happened to make the right alteration to have this triangle render. In the code posted here, the vertices and colors Arrays are declared before initBuffers. In my actual code, they are declared somewhat after. Because javascript (in sublime text) was auto-completing these variables no matter where I defined them (like methods in a java class, say..) and because chrome was throwing no errors, I assumed this could not be the problem. Yet simply shifting these array initializations from after initShaders, initBuffers to before those calls was the crux of my problem. I'm sorry for posting a fundamental unanswerable question but hopefully this will serve as a helpful warning to future people that declaration time matters with regards to webGL buffers. More rigorous checking of shader compilation/linking may yield better information here.
///////////////////
I'm taking some WebGL code I found in a tutorial and trying to refactor it to use code-specified color values for each vertex. Unfortunately, after working this code it, I receive the aforementioned "out of range" error.
node - any not seen declarations are global vars
I have the following setup code, initializing buffers:
The vertex information is specified like so:
var vertices = [
0.0, 1.0,
-1.0, -1.0,
1.0, -1.0
];
var colors = [
1, 0, 0,
1, 0, 0,
1, 0, 0
];
var gl;
var shaderProgram;
var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
var canvas = document.getElementById("ABID");
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
triangleVertexPositionBuffer.itemSize = 2;
triangleVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
triangleVertexColorBuffer.itemSize = 3;
}
initBuffers();
Then creating my shaders/program where I try to get attribute locations and set them on the global variable, 'shaderProgram':
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
shaderProgram.vertexColorAttrib = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
gl.enableVertexAttribArray(shaderProgram.vertexColorAttrib);
}
It depends on a getShader function which works perfectly. The shaders are as follows:
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec3 color;
void main(void) {
gl_FragColor = vec4(1,0,0, 1);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
attribute vec3 aVertexColor;
varying vec3 color;
void main(void) {
gl_Position = vec4(aVertexPosition, 1.0,1.0);
color = aVertexColor;
}
</script>
And finally, the error occurs somehow when drawing these 3 vertices:
draw();
function draw() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clearColor(0, 0, 0, 1);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttrib, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
I'm sure there is some offset, or size or magic number typed incorrectly but I've been over this many times and cannot spot the error. Being an openGL beginner and a lack of debugging insights compounds the frustrations. Any help would be greatly appreciated.
I am a newbie, I am trying to draw a point of size 10, in WebGL, every time on MouseClick. At the point where I click. But Due to some logical error, it behaves a bit differently, it draws two points on click. Also I pass the colour black. It sometimes draws point of different colour(like green).
<html>
<head>
<meta charset="utf-8">
<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition;
attribute vec4 vColor;
varying vec4 fColor;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
gl_PointSize = 10.0;
fColor = vColor;
}
</script>
<script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 fColor;
void main() {
gl_FragColor = fColor;
}
</script>
<script type="text/javascript">
var points = [];
var index = 0;
function init1(){
var canvas = document.getElementById("mycanvas");
gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").firstChild.nodeValue;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
gl.useProgram(program);
color= [0.0, 0.0, 0.0, 1.0];
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, 8*200, gl.STATIC_DRAW);
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, 2, gl.FLOAT, false, 0, 0);
var cBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, 16*200, gl.STATIC_DRAW);
program.vColor = gl.getAttribLocation(program, "vColor");
gl.enableVertexAttribArray(program.vColor);
gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0);
var flattenedVertices = [];
var idx = 0;
canvas.addEventListener("mousedown", function(event){
x=2*event.clientX/canvas.width-1;
y=2*(canvas.height-event.clientY)/canvas.height-1;
var pts = [x, y];
points.push(pts);
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 8*index++, new Float32Array(pts));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 16*index++, new Float32Array(color));
});
render();
}
function render(){
gl.clear( gl.COLOR_BUFFER_BIT );
gl.drawArrays(gl.POINTS, 0, index);
window.requestAnimationFrame(render);
}
</script>
</head>
<body onload="init1()">
<canvas id="mycanvas" width="800" height="500"></canvas>
</body>
Above is my code, if anybody can help me fine tune it to work exactly what I want. There are a few problems I face,
1)I suspect that it draws two points on every click.
2)If I change the number 3 to 4 in line gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0);
it only draws one point, the initial one and does not draws any point on successive clicks.
Kindly help.
You are incrementing index twice with 2 index++ calls. Do it like this instead:
var i = index;
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 8*i, new Float32Array(pts));
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 16*i, new Float32Array(color));
index ++;
And I suspect you meant gl.vertexAttribPointer(program.vColor, 4, gl.FLOAT, false, 0, 0); rather than gl.vertexAttribPointer(program.vColor, 3, gl.FLOAT, false, 0, 0); Since your color is 4 elems: var color= [0.0, 0.0, 0.0, 1.0];
Also, use appropriate hint when allocating a new BufferData. If your data is not static (like how you are changing the buffer when "drawing" a new point) use gl.STREAM_DRAW or gl.DYNAMIC_DRAW. Using wrong hint can have a 5-10x performance loss.
I am new in WebGL, I am trying to draw a square using two triangles and indices. However I am not getting something right. I have been looking at codes and examples but missing something. I am trying to keep things really simple.
<html>
<head>
<meta charset="utf-8"/>
<script id="vertex" type="x-shader">
attribute vec2 aVertexPosition;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
}
</script>
<script id="fragment" type="x-shader">
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 uColor;
void main() {
gl_FragColor = uColor;
}
</script>
<script type="text/javascript">
function init(){
var canvas = document.getElementById("mycanvas");
var gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.5, 0.0, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").firstChild.nodeValue;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
var vertices = [ -0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5];
var indices = [ 3, 2, 1, 3, 1, 0 ]
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
var ebuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
var itemSize = 2;
var numItems = vertices.length / itemSize;
gl.useProgram(program);
program.uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]);
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, itemsize, gl.UNSIGNED_SHORT, false, 0, 0);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}
</script>
</head>
<body onload="init()">
<canvas id="mycanvas" width="800" height="500"></canvas>
</body>
The background appears, but the square does not.
The downloaded codes run so I know the error is in my code only.
Your gl.vertexAttribPointer is incorrect. You created a Float32Array but you are telling webGL to use unsigned shorts and you mispelled itemSize.
Change to gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0); and it works for me.
Your vertices array was missing a coordinate for the last element. Always, arrays of vertices should have 3 coordinates for each vertices and be multiplo of 3.
Your indices array, points which vertices should be connected as triangles to make you geometry display. Give a try to this. This should work.
function init(){
var canvas = document.getElementById("mycanvas");
var gl = canvas.getContext("experimental-webgl");
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0.5, 0.0, 0.2, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
var v = document.getElementById("vertex").firstChild.nodeValue;
var f = document.getElementById("fragment").firstChild.nodeValue;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
var vertices = [ -0.5, 0, 0, 0, 0.5, 0, 0.5, 0, 0];
var indices = [ 0, 1, 2 ]
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
var ebuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
var itemSize = 2;
var numItems = vertices.length / itemSize;
gl.useProgram(program);
program.uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]);
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, itemsize, gl.UNSIGNED_SHORT, false, 0, 0);
gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0);
}
I have this segment of code:
function setupWebGL() {
gl.clearColor(0.1, 0.5, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,400,300);
mat4.perspective(45, 400 / 300, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0, 0, -2.0]);
}
And everything in the code runs except the very last line
mat4.translate(mvMatrix, [0, 0, -2.0]);
I know this because I put alert functions after every line until they failed to run (I need a better way of debugging in chrome, any suggestions?)
I'm using the gl-Matrix library found here https://github.com/toji/gl-matrix/blob/master/dist/gl-matrix-min.js
Any ideas on why that line is stopping the code execution?
Here is the full code:
<!doctype html>
<html>
<head>
<title>WebGL - Chapter One - Lol</title>
<style>
body{ background-color: grey; }
canvas{ background-color: white; }
</style>
<script src = "gl-matrix-min.js"></script>
<script src = "raf_polyfill.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying highp vec4 vColor;
void main(void){
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = vec4(aVertexColor, 1.0);
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
varying highp vec4 vColor;
void main(void){
gl_FragColor = vColor;
}
</script>
<script>
var gl = null,
canvas = null,
glProgram = null,
fragmentShader = null,
vertexShader = null;
var vertexPositionAttribute = null,
trianglesVerticeBuffer = null,
vertexColorAttribute = null,
trianglesColorBuffer = null;
var angle = 0.0;
var mvMatrix = mat4.create(),
pMatrix = mat4.create();
function initWebGL(){
var canvas = document.getElementById("my-canvas");
try{
gl = canvas.getContext("experimental-webgl");
}catch(e){}
if(gl){
initShaders();
setupBuffers();
getMatrixUniforms();
animLoop();
}else{
alert("Error: Your browser does not appear to support WebGL.");
}
}
function animLoop(){
setupWebGL();
setupDynamicBuffers();
setMatrixUniforms();
drawScene();
requestAnimationFrame(animLoop,canvas);
}
function setupWebGL() {
//sets the clear color to red lol
gl.clearColor(0.1, 0.5, 0.1, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.viewport(0,0,400,300);
mat4.perspective(45, 400 / 300, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0, 0, -2.0]);
}
function initShaders(){
var fs_source = document.getElementById("shader-fs").innerHTML;
var vs_source = document.getElementById("shader-vs").innerHTML;
//compile shaders
vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);
fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);
//create program
glProgram = gl.createProgram();
//attach and link shaders to the program
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);
if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
alert("Unable to initialize the shader program.");
}
//use program
gl.useProgram(glProgram);
}
function makeShader(src, type) {
//compile the vertex shader
var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error compiling shader: " + gl.getShaderInfoLog(shader));
}
return shader;
}
function getMatrixUniforms(){
glProgram.pMatrixUniform = gl.getUniformLocation(glProgram, "uPMatrix");
glProgram.mvMatrixUniform = gl.getUniformLocation(glProgram, "uMVMatrix");
}
function setMatrixUniforms(){
gl.unifromMatrix4fv(glProgram.pMatrixUniform, false, pMatrix);
gl.unifromMatrix4fv(glProgram.mvMatrixUniform, false, mvMatrix);
}
function setupBuffers() {
var triangleVerticeColors = [
1.0, 0.0, 0.0,
1.0, 1.0, 1.0,
1.0, 0.0, 0.0,
0.0, 0.0, 1.0,
1.0, 1.0, 1.0,
0.0, 0.0, 1.0
];
trianglesColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVerticeColors), gl.STATIC_DRAW);
}
function setupDynamicBuffers(){
var xTran = Math.sin(angle)/2.0;
var triangleVertices = [
-0.5 + xTran, 0.5, -0.5,
0.0 + xTran, 0.0, -0.5,
-0.5 + xTran, -0.5, -0.5,
0.5 + xTran, 0.5, -0.5,
0.0 + xTran, 0.0, -0.5,
0.5 + xTran, -0.5, -0.5
];
angle += 0.05;
trianglesVerticeBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.DYNAMIC_DRAW);
}
function drawScene() {
vertexPositionAttribute = gl.getAttribLocation(glProgram, "aVertexPosition");
gl.enableVertexAttribArray(vertexPositionAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesVerticeBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, 3, gl.FLOAT, false, 0, 0);
vertexColorAttribute = gl.getAttribLocation(glProgram, "aVertexColor");
gl.enableVertexAttribArray(vertexColorAttribute);
gl.bindBuffer(gl.ARRAY_BUFFER, trianglesColorBuffer);
gl.vertexAttribPointer(vertexColorAttribute, 3, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
</script>
</head>
<body onload="initWebGL()">
<canvas id="my-canvas" width="400" height="300">
Your browser does not support the HTML5 canvas element.
</canvas>
</body>
</html>
Use the new API:
Old API
mat4.translate(mvMatrix, [0, 0, -2.0]);
New API
var translation = vec3.create();
vec3.set (translation, 0, 0, -2.0);
mat4.translate (mvMatrix, mvMatrix, translation);
You have a typo:
unifromMatrix4fv should be uniformMatrix4fv in function setMatrixUniforms.
I'm not sure if this fixes your problem or not, or why you thought your problem was with mat4.translate. You can always open the JavaScript console (F12 if you're running Chrome in Windows) and it'll tell you what the error is.