noe/3d
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

0005: hide alt3

Browse source
This commit is contained in:
41666 2024-05-01 01:42:35 -04:00
parent 56508267a3
commit 02547b888f
4 changed files with 71 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
html/005-thoughtform-hidenoe/main.js
View file

@ -1,5 +1,6 @@
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;i<maxIterations;i++){float factor=2.6+(1.3*sin(u_time*0.0001));z=squareImaginary(z,factor+1.0)+(coord/factor);if(length(z)>2.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();
import{d as C,e as D,f as j,g as O,h as G,i as I,k,m as V,n as Q} from"../chunk-419236ae98000e07.js";var B=new V({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,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;i<maxIterations;i++){float factor=2.6+(1.3*sin(u_time*0.0001));z=squareImaginary(z,factor+1.0)+(coord/factor);if(length(z)>2.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 Z=`#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=69.0;for(float i=0.0;i<maxIterations;i++){float mod=u_time*0.0003;z=squareImaginary(z,1.0/mod)+coord;if(length(z)>100.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.yx-vec2(-1.075,1.0))*0.9);fragColor.r=mandelbrot;vec2 outerNoise=(mandelbrot)*(1.0-uvMirror*0.5);fragColor.gb+=(1.0-mandelbrot)*outerNoise;fragColor.a=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"}},J={normal:E,alt3:Z},$=(x,_=E)=>new I(T).vertex(k).fragment(_).app(x);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 q=`#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 w=`#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 b={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"}},y={normal:K,debug:q,alt2:w},z=(x,_=K)=>new I(b).vertex(k).fragment(_).app(x);var i=new G({fov:45}),H=new C([0,0,2],D([0,0,0])),N=new C([1,-1,0],D([0,0,0])),o=new C(j(0),D([0,180,0]),j(1.8)),m=new C(j(0),D([0,180,180]),j(0.6));document.body.addEventListener("mousemove",(x)=>{const{clientX:_,clientY:P}=x,{clientWidth:c,clientHeight:F}=document.body,M=_/c,W=P/F,A=M*2-1,X=W*2-1;N.position[1]=A,N.position[0]=X});i.onUpdate((x,_)=>{});var U=y.normal,L=J.normal;if(location.search.includes("alt1"))U=y.debug;if(location.search.includes("alt2"))U=y.alt2;if(location.search.includes("alt3"))L=J.alt3;new Q(i,o,new O(i,B,$(i,L),H).configure({}));new Q(i,m,new O(i,B,z(i,U),H,N).configure({}));i.start();

20
src/005-thoughtform-hidenoe/main.ts
View file

@ -3,7 +3,7 @@ import { WebGLApp } from "../renderer/webgl";
import { Renderable } from "../renderer/renderable";
import { Transform, etoq, v3 } from "../renderer/transform";
import plane from "../meshes/plane";
import { outer } from "./shaders/outer";
import { outer, outerFrags } from "./shaders/outer";
import { frags, noe } from "./shaders/noe";
import { createGizmo } from "../renderer/gizmo";
@ -32,14 +32,8 @@ document.body.addEventListener("mousemove", (event) => {
app.onUpdate((time, app) => {});
new Renderable(
app,
transformPlane,
new MeshRenderer(app, plane, outer(app), camera).configure({})
);
let noeShader = frags.normal;
let hShader = outerFrags.normal;
if (location.search.includes("alt1")) {
noeShader = frags.debug;
}
@ -48,6 +42,16 @@ if (location.search.includes("alt2")) {
noeShader = frags.alt2;
}
if (location.search.includes("alt3")) {
hShader = outerFrags.alt3;
}
new Renderable(
app,
transformPlane,
new MeshRenderer(app, plane, outer(app, hShader), camera).configure({})
);
new Renderable(
app,
transformSphere,

45
src/005-thoughtform-hidenoe/shaders/outer-alt3.frag Normal file
View file

@ -0,0 +1,45 @@
#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 = 69.0;
for (float i = 0.0; i < maxIterations; i++) {
// float factor = cos((1.3*6.0) * sin(u_time * 0.0005));
float mod = u_time * 0.0003;
// mod = 0.5;
z = squareImaginary(z, 1.0/mod) + coord;
if (length(z) > 100.0) return i / float(maxIterations);
}
return maxIterations;
}
void main() {
// uv0 is 0..1, we want to denormalize this to -1..1
vec2 uvMirror = abs(uv0 * 2.0 - 1.0);
fragColor = vec4(0.0);
float mandelbrot = iterateMandelbrot((uvMirror.yx - vec2(-1.075, 1.0)) * 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), 18.0);
fragColor.a = 1.0;
}

10
src/005-thoughtform-hidenoe/shaders/outer.ts
View file

@ -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 "./outer.frag";
import fragAlt3 from "./outer-alt3.frag";
export const basicShaderConfig: ShaderConfig = {
attributes: {
@ -26,5 +27,10 @@ export const basicShaderConfig: ShaderConfig = {
},
};
export const outer = (app: WebGLApp) =>
new Shader(basicShaderConfig).vertex(vert).fragment(frag).app(app);
export const outerFrags = {
normal: frag,
alt3: fragAlt3,
};
export const outer = (app: WebGLApp, fragShader: string = frag) =>
new Shader(basicShaderConfig).vertex(vert).fragment(fragShader).app(app);