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);
+}