gl.js

gistfile1.js

var gl;
var program;
var aVertex = 0;
var aTexCoord = 1;
var verticesBuffer;
var texCoordBuffer;
var texture;
var wcAddon;

var cTexPixels;
var jsTexPixels;

function glCanvas()
{
	return document.getElementById("glCanvas");
}

var wcAddon = require('./WC.js/build/release/WC');
var tp;

function render()
{
	// Experiment with updating the frame
	wcAddon.UpdateVideoFrame();
	gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE,
	              400, 400, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE,
	              tp);
	gl.activeTexture(gl.TEXTURE0);
	gl.bindTexture(gl.TEXTURE_2D, texture);

	gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
	gl.vertexAttribPointer(aVertex, 3, gl.FLOAT, gl.FALSE, 0, 0);

	gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
	gl.vertexAttribPointer(aTexCoord, 2, gl.FLOAT, gl.FALSE, 0, 0);

	gl.drawArrays(gl.TRIANGLES, 0, 6);
}

function init()
{

	gl = glCanvas().getContext("webgl");

	var vertexShaderSource =
		"attribute highp vec4 a_vertex; " +
		"attribute lowp vec2 a_texCoord; " +
		"varying lowp vec2 v_texCoord; " +
		"void main() { " +
		" v_texCoord = a_texCoord; " +
		" gl_Position = a_vertex; " +
		"} ";

	var fragmentShaderSource =
		"varying lowp vec2 v_texCoord; " +
		"uniform sampler2D tex; " +
		"void main() { " +
		" gl_FragColor = vec4( texture2D( tex, v_texCoord ).rgb, 1.0 ); " +
		"} ";

	var vertexShader = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vertexShader, vertexShaderSource);
	gl.compileShader(vertexShader);

	var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fragmentShader, fragmentShaderSource);
	gl.compileShader(fragmentShader);

	program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);

	gl.useProgram(program);

	if(!gl.getProgramParameter(program, gl.LINK_STATUS)) {
		console.log("Shader link failed.");
	}

	aVertex = gl.getAttribLocation(program, "a_vertex");
	gl.enableVertexAttribArray(aVertex);
	aTexCoord = gl.getAttribLocation(program, "a_texCoord");
	gl.enableVertexAttribArray(aTexCoord);

	var v = [
		-1. ,  1. ,  0. ,
		 1. , -1. ,  0. ,
		-1. , -1. ,  0. ,

		 1. , -1. ,  0. ,
		-1. ,  1. ,  0. ,
		 1. ,  1. ,  0. ,
	];

	var t = [
		0., 1.,
		1., 0.,
		0., 0.,

		1., 0.,
		0., 1.,
		1., 1.,
	];

	verticesBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, verticesBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(v), gl.STATIC_DRAW);

	texCoordBuffer = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(t), gl.STATIC_DRAW);

	tp = wcAddon.GetVideoFrame( verticesBuffer )

	texture = gl.createTexture();
	gl.bindTexture(gl.TEXTURE_2D, texture);

	gl.texImage2D(gl.TEXTURE_2D, 0, gl.LUMINANCE,
	              400, 400, 0, gl.LUMINANCE, gl.UNSIGNED_BYTE,
	              tp);


	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
	gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
	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.bindTexture(gl.TEXTURE_2D, null);

	setInterval(render, 50);
}

init();