From 56508267a34142265d36c4ee1f6265858d2ba9d1 Mon Sep 17 00:00:00 2001 From: noe Date: Wed, 1 May 2024 00:05:00 -0400 Subject: [PATCH] 0005: noe alt2 --- html/005-thoughtform-hidenoe/main.js | 9 ++-- src/005-thoughtform-hidenoe/main.ts | 16 +++++-- .../shaders/noe-alt2.frag | 43 +++++++++++++++++++ src/005-thoughtform-hidenoe/shaders/noe.ts | 14 +++--- 4 files changed, 69 insertions(+), 13 deletions(-) create mode 100644 src/005-thoughtform-hidenoe/shaders/noe-alt2.frag diff --git a/html/005-thoughtform-hidenoe/main.js b/html/005-thoughtform-hidenoe/main.js index 756b5d3..4d119a9 100644 --- a/html/005-thoughtform-hidenoe/main.js +++ b/html/005-thoughtform-hidenoe/main.js @@ -1,4 +1,5 @@ -import{d as j,e as k,f as i,g as F,h as U,i as B,k as C,m as J,n as I} from"../chunk-419236ae98000e07.js";var D=new J({colors:null,faces:new Uint8Array([0,1,2,0,3,1]),name:"src/meshes/plane.ply",normals:null,positions:new Float32Array([1,-1,0,-1,1,0,-1,-1,0,1,1,0]),uvs:new Float32Array([1,0,0,1,0,0,1,1]),vertexCount:4});var K=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number,float mod){return vec2(pow(number.x*mod,2.0)-pow(number.y*mod,2.0),2.0*number.x*number.y);}float iterateMandelbrot(vec2 coord){vec2 z=vec2(0,0);float maxIterations=100.0;for(float i=0.0;i2.0)return i/float(maxIterations);}return maxIterations;}void main(){vec2 uvMirror=abs(uv0*2.0-1.0);fragColor=vec4(0.0);float mandelbrot=iterateMandelbrot((uvMirror.xy+vec2(0.14,-0.525))*0.9);fragColor.r=mandelbrot;vec2 outerNoise=(mandelbrot)*(1.0-uvMirror*0.5);fragColor.gb+=(1.0-mandelbrot)*outerNoise;fragColor.r+=pow(1.0-length(uvMirror),8.0);fragColor.a=1.0;}`;var q={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},N=(x)=>new B(q).vertex(C).fragment(K).app(x);var O=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;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(){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*20.0)-10.0*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(hueRotation*spiral*edgeLightZone,1.0);fragColor.rgb+=min(spiral,0.0041666);}`;var P=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;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(){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*20.0)-10.0*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(colorSpiral,spiral,1.0,1.0);}`;var X={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},Q=(x,y=!1)=>new B(X).vertex(C).fragment(y?P:O).app(x);var Y=location.search.includes("alt1"),_=new U({fov:45}),V=new j([0,0,2],k([0,0,0])),E=new j([1,-1,0],k([0,0,0])),R=new j(i(0),k([0,180,0]),i(1.8)),T=new j(i(0),k([0,180,180]),i(0.6));document.body.addEventListener("mousemove",(x)=>{const{clientX:y,clientY:Z}=x,{clientWidth:$,clientHeight:z}=document.body,A=y/$,G=Z/z,H=A*2-1,L=G*2-1;E.position[1]=H,E.position[0]=L});_.onUpdate((x,y)=>{});new I(_,R,new F(_,D,N(_),V).configure({}));new I(_,T,new F(_,D,Q(_,Y),V,E).configure({}));_.start(); +import{d as D,e as j,f as i,g as J,h as z,i as y,k as B,m as O,n as K} from"../chunk-419236ae98000e07.js";var E=new O({colors:null,faces:new Uint8Array([0,1,2,0,3,1]),name:"src/meshes/plane.ply",normals:null,positions:new Float32Array([1,-1,0,-1,1,0,-1,-1,0,1,1,0]),uvs:new Float32Array([1,0,0,1,0,0,1,1]),vertexCount:4});var Q=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number,float mod){return vec2(pow(number.x*mod,2.0)-pow(number.y*mod,2.0),2.0*number.x*number.y);}float iterateMandelbrot(vec2 coord){vec2 z=vec2(0,0);float maxIterations=100.0;for(float i=0.0;i2.0)return i/float(maxIterations);}return maxIterations;}void main(){vec2 uvMirror=abs(uv0*2.0-1.0);fragColor=vec4(0.0);float mandelbrot=iterateMandelbrot((uvMirror.xy+vec2(0.14,-0.525))*0.9);fragColor.r=mandelbrot;vec2 outerNoise=(mandelbrot)*(1.0-uvMirror*0.5);fragColor.gb+=(1.0-mandelbrot)*outerNoise;fragColor.r+=pow(1.0-length(uvMirror),8.0);fragColor.a=1.0;}`;var u={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},U=(_)=>new y(u).vertex(B).fragment(Q).app(_);var F=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;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(){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*20.0)-10.0*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(hueRotation*spiral*edgeLightZone,1.0);fragColor.rgb+=min(spiral,0.0041666);}`;var V=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;in vec3 light_pos;out vec4 fragColor;const float margin=0.5;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(){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*20.0)-10.0*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(colorSpiral,spiral,1.0,1.0);}`;var Z=`#version 300 es +precision highp float;uniform float u_time;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(){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 colorSpiral=sin(100.0*(sqrt(circleDistance*10.0)-0.001*theta-0.3*u_time*0.00005));fragColor=vec4(0,spiral,0,1.0);}`;var T={attributes:{vertex:"a_vertex",uv0:"a_uv0",normal:"a_normal",vertexColor:"a_vertex_color"},uniforms:{view:"u_view",projection:"u_projection",objectToWorld:"u_object_to_world",objectToWorldInv:"u_object_to_world_inv",light0:"u_light_0",light0Color:"u_light_0_color",time:"u_time",albedo:"u_albedo",texture0:"u_texture_0",texture1:"u_texture_1",texture2:"u_texture_2"}},C={normal:F,debug:V,alt2:Z},$=(_,k=F)=>new y(T).vertex(B).fragment(k).app(_);var x=new z({fov:45}),G=new D([0,0,2],j([0,0,0])),I=new D([1,-1,0],j([0,0,0])),c=new D(i(0),j([0,180,0]),i(1.8)),o=new D(i(0),j([0,180,180]),i(0.6));document.body.addEventListener("mousemove",(_)=>{const{clientX:k,clientY:H}=_,{clientWidth:L,clientHeight:P}=document.body,w=k/L,A=H/P,M=w*2-1,W=A*2-1;I.position[1]=M,I.position[0]=W});x.onUpdate((_,k)=>{});new K(x,c,new J(x,E,U(x),G).configure({}));var N=C.normal;if(location.search.includes("alt1"))N=C.debug;if(location.search.includes("alt2"))N=C.alt2;new K(x,o,new J(x,E,$(x,N),G,I).configure({}));x.start(); diff --git a/src/005-thoughtform-hidenoe/main.ts b/src/005-thoughtform-hidenoe/main.ts index f284706..507c1f7 100644 --- a/src/005-thoughtform-hidenoe/main.ts +++ b/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); diff --git a/src/005-thoughtform-hidenoe/shaders/noe-alt2.frag b/src/005-thoughtform-hidenoe/shaders/noe-alt2.frag new file mode 100644 index 0000000..941a7f5 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/005-thoughtform-hidenoe/shaders/noe.ts b/src/005-thoughtform-hidenoe/shaders/noe.ts index bd151c6..b657d05 100644 --- a/src/005-thoughtform-hidenoe/shaders/noe.ts +++ b/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);