update dev

mizok · Apr 18, 2022 · 0521883 · 0521883
1 parent 099f6d3
commit 0521883
Show file tree

Hide file tree

Showing 10 changed files with 213 additions and 0 deletions.
diff --git a/src/examples/light-spot.ejs b/src/examples/light-spot.ejs
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<%- include('../template/head.ejs',{title:'universe-alpha'})%>
+
+<body>
+  <canvas id="canvas"></canvas>
+</body>
+
+</html>
diff --git a/src/scss/examples/light-spot/main.scss b/src/scss/examples/light-spot/main.scss
@@ -0,0 +1,4 @@
+canvas{
+  width: 100%;
+  height: 100%;
+}
diff --git a/src/ts/examples/light-spot/create-buffer.ts b/src/ts/examples/light-spot/create-buffer.ts
@@ -0,0 +1,15 @@
+const createBuffer = (gl:WebGLRenderingContext) => {
+  // Create and initialize buffer
+  const geometryBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, geometryBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
+    -1.0, -1.0,
+     1.0, -1.0,
+    -1.0,  1.0,
+     1.0,  1.0
+  ]), gl.STATIC_DRAW);
+
+  return geometryBuffer;
+}
+
+export default createBuffer;
diff --git a/src/ts/examples/light-spot/create-program.ts b/src/ts/examples/light-spot/create-program.ts
@@ -0,0 +1,15 @@
+import createShader from './create-shader';
+
+const createProgram = (gl:WebGLRenderingContext, shaderData:any) => {
+  const program = gl.createProgram();
+
+  shaderData
+    .map((s:any) => createShader(gl, s.src, s.type))
+    .forEach((s:any) => gl.attachShader(program, s));
+
+  gl.linkProgram(program);
+
+  return program;
+};
+
+export default createProgram;
diff --git a/src/ts/examples/light-spot/create-shader.ts b/src/ts/examples/light-spot/create-shader.ts
@@ -0,0 +1,14 @@
+const createShader = (gl:WebGLRenderingContext, sourceCode:string, type:WebGLRenderingContext['VERTEX_SHADER']|WebGLRenderingContext['FRAGMENT_SHADER']) => {
+  // Compiles either a shader of type gl.VERTEX_SHADER or gl.FRAGMENT_SHADER
+  var shader = gl.createShader( type );
+  gl.shaderSource( shader, sourceCode );
+  gl.compileShader( shader );
+
+  if ( !gl.getShaderParameter(shader, gl.COMPILE_STATUS) ) {
+    var info = gl.getShaderInfoLog(shader);
+    throw 'Could not compile WebGL program. \n\n' + info;
+  }
+  return shader;
+};
+
+export default createShader;
diff --git a/src/ts/examples/light-spot/draw.ts b/src/ts/examples/light-spot/draw.ts
@@ -0,0 +1,15 @@
+const draw = (gl:WebGLRenderingContext, now:number, state:any) => {
+  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+  gl.bindBuffer(gl.ARRAY_BUFFER, state.geometryBuffer);
+
+  gl.enableVertexAttribArray(state.attributes.position);
+  gl.vertexAttribPointer(state.attributes.position, 2, gl.FLOAT, false, 0, 0);
+  gl.uniform2f(state.uniforms.resolution, window.innerWidth, window.innerHeight);
+  gl.uniform1f(state.uniforms.millis, now);
+
+  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+
+  requestAnimationFrame(now => draw(gl, now, state));
+};
+
+export default draw;
diff --git a/src/ts/examples/light-spot/main.ts b/src/ts/examples/light-spot/main.ts
@@ -0,0 +1,62 @@
+// This demo is from an anonymous Codepen.
+// It has been modified to stop it having dependencies
+// and been split up into seperate files.
+// This is probably not a good resource to learn
+// from as it has not been well thought out!
+// https://codepen.io/anon/pen/EQLERV
+const fragmentShaderSrc = require('./shaders/fragment.frag');
+const vertexShaderSrc = require('./shaders/vertex.vert');
+import resizeCanvas from './resize-canvas';
+import createProgram from './create-program';
+import createBuffer from './create-buffer';
+import draw from './draw';
+const init = () => {
+  // Create program
+
+  let canvas = document.getElementById('canvas');
+  if (!(canvas instanceof HTMLCanvasElement)) return;
+  const gl = canvas.getContext('webgl');
+
+  const shaders = [
+    { src: fragmentShaderSrc, type: gl.FRAGMENT_SHADER },
+    { src: vertexShaderSrc, type: gl.VERTEX_SHADER }
+  ];
+
+  const program = createProgram(gl, shaders);
+
+  const geometryBuffer = createBuffer(gl);
+
+  // Set up attributes and uniforms
+  const attributes = {
+    position: gl.getAttribLocation(program, 'a_position')
+  };
+
+  const uniforms = {
+    resolution: gl.getUniformLocation(program, 'u_resolution'),
+    millis: gl.getUniformLocation(program, 'u_millis')
+  };
+
+  // Set WebGL program here (we have only one)
+  gl.useProgram(program);
+
+
+  // Resize canvas and viewport
+  const resize = () => {
+    resizeCanvas(gl.canvas);
+    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
+  };
+
+  // Setup canvas
+  window.onresize = resize;
+  resize();
+
+  // Start rendering
+  requestAnimationFrame(now => draw(gl, now, {
+    geometryBuffer,
+    attributes,
+    uniforms,
+  }));
+
+}
+
+window.onload = init;
diff --git a/src/ts/examples/light-spot/resize-canvas.ts b/src/ts/examples/light-spot/resize-canvas.ts
@@ -0,0 +1,12 @@
+const resizeCanvas = (canvas:HTMLCanvasElement, multiplier = 1) => {
+  var width  = canvas.clientWidth  * multiplier | 0;
+  var height = canvas.clientHeight * multiplier | 0;
+  if (canvas.width !== width ||  canvas.height !== height) {
+    canvas.width  = width;
+    canvas.height = height;
+    return true;
+  }
+  return false;
+};
+
+export default resizeCanvas;
diff --git a/src/ts/examples/light-spot/shaders/fragment.frag b/src/ts/examples/light-spot/shaders/fragment.frag
@@ -0,0 +1,61 @@
+#ifdef GL_ES
+  precision mediump float;
+#endif
+
+uniform vec2 u_resolution;
+uniform float u_millis;
+
+const int PARTICLES = 18;
+const float ENERGY = 0.2;
+const float BLOBINESS = 1.6;
+const float BRIGHTNESS = 1.1;
+const float OFFSET = 30000.0;
+
+float rand(vec2 co) {
+  return fract(sin(dot(co.xy, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+void main(void) {
+  vec2 pixel = (gl_FragCoord.xy / u_resolution.x);
+  float t = (u_millis + OFFSET ) * 0.001 * ENERGY;
+
+  float a = 0.0;
+  float b = 0.0;
+  float c = 0.0;
+
+  vec2 particle;
+  vec2 center = vec2(0.5, 0.5 * (u_resolution.y / u_resolution.x));
+
+  float na, nb, nc, nd, d;
+  float size = float(PARTICLES);
+  float step = 1.0 / size;
+  float n = step;
+
+  for (int i = 0; i < PARTICLES; i++) {
+    vec2 np = vec2(n, 0.0);
+
+    na = rand(np * 1.1);
+    nb = rand(np * 2.8);
+    nc = rand(np * 0.7);
+    nd = rand(np * 3.2);
+
+    particle = center;
+    particle.x += sin(t*na) * cos(t*nb) * 0.6;
+    particle.y += cos(t*nc) * sin(t*nd) * 0.4;
+
+    d = pow(1.2 * na / length(particle - pixel), BLOBINESS);
+
+    if (float(i) < size * 0.3333) {
+      a += d;
+    } else if (float(i) < size * 0.6666) {
+      b += d;
+    } else {
+      c += d;
+    }
+
+    n += step;
+  }
+
+  vec3 col = vec3(a*c, b*c, a*b) * 0.0001 * BRIGHTNESS;
+  gl_FragColor = vec4(col, 1.0);
+}
diff --git a/src/ts/examples/light-spot/shaders/vertex.vert b/src/ts/examples/light-spot/shaders/vertex.vert
@@ -0,0 +1,5 @@
+attribute vec2 a_position;
+
+void main(void) {
+  gl_Position = vec4(a_position, 0, 1);
+}