006: the edge...
This commit is contained in:
parent
02547b888f
commit
c2db0d5f37
16 changed files with 4461 additions and 20 deletions
|
|
@ -24,6 +24,6 @@
|
|||
<div id="telemetry">XX.X FPS (XX.X ms)</div>
|
||||
<div id="loading" class="loading-active"><div id="loading-text">[noeidelon] [stage 1]<br />bootstrapping...<span id="stage1-error"><br />this is taking a while...</span><span id="stage1-error2"><br />[panic] <span style="color: red">heck wtf</span></span></div></div>
|
||||
<div id="editor"></div>
|
||||
<nav><a class="nav-left" href="/004-a-new-leaf">⇠ 004-a-new-leaf</a></nav>
|
||||
<nav><a class="nav-left" href="/004-a-new-leaf">⇠ 004-a-new-leaf</a><a class="nav-right" href="/006-the-edge">006-the-edge ⇢</a></nav>
|
||||
</main>
|
||||
<script src="/005-thoughtform-hidenoe/main.js" type="module"></script>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,333 @@
|
|||
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();
|
||||
import {
|
||||
plane_default
|
||||
} from "../chunk-a6d990db9d9ec9c3.js";
|
||||
import {
|
||||
MeshRenderer,
|
||||
Renderable,
|
||||
Shader,
|
||||
Transform,
|
||||
WebGLApp,
|
||||
basic_default1 as basic_default,
|
||||
etoq,
|
||||
v3
|
||||
} from "../chunk-652b721da622b7d9.js";
|
||||
|
||||
// src/005-thoughtform-hidenoe/shaders/outer.frag
|
||||
var outer_default = `#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() {
|
||||
// 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.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;
|
||||
}
|
||||
`;
|
||||
|
||||
// src/005-thoughtform-hidenoe/shaders/outer-alt3.frag
|
||||
var outer_alt3_default = `#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;
|
||||
}
|
||||
`;
|
||||
|
||||
// src/005-thoughtform-hidenoe/shaders/outer.ts
|
||||
var basicShaderConfig = {
|
||||
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"
|
||||
}
|
||||
};
|
||||
var outerFrags = {
|
||||
normal: outer_default,
|
||||
alt3: outer_alt3_default
|
||||
};
|
||||
var outer2 = (app, fragShader = outer_default) => new Shader(basicShaderConfig).vertex(basic_default).fragment(fragShader).app(app);
|
||||
|
||||
// src/005-thoughtform-hidenoe/shaders/noe.frag
|
||||
var noe_default = `#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(hueRotation * spiral * edgeLightZone, 1.0);
|
||||
fragColor.rgb += min(spiral, 0.0041666);
|
||||
}`;
|
||||
|
||||
// src/005-thoughtform-hidenoe/shaders/noe-debug.frag
|
||||
var noe_debug_default = `#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);
|
||||
}`;
|
||||
|
||||
// src/005-thoughtform-hidenoe/shaders/noe-alt2.frag
|
||||
var noe_alt2_default = `#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
|
||||
var basicShaderConfig2 = {
|
||||
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"
|
||||
}
|
||||
};
|
||||
var frags = {
|
||||
normal: noe_default,
|
||||
debug: noe_debug_default,
|
||||
alt2: noe_alt2_default
|
||||
};
|
||||
var noe2 = (app, fragShader = noe_default) => new Shader(basicShaderConfig2).vertex(basic_default).fragment(fragShader).app(app);
|
||||
|
||||
// src/005-thoughtform-hidenoe/main.ts
|
||||
var app = new WebGLApp({ fov: 45 });
|
||||
var camera = new Transform([0, 0, 2], etoq([0, 0, 0]));
|
||||
var light = new Transform([1, -1, 0], etoq([0, 0, 0]));
|
||||
var transformPlane = new Transform(v3(0), etoq([0, 180, 0]), v3(1.8));
|
||||
var transformSphere = new Transform(v3(0), etoq([0, 180, 180]), v3(0.6));
|
||||
document.body.addEventListener("mousemove", (event) => {
|
||||
const { clientX, clientY } = event;
|
||||
const { clientWidth, clientHeight } = document.body;
|
||||
const screenX = clientX / clientWidth;
|
||||
const screenY = clientY / clientHeight;
|
||||
const centeredX = screenX * 2 - 1;
|
||||
const centeredY = screenY * 2 - 1;
|
||||
light.position[1] = centeredX;
|
||||
light.position[0] = centeredY;
|
||||
});
|
||||
app.onUpdate((time, app2) => {
|
||||
});
|
||||
var noeShader = frags.normal;
|
||||
var hShader = outerFrags.normal;
|
||||
if (location.search.includes("alt1")) {
|
||||
noeShader = frags.debug;
|
||||
}
|
||||
if (location.search.includes("alt2")) {
|
||||
noeShader = frags.alt2;
|
||||
}
|
||||
if (location.search.includes("alt3")) {
|
||||
hShader = outerFrags.alt3;
|
||||
}
|
||||
new Renderable(app, transformPlane, new MeshRenderer(app, plane_default, outer2(app, hShader), camera).configure({}));
|
||||
new Renderable(app, transformSphere, new MeshRenderer(app, plane_default, noe2(app, noeShader), camera, light).configure({}));
|
||||
app.start();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue