diff --git a/html/005-thoughtform-hidenoe/main.js b/html/005-thoughtform-hidenoe/main.js index 76b169c..06a71be 100644 --- a/html/005-thoughtform-hidenoe/main.js +++ b/html/005-thoughtform-hidenoe/main.js @@ -1,3 +1,4 @@ -import{d as y,e as j,f as x,g as B,h as O,i as D,k as I,m as F,n as E} from"../chunk-419236ae98000e07.js";var z=new F({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 H=`#version 300 es -precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number){return vec2(pow(number.x,2.0)-pow(number.y,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.a=1.0;}`;var V={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"}},J=(k)=>new D(V).vertex(I).fragment(H).app(k);var K=`#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 Y={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=(k)=>new D(Y).vertex(I).fragment(K).app(k);var _=new O({fov:45}),m=new y(x(-5)),Q=new y([0,0,2],j([0,0,0])),Z=new y(x(0),j([0,180,0]),x(1.8)),$=new y(x(0),j([0,180,180]),x(0.6));new E(_,Z,new B(_,z,J(_),Q).configure({}));new E(_,$,new B(_,z,N(_),Q).configure({}));_.start(); +import{d as I,e as c,f as _,g as z,h as N,i as x,k as y,m as D,n as B} from"../chunk-419236ae98000e07.js";var k=new D({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 E=`#version 300 es +precision highp float;uniform float u_time;in vec2 uv0;out vec4 fragColor;vec2 squareImaginary(vec2 number){return vec2(pow(number.x,2.0)-pow(number.y,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.a=1.0;}`;var V={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"}},F=(j)=>new x(V).vertex(y).fragment(E).app(j);var H=`#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 J=`#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={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"}},K=(j,Q=!1)=>new x(Z).vertex(y).fragment(Q?J:H).app(j);var $=location.search.includes("alt1"),i=new N({fov:45}),O=new I([0,0,2],c([0,0,0])),A=new I(_(0),c([0,180,0]),_(1.8)),C=new I(_(0),c([0,180,180]),_(0.6));new B(i,A,new z(i,k,F(i),O).configure({}));new B(i,C,new z(i,k,K(i,$),O).configure({}));i.start(); diff --git a/src/005-thoughtform-hidenoe/main.ts b/src/005-thoughtform-hidenoe/main.ts index 01869e0..15eac5a 100644 --- a/src/005-thoughtform-hidenoe/main.ts +++ b/src/005-thoughtform-hidenoe/main.ts @@ -3,16 +3,12 @@ import { WebGLApp } from "../renderer/webgl"; import { Renderable } from "../renderer/renderable"; import { Transform, etoq, v3 } from "../renderer/transform"; import plane from "../meshes/plane"; -import texture0 from "../meshes/trianglething/textures/texture0.png"; -import { Texture } from "../renderer/texture"; import { outer } from "./shaders/outer"; -import uvsphere from "../meshes/uvsphere"; -import { basic } from "../common-shaders/basic"; import { noe } from "./shaders/noe"; -import uvsphereInverted from "../meshes/uvsphere-inverted"; + +const useDebug = location.search.includes("alt1"); const app = new WebGLApp({ fov: 45 }); -const light = new Transform(v3(-5)); const camera = new Transform([0, 0, 2], etoq([0, 0, 0])); const transformPlane = new Transform(v3(0), etoq([0, 180, 0]), v3(1.8)); @@ -32,7 +28,7 @@ new Renderable( new Renderable( app, transformSphere, - new MeshRenderer(app, plane, noe(app), camera).configure({}) + new MeshRenderer(app, plane, noe(app, useDebug), camera).configure({}) ); // createGizmo(app, camera, light); diff --git a/src/005-thoughtform-hidenoe/shaders/noe-debug.frag b/src/005-thoughtform-hidenoe/shaders/noe-debug.frag new file mode 100644 index 0000000..27091a0 --- /dev/null +++ b/src/005-thoughtform-hidenoe/shaders/noe-debug.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.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() { + // 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*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); +} \ 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 2c1aa6d..bd151c6 100644 --- a/src/005-thoughtform-hidenoe/shaders/noe.ts +++ b/src/005-thoughtform-hidenoe/shaders/noe.ts @@ -2,6 +2,7 @@ import { Shader, ShaderConfig } from "../../renderer/shader"; import { WebGLApp } from "../../renderer/webgl"; import vert from "../../common-shaders/basic.vert"; import frag from "./noe.frag"; +import fragDebug from "./noe-debug.frag"; export const basicShaderConfig: ShaderConfig = { attributes: { @@ -26,5 +27,8 @@ export const basicShaderConfig: ShaderConfig = { }, }; -export const noe = (app: WebGLApp) => - new Shader(basicShaderConfig).vertex(vert).fragment(frag).app(app); +export const noe = (app: WebGLApp, debug: boolean = false) => + new Shader(basicShaderConfig) + .vertex(vert) + .fragment(debug ? fragDebug : frag) + .app(app);