Jump to content
  • Advertisement
Sign in to follow this  
cpplus

Debugging pure WebGL and JS is hell...

This topic is 1115 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I tried with the debugging script from khronos group - no errors or undefined arguments and getError returns 0. I seem to have done the bare minimum to draw a triangle on the screen, so what is wrong? The shaders don't have errors, the program links and validates. I send the buffer data to the 0th attribute and activated it before drawing... 

 

Can someone more experienced take a look and debug it, please? biggrin.png (I hope coding horrors is the place for this topic)

 

EDIT: Silly me... I draw the triangle and then clear the color buffer -_-. Not that it makes js any easier to debug :D .. 

<!DOCTYPE html>
<html>

<head>
	<title>WebGL</title>

	<style>
		#renderCanvas {
			position:absolute;
			top:0px;
			bottom:0px;
			left:0px;
			right:0px;
			margin:auto;
			
			outline:1px solid gray;
		}
	</style>
	
	<script src="webgl-debug.js"></script>
	
	<script type="vertexShader" id="basicVertexShader">
		attribute vec3 aPosition;
		
		void main() {
			gl_Position = vec4(aPosition, 1.0);
		}
	</script>
	
	<script type="fragmentShader" id="basicFragmentShader">
		precision mediump float;
	
		void main() {
			gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
		}
	</script>
	
	<script id="fragmentShader">
	</script>
</head>

<body>
	<canvas id="renderCanvas" width="500" height="500"></canvas>
	
	<script>
		var validateTargetParameter = function (target, flag, gl) {
			var success = null,
				targetIsProgram = true,
				errorMessage = '';
				
			try {
				gl.isProgram(target)
			} catch (e) {
				targetIsProgram = false;
			}
		
			if (targetIsProgram) {
				success = gl.getProgramParameter(target, flag);
			} else {
				success = gl.getShaderParameter(target, flag);
			}
			
			if (!success) {
				if (targetIsProgram) {
					errorMessage = gl.getProgramInfoLog(target);
				} else {
					errorMessage = gl.getShaderInfoLog(target);
				}
				
				console.error(errorMessage);
			}
		}
	
		var createBuffer = function (data, DataTypeConstructor, gl) {
			var buffer = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
			gl.bufferData(gl.ARRAY_BUFFER, 
						new DataTypeConstructor(data), 
						gl.STATIC_DRAW);
			gl.bindBuffer(gl.ARRAY_BUFFER, null);
			return buffer;
		}
		
		var createShader = function (source, type, gl) {
			var shader = gl.createShader(type);
			gl.shaderSource(shader, source);
			gl.compileShader(shader);
			validateTargetParameter(shader, gl.COMPILE_STATUS, gl);
			return shader;
		}
		
		var createProgram = function (vertexShader, fragmentShader, gl) {
			var program = gl.createProgram();
			gl.attachShader(program, vertexShader);
			gl.attachShader(program, fragmentShader);
			
			gl.linkProgram(program);
			validateTargetParameter(program, gl.LINK_STATUS, gl);
			
			gl.validateProgram(program);
			validateTargetParameter(program, gl.VALIDATE_STATUS, gl);
			
			return program;
		}
	</script>
	
	<!-- Actual code. -->
	<script>
		var renderCanvas = document.getElementById('renderCanvas'),
			gl = renderCanvas.getContext('webgl');
		
		// Vertex buffer.
		var geometryData = [
			-1.0, -1.0, 0.0,
			1.0, -1.0, 0.0,
			0.0, 1.0, 0.0
		];
		var positionsBuffer = createBuffer(geometryData, Float32Array, gl);
		
		// Shaders.
		var vertexShaderSource = document.getElementById('basicVertexShader').innerHTML;
		var vertexShader = createShader(vertexShaderSource, gl.VERTEX_SHADER, gl);
		
		var fragmentShaderSource = document.getElementById('basicFragmentShader').innerHTML;
		var fragmentShader = createShader(fragmentShaderSource, gl.FRAGMENT_SHADER, gl);
		
		var shaderProgram = createProgram(vertexShader, fragmentShader, gl);
		shaderProgram.positionAttrib = gl.getAttribLocation(shaderProgram, 'aPosition');
		gl.useProgram(shaderProgram);
		
		// Push data to GPU.
		gl.bindBuffer(gl.ARRAY_BUFFER, positionsBuffer);
		gl.vertexAttribPointer(shaderProgram.positionAttrib, 3, gl.FLOAT, false, 0, 0);
		
		gl.viewport(0, 0, 500, 500);
		gl.clearColor(0.0, 0.0, 0.0, 1.0);
		
		gl.enableVertexAttribArray(shaderProgram.positionAttrib);
		gl.drawArrays(gl.TRIANGLES, 0, 3);
		
		gl.clear(gl.COLOR_BUFFER_BIT);
		
		console.log(gl.getError());
	</script>
</body>

</html>
Edited by cpplus

Share this post


Link to post
Share on other sites
Advertisement

Silly me... I draw the triangle and then clear the color buffer sleep.png.

This is one of those things you think there would be a validator for.

It's pretty easy to statically verify that nobody did anything with those pixels before glClear() was called...

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!