0005: noe alt2

src/005-thoughtform-hidenoe/main.ts

@@ -4,11 +4,9 @@ import { Renderable } from "../renderer/renderable";
 import { Transform, etoq, v3 } from "../renderer/transform";
 import plane from "../meshes/plane";
 import { outer } from "./shaders/outer";
-import { noe } from "./shaders/noe";
+import { frags, noe } from "./shaders/noe";
 import { createGizmo } from "../renderer/gizmo";
 
-const useDebug = location.search.includes("alt1");
-
 const app = new WebGLApp({ fov: 45 });
 
 const camera = new Transform([0, 0, 2], etoq([0, 0, 0]));
@@ -40,10 +38,20 @@ new Renderable(
   new MeshRenderer(app, plane, outer(app), camera).configure({})
 );
 
+let noeShader = frags.normal;
+
+if (location.search.includes("alt1")) {
+  noeShader = frags.debug;
+}
+
+if (location.search.includes("alt2")) {
+  noeShader = frags.alt2;
+}
+
 new Renderable(
   app,
   transformSphere,
-  new MeshRenderer(app, plane, noe(app, useDebug), camera, light).configure({})
+  new MeshRenderer(app, plane, noe(app, noeShader), camera, light).configure({})
 );
 
 // createGizmo(app, camera, light);

src/005-thoughtform-hidenoe/shaders/noe-alt2.frag

@@ -0,0 +1,43 @@
+#version 300 es
+precision highp float;
+
+// uniform mat4 u_view;
+// uniform mat4 u_projection;
+// uniform mat4 u_object_to_world;
+// uniform mat4 u_object_to_world_inv;
+// uniform vec3 u_light_0;
+// uniform vec4 u_light_0_color;
+uniform float u_time;
+// uniform vec4 u_albedo;
+
+in vec2 uv0;
+in vec3 light_pos; 
+
+out vec4 fragColor;
+
+const float margin = 0.9;
+
+vec3 hsv2rgb(vec3 c) {
+  vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
+  vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
+  return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
+}
+
+void main() {
+  // 0..1 to -1..1
+  vec2 cUV = uv0 * 2.0 - 1.0;
+  float circleDistance = length(cUV);
+  if (circleDistance > margin) {
+    discard;
+  }
+
+  float theta = atan(cUV.y, cUV.x) ;
+  float spiral = sin(100.0 * (sqrt(circleDistance*13.0) - (u_time * 0.0001) * theta - 0.01 * u_time * 0.001)); 
+
+  // float edgeLightZone = pow(clamp(abs(dot(cUV.xyx, light_pos)), 0.0, 1.0) * 2.0, 4.0);
+
+  float colorSpiral = sin(100.0 * (sqrt(circleDistance * 10.0) - 0.001 * theta - 0.3 * u_time * 0.00005));
+  // vec3 hueRotation = hsv2rgb(vec3(colorSpiral, 1.0, 0.5));
+
+  fragColor = vec4(0, spiral, 0, 1.0);
+}

src/005-thoughtform-hidenoe/shaders/noe.ts

@@ -3,6 +3,7 @@ import { WebGLApp } from "../../renderer/webgl";
 import vert from "../../common-shaders/basic.vert";
 import frag from "./noe.frag";
 import fragDebug from "./noe-debug.frag";
+import fragAlt2 from "./noe-alt2.frag";
 
 export const basicShaderConfig: ShaderConfig = {
   attributes: {
@@ -27,8 +28,11 @@ export const basicShaderConfig: ShaderConfig = {
   },
 };
 
-export const noe = (app: WebGLApp, debug: boolean = false) =>
-  new Shader(basicShaderConfig)
-    .vertex(vert)
-    .fragment(debug ? fragDebug : frag)
-    .app(app);
+export const frags = {
+  normal: frag,
+  debug: fragDebug,
+  alt2: fragAlt2,
+};
+
+export const noe = (app: WebGLApp, fragShader: string = frag) =>
+  new Shader(basicShaderConfig).vertex(vert).fragment(fragShader).app(app);