svanellewee · November 9, 2018 07:04
diff --git a/index.html b/index.html
 <html>
 	<head>
 	</head>
 	<body>
 	<canvas id="app"> </canvas>
 	<script src="./index.tsx"></script>
 	</body>
 </html>
diff --git a/index.tsx b/index.tsx

 // a minimalish webgl example
 const app = document.getElementById('app') as HTMLCanvasElement;
 app.width = 800;
 app.height = 600;
 const gl = app.getContext('webgl') as WebGLRenderingContext;

 gl.clearColor(0.7, 0.5, 0.5, 1.0)
 gl.clear(gl.COLOR_BUFFER_BIT);

 const bufferId = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
 gl.bufferData(gl.ARRAY_BUFFER,
    new Float32Array([
        0, 0,
        0, 1,
        1, 0]),
    gl.STATIC_DRAW);

 const vShaderSource = `
 attribute vec2 pos;
 uniform mediump float t;
 void main(){
    gl_Position = vec4(pos.x*t, pos.y*t, 0.0, 1.0);
 }
 `.trim();


 //there is a global thing that tells you what pixel x and y you are drawing in the frag shader
 //this is the absolute value, i.e. from 0 to 800 or whatever the width
 //but your colour output must be normalized to 0 to 1.0
 //I keep touching the pad. you should adjust those setings. there is a built in palm rejection in the ubuntu drivers,you just have to enable it.

 //okay so lets make the colour pulse with time
 //we can add a global to our shaders, called a uniform

 const fShaderSource = `
 uniform mediump float t;
 void main(){
    gl_FragColor = vec4(gl_FragCoord.x/800.0, (gl_FragCoord.y*t)/300.0, t, 1.0);
 }
 `.trim();

 const vShaderId = gl.createShader(gl.VERTEX_SHADER);
 gl.shaderSource(vShaderId, vShaderSource);
 gl.compileShader(vShaderId);
 // what if there was a syntax error?
 if (!gl.getShaderParameter(vShaderId, gl.COMPILE_STATUS)) {
    console.warn("Shader compiler error: " + gl.getShaderInfoLog(vShaderId))
 }


 const fShaderId = gl.createShader(gl.FRAGMENT_SHADER);
 gl.shaderSource(fShaderId, fShaderSource);
 gl.compileShader(fShaderId);

 if (!gl.getShaderParameter(fShaderId, gl.COMPILE_STATUS)) {
    console.warn("Shader compiler error: " + gl.getShaderInfoLog(fShaderId))
 }

 const programId = gl.createProgram();
 gl.attachShader(programId, vShaderId);
 gl.attachShader(programId, fShaderId);
 gl.linkProgram(programId);
 gl.useProgram(programId);

 const attribPosId = gl.getAttribLocation(programId, 'pos')
 gl.enableVertexAttribArray(attribPosId);
 gl.vertexAttribPointer(attribPosId, 2, gl.FLOAT, true, 0, 0);

 const uniformTId = gl.getUniformLocation(programId, 't');
 gl.uniform1f(uniformTId, 0.5);

 let t = 0;
 //da render loop
 // the browser will maintain it at roughly 60 frames per second
 function render(){
    gl.clear(gl.COLOR_BUFFER_BIT);

    t += 0.1;
    gl.uniform1f(uniformTId, Math.abs(Math.sin(t)));

    gl.drawArrays(gl.TRIANGLES, 0, 3);
    requestAnimationFrame(render);
 }
 render();
	<html>
	<head>
	</head>
	<body>
	<canvas id="app"> </canvas>
	<script src="./index.tsx"></script>
	</body>
	</html>

	// a minimalish webgl example
	const app = document.getElementById('app') as HTMLCanvasElement;
	app.width = 800;
	app.height = 600;
	const gl = app.getContext('webgl') as WebGLRenderingContext;

	gl.clearColor(0.7, 0.5, 0.5, 1.0)
	gl.clear(gl.COLOR_BUFFER_BIT);

	const bufferId = gl.createBuffer();
	gl.bindBuffer(gl.ARRAY_BUFFER, bufferId);
	gl.bufferData(gl.ARRAY_BUFFER,
	new Float32Array([
	0, 0,
	0, 1,
	1, 0]),
	gl.STATIC_DRAW);

	const vShaderSource = `
	attribute vec2 pos;
	uniform mediump float t;
	void main(){
	gl_Position = vec4(pos.xt, pos.yt, 0.0, 1.0);
	}
	`.trim();


	//there is a global thing that tells you what pixel x and y you are drawing in the frag shader
	//this is the absolute value, i.e. from 0 to 800 or whatever the width
	//but your colour output must be normalized to 0 to 1.0
	//I keep touching the pad. you should adjust those setings. there is a built in palm rejection in the ubuntu drivers,you just have to enable it.

	//okay so lets make the colour pulse with time
	//we can add a global to our shaders, called a uniform

	const fShaderSource = `
	uniform mediump float t;
	void main(){
	gl_FragColor = vec4(gl_FragCoord.x/800.0, (gl_FragCoord.y*t)/300.0, t, 1.0);
	}
	`.trim();

	const vShaderId = gl.createShader(gl.VERTEX_SHADER);
	gl.shaderSource(vShaderId, vShaderSource);
	gl.compileShader(vShaderId);
	// what if there was a syntax error?
	if (!gl.getShaderParameter(vShaderId, gl.COMPILE_STATUS)) {
	console.warn("Shader compiler error: " + gl.getShaderInfoLog(vShaderId))
	}


	const fShaderId = gl.createShader(gl.FRAGMENT_SHADER);
	gl.shaderSource(fShaderId, fShaderSource);
	gl.compileShader(fShaderId);

	if (!gl.getShaderParameter(fShaderId, gl.COMPILE_STATUS)) {
	console.warn("Shader compiler error: " + gl.getShaderInfoLog(fShaderId))
	}

	const programId = gl.createProgram();
	gl.attachShader(programId, vShaderId);
	gl.attachShader(programId, fShaderId);
	gl.linkProgram(programId);
	gl.useProgram(programId);

	const attribPosId = gl.getAttribLocation(programId, 'pos')
	gl.enableVertexAttribArray(attribPosId);
	gl.vertexAttribPointer(attribPosId, 2, gl.FLOAT, true, 0, 0);

	const uniformTId = gl.getUniformLocation(programId, 't');
	gl.uniform1f(uniformTId, 0.5);

	let t = 0;
	//da render loop
	// the browser will maintain it at roughly 60 frames per second
	function render(){
	gl.clear(gl.COLOR_BUFFER_BIT);

	t += 0.1;
	gl.uniform1f(uniformTId, Math.abs(Math.sin(t)));

	gl.drawArrays(gl.TRIANGLES, 0, 3);
	requestAnimationFrame(render);
	}
	render();