draw point

11 months ago · 7b656b8055
commit 7b656b8055
2 changed files with 93 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,25 @@
 <!doctype html>
 <html lang="en">
 <head>
 	<meta charset="utf-8"/>
 	<title> draw </title>
 </head>
 <body onload="main()">
 	<canvas id="gl-canvas" width="1024" height="768">Oops!</canvas>
 	<script src="webgl.js"></script>
 </body>
 <script id="vertex-shader" type="x-shader/x-vertex">
 void main() {
 	gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
 	gl_PointSize = 10.0;
 }
 </script>
 <script id="fragment-shader" type="x-shader/x-fragment">
 void main() {
 	gl_FragColor = vec4(0.0, 0.3, 0.5, 1.0);
 }
 </script>
 </html>
--- a/webgl.js
+++ b/webgl.js
@ -0,0 +1,68 @@
 let gl = null;
 function compileShader(id, type) {
 	const code = document.getElementById(id).innerHTML
 	const shader = gl.createShader(type);
 	gl.shaderSource(shader, code);
 	gl.compileShader(shader);
 	if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
 		console.log('theres an error');
 		console.log(gl.getShaderInfoLog(shader));
 	}
 	return shader;
 }
 function buildShaderProgram(shaderInfo) {
 	const program = gl.createProgram();
 	shaderInfo.forEach((desc) => {
 		const shader = compileShader(desc.id, desc.type);
 		if (shader) {
 			console.log('attach')
 			gl.attachShader(program, shader);
 		}
 	});
 	gl.linkProgram(program);
 	if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
 		console.log("Error linking shader program");
 		console.log(gl.getProgramInfoLog(program));
 	}
 	return program;
 }
 function main() {
 	var canvas = document.getElementById('gl-canvas');
 	gl = canvas.getContext('webgl');
 	var program;
 	if (!gl) {
 		console.log('no gl');
 		return;
 	}
 	const shaderSet = [
 		{
 			type: gl.VERTEX_SHADER,
 			id: "vertex-shader",
 		},
 		{
 			type: gl.FRAGMENT_SHADER,
 			id: "fragment-shader",
 		},
 	];
 	program = buildShaderProgram(shaderSet);
 	gl.useProgram(program);
 	gl.clearColor(0.5, 0.0, 0.0, 1.0);
 	gl.clear(gl.COLOR_BUFFER_BIT);
 	gl.drawArrays(gl.POINTS, 0, 1);
 }