fractiform

From ed5d2abddffcf72d28dd427d08efc50d4b1456d9 Mon Sep 17 00:00:00 2001 From: pommicket Date: Wed, 14 Jun 2023 11:51:05 +0100 Subject: drawing a rectangle --- fractiform.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 45 +++++++++++++++++++++++++++ 2 files changed, 142 insertions(+) create mode 100644 fractiform.js create mode 100644 index.html diff --git a/fractiform.js b/fractiform.js new file mode 100644 index 0000000..eac29a6 --- /dev/null +++ b/fractiform.js @@ -0,0 +1,97 @@ +'use strict'; + +let gl; +let program; +let vertex_buffer; +let prev_frame_time = 0.0; +let canvas; + +window.addEventListener('load', startup); + +function startup() { + canvas = document.getElementById('canvas'); + gl = canvas.getContext('webgl'); + + program = gl.createProgram(); + let vertex_shader = compile_shader('main vertex', gl.VERTEX_SHADER, ` +attribute vec2 v_pos; +void main() { + gl_Position = vec4(v_pos, 0.0, 1.0); +} +`); + let fragment_shader = compile_shader('main fragment', gl.FRAGMENT_SHADER, ` +#ifdef GL_ES +precision highp float; +#endif + +uniform vec4 u_color; + +void main() { + gl_FragColor = u_color; +} +`); + if (vertex_shader == null || fragment_shader == null) { + return; + } + + gl.attachShader(program, vertex_shader); + gl.attachShader(program, fragment_shader); + gl.linkProgram(program); + if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { + show_error('Error linking shader program:\n' + gl.getProgramInfoLog(program)); + } + + vertex_buffer = gl.createBuffer(); + gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); + gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ + -0.5, 0.5, 0.5, 0.5, 0.5, -0.5, -0.5, 0.5, 0.5, -0.5, -0.5, -0.5, + ]), gl.STATIC_DRAW); + + frame(0.0); +} + +function frame(delta) { + let width = canvas.offsetWidth; + let height = canvas.offsetHeight; + canvas.width = width; + canvas.height = height; + gl.viewport(0, 0, width, height); + gl.clearColor(0.8, 0.9, 1.0, 1.0); + gl.clear(gl.COLOR_BUFFER_BIT); + + gl.useProgram(program); + + gl.uniform4fv(gl.getUniformLocation(program, 'u_color'), [0.1, 0.7, 0.2, 1.0]); + + gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); + + let v_pos = gl.getAttribLocation(program, 'v_pos'); + gl.enableVertexAttribArray(v_pos); + gl.vertexAttribPointer(v_pos, 2, gl.FLOAT, false, 0, 0); + gl.drawArrays(gl.TRIANGLES, 0, 6); + + requestAnimationFrame((t) => { + let delta = t - prev_frame_time; + prev_frame_time = t; + frame(delta); + }); +} + + +function compile_shader(name, type, source) { + let shader = gl.createShader(type); + gl.shaderSource(shader, source); + gl.compileShader(shader); + + if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { + show_error('Error compiling shader ' + name + ':\n' + + gl.getShaderInfoLog(shader)); + return null; + } + return shader; +} + +function show_error(error) { + // TODO: display error in browser + console.log(error); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..2c6dfd3 --- /dev/null +++ b/index.html @@ -0,0 +1,45 @@ + + + + + fractiform + + + + + + + + + + +

+ + -- cgit v1.2.3