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

006: the edge...

Browse source
This commit is contained in:
41666 2024-05-05 04:23:00 -04:00
parent 02547b888f
commit c2db0d5f37
16 changed files with 4461 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
README.md
View file

@ -13,6 +13,7 @@ https://art.mekanoe.com
- [./003-scene](https://art.mekanoe.com/003-scene)
- [./004-a-new-leaf](https://art.mekanoe.com/004-a-new-leaf)
- [./005-thoughtform-hidenoe](https://art.mekanoe.com/005-thoughtform-hidenoe)
- [./006-the-edge](https://art.mekanoe.com/006-the-edge)
## Development

75
html/003-scene/main.js
View file

@ -1 +1,74 @@
import{a as N,b as U} from"../chunk-13ea4b456137d650.js";import{c as I,d as J,e as c,f as S,g as R,h as Y,i as p,j as q,l as f,m as k,n as w} from"../chunk-419236ae98000e07.js";var s=new k({colors:null,faces:new Uint8Array([0,1,2,1,0,3,0,2,4,0,4,5,0,5,3,1,3,6,2,1,7,4,2,8,9,10,11,12,9,13,1,6,7,2,7,8,10,8,11,9,11,13,12,13,6,7,6,14,8,7,14,11,8,14,13,11,14,6,13,14,15,16,17,17,16,18,19,20,21,18,16,22,22,16,15,23,24,25]),name:"src/meshes/trianglething/trianglething.ply",normals:new Float32Array([0,-1,0.00000083803394,-0.5257306,-0.44721383,0.723607,-0.8506533,-0.44721213,-0.2763879,0.5257306,-0.4472139,0.723607,0,-0.44721153,-0.89442825,0.8506533,-0.4472122,-0.27638793,0,0.44721153,0.89442825,-0.8506533,0.44721216,0.27638793,-0.5257306,0.4472139,-0.72360694,0.8506533,-0.4472122,-0.27638793,0,-0.44721153,-0.89442825,0.5257306,0.4472139,-0.72360694,0.5257306,-0.4472139,0.723607,0.85065323,0.4472122,0.2763879,0,1,-0.0000008165459,0.8999471,-0.43599886,0.00000024163015,-0.00000005150958,1,0,-0.000000030203772,-0.4359989,0.8999472,-0.8999471,-0.4359989,-0.00000024291313,-0.000000030203772,-0.4359989,0.8999472,0,-0.43599886,-0.8999471,0.8999471,-0.43599886,0.00000024163015,0,-0.43599886,-0.8999471,-0.000000030203772,-0.4359989,0.8999472,-0.8999471,-0.4359989,-0.00000024291313,0,-0.43599886,-0.8999471]),positions:new Float32Array([0,2.6090002,0,-0.36800402,2.9959497,0.50652003,-0.5954481,2.9959497,-0.19346952,0.36800402,2.9959497,0.50652003,0,2.9959497,-0.62609756,0.5954481,2.9959497,-0.19346952,0,3.6220508,0.62609756,-0.5954481,3.6220508,0.19346952,-0.36800402,3.6220508,-0.50652003,0.5954481,2.9959497,-0.19346952,0,2.9959497,-0.62609756,0.36800402,3.6220508,-0.50652003,0.36800402,2.9959497,0.50652003,0.5954481,3.6220508,0.19346952,0,4.0090003,0,1.0000001,0,0,0,2.5000002,0,-0.000000043711395,0,1.0000001,-1.0000001,0,-0.00000008742279,-0.000000043711395,0,1.0000001,0.000000011924882,0,-1.0000001,1.0000001,0,0,0.000000011924882,0,-1.0000001,-0.000000043711395,0,1.0000001,-1.0000001,0,-0.00000008742279,0.000000011924882,0,-1.0000001]),uvs:new Float32Array([0.7660872,0.5526656,0.6449925,0.52286637,0.8418907,0.33128682,0.60803074,0.79587877,0.96344936,0.40123126,0.8416727,0.64077806,0.50600564,0.49428308,0.704352,0.31297976,0.79145527,0.046412975,0.35179207,0.26814616,0.47356877,0.028599411,0.5382167,0.15491244,0.118150145,0.42324704,0.40614995,0.39580685,0.5992601,0.26365823,0.4984935,0.5027367,0.24900003,0.7522302,-0.00049349666,0.50273675,-0.00049346685,1.0017238,0.7633698,0.99398905,0.99752307,0.7598357,0.9975231,0.99398893,0.49849355,1.0017238,0.99646366,0.7612665,0.99646366,0.9954198,0.7623104,0.9954198]),vertexCount:26});var V="../texture0-577d5216cdab32bc.png";var g="../texture1-e472a46c91711e86.png";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"}},W=(b)=>new p(Q).vertex(U).fragment(q).app(b);var B=new Y({fov:45}),X=new J([2,3,3],c([-15,40,0])),l=new J([2,2,0]),a=new J(S(0),c([0,0,0])),L=new J([-3,0,1],c([0,0,0])),F=new N(B,V),y=new N(B,g);B.onUpdate(()=>{I.rotateY(a.rotation,a.rotation,0.001),I.rotateY(L.rotation,L.rotation,0.001)});new w(B,a,new R(B,s,W(B).addTexture("texture0",F).addTexture("texture1",y),X,l).configure({}));new w(B,L,new R(B,s,f(B).addTexture("texture0",F).addTexture("texture1",y),X,l).configure({}));B.start();
import {
Texture,
basic_vertex_rounding_default
} from "../chunk-701c22b55952babe.js";
import {
Mesh,
MeshRenderer,
Renderable,
Shader,
Transform,
WebGLApp,
basic,
basic_default,
etoq,
exports_quat,
v3
} from "../chunk-652b721da622b7d9.js";
// src/meshes/trianglething/trianglething.ts
var trianglething_default = new Mesh({
colors: null,
faces: new Uint8Array([0, 1, 2, 1, 0, 3, 0, 2, 4, 0, 4, 5, 0, 5, 3, 1, 3, 6, 2, 1, 7, 4, 2, 8, 9, 10, 11, 12, 9, 13, 1, 6, 7, 2, 7, 8, 10, 8, 11, 9, 11, 13, 12, 13, 6, 7, 6, 14, 8, 7, 14, 11, 8, 14, 13, 11, 14, 6, 13, 14, 15, 16, 17, 17, 16, 18, 19, 20, 21, 18, 16, 22, 22, 16, 15, 23, 24, 25]),
name: "src/meshes/trianglething/trianglething.ply",
normals: new Float32Array([0, -1, 0.00000083803394, -0.5257306, -0.44721383, 0.723607, -0.8506533, -0.44721213, -0.2763879, 0.5257306, -0.4472139, 0.723607, 0, -0.44721153, -0.89442825, 0.8506533, -0.4472122, -0.27638793, 0, 0.44721153, 0.89442825, -0.8506533, 0.44721216, 0.27638793, -0.5257306, 0.4472139, -0.72360694, 0.8506533, -0.4472122, -0.27638793, 0, -0.44721153, -0.89442825, 0.5257306, 0.4472139, -0.72360694, 0.5257306, -0.4472139, 0.723607, 0.85065323, 0.4472122, 0.2763879, 0, 1, -0.0000008165459, 0.8999471, -0.43599886, 0.00000024163015, -0.00000005150958, 1, 0, -0.000000030203772, -0.4359989, 0.8999472, -0.8999471, -0.4359989, -0.00000024291313, -0.000000030203772, -0.4359989, 0.8999472, 0, -0.43599886, -0.8999471, 0.8999471, -0.43599886, 0.00000024163015, 0, -0.43599886, -0.8999471, -0.000000030203772, -0.4359989, 0.8999472, -0.8999471, -0.4359989, -0.00000024291313, 0, -0.43599886, -0.8999471]),
positions: new Float32Array([0, 2.6090002, 0, -0.36800402, 2.9959497, 0.50652003, -0.5954481, 2.9959497, -0.19346952, 0.36800402, 2.9959497, 0.50652003, 0, 2.9959497, -0.62609756, 0.5954481, 2.9959497, -0.19346952, 0, 3.6220508, 0.62609756, -0.5954481, 3.6220508, 0.19346952, -0.36800402, 3.6220508, -0.50652003, 0.5954481, 2.9959497, -0.19346952, 0, 2.9959497, -0.62609756, 0.36800402, 3.6220508, -0.50652003, 0.36800402, 2.9959497, 0.50652003, 0.5954481, 3.6220508, 0.19346952, 0, 4.0090003, 0, 1.0000001, 0, 0, 0, 2.5000002, 0, -0.000000043711395, 0, 1.0000001, -1.0000001, 0, -0.00000008742279, -0.000000043711395, 0, 1.0000001, 0.000000011924882, 0, -1.0000001, 1.0000001, 0, 0, 0.000000011924882, 0, -1.0000001, -0.000000043711395, 0, 1.0000001, -1.0000001, 0, -0.00000008742279, 0.000000011924882, 0, -1.0000001]),
uvs: new Float32Array([0.7660872, 0.5526656, 0.6449925, 0.52286637, 0.8418907, 0.33128682, 0.60803074, 0.79587877, 0.96344936, 0.40123126, 0.8416727, 0.64077806, 0.50600564, 0.49428308, 0.704352, 0.31297976, 0.79145527, 0.046412975, 0.35179207, 0.26814616, 0.47356877, 0.028599411, 0.5382167, 0.15491244, 0.118150145, 0.42324704, 0.40614995, 0.39580685, 0.5992601, 0.26365823, 0.4984935, 0.5027367, 0.24900003, 0.7522302, -0.00049349666, 0.50273675, -0.00049346685, 1.0017238, 0.7633698, 0.99398905, 0.99752307, 0.7598357, 0.9975231, 0.99398893, 0.49849355, 1.0017238, 0.99646366, 0.7612665, 0.99646366, 0.9954198, 0.7623104, 0.9954198]),
vertexCount: 26
});
// src/meshes/trianglething/textures/texture0.png
var texture0_default = "../texture0-577d5216cdab32bc.png";
// src/meshes/trianglething/textures/texture1.png
var texture1_default = "../texture1-e472a46c91711e86.png";
// src/common-shaders/basic-vertex-rounding.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 basicVertexRounding = (app) => new Shader(basicShaderConfig).vertex(basic_vertex_rounding_default).fragment(basic_default).app(app);
// src/003-scene/main.ts
var app = new WebGLApp({ fov: 45 });
var camera = new Transform([2, 3, 3], etoq([-15, 40, 0]));
var light = new Transform([2, 2, 0]);
var transform2 = new Transform(v3(0), etoq([0, 0, 0]));
var transform22 = new Transform([-3, 0, 1], etoq([0, 0, 0]));
var trithingTexture = new Texture(app, texture0_default);
var trithingTextureNormals = new Texture(app, texture1_default);
app.onUpdate(() => {
exports_quat.rotateY(transform2.rotation, transform2.rotation, 0.001);
exports_quat.rotateY(transform22.rotation, transform22.rotation, 0.001);
});
new Renderable(app, transform2, new MeshRenderer(app, trianglething_default, basicVertexRounding(app).addTexture("texture0", trithingTexture).addTexture("texture1", trithingTextureNormals), camera, light).configure({}));
new Renderable(app, transform22, new MeshRenderer(app, trianglething_default, basic(app).addTexture("texture0", trithingTexture).addTexture("texture1", trithingTextureNormals), camera, light).configure({}));
app.start();

142
html/004-a-new-leaf/main.js
View file

File diff suppressed because one or more lines are too long

2
html/005-thoughtform-hidenoe/index.html
View file

@ -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>

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

@ -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();

29
html/006-the-edge/index.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<meta charset="utf-8" />
<title>com.mekanoe.art // 006-the-edge</title>
<style>
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
color: white;
font-family: Atkinson Hyperlegible, sans-serif;
}
main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<link rel="stylesheet" href="/work.css" />
<main>
<canvas id="canvas" width="1280" height="720"></canvas>
<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="/005-thoughtform-hidenoe">⇠ 005-thoughtform-hidenoe</a></nav>
</main>
<script src="/006-the-edge/main.js" type="module"></script>

199
html/006-the-edge/main.js Normal file
View file

@ -0,0 +1,199 @@
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/006-the-edge/shaders/rail.frag
var rail_default = `#version 300 es
precision highp float;
uniform float u_time;
in vec2 uv0;
out vec4 fragColor;
const float railWidth = 0.041666;
const float railWiggle = 0.0015;
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v) {
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
const float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0, 0, 0, 0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
void main() {
vec2 cUV = uv0 * 2.0 - 1.0;
float sintime = sin(u_time * 0.0001);
// wiggle
float vY = cos(uv0.y * sintime);
float vX = sin(uv0.x * sintime * 10000.0);
float vibes = railWiggle * snoise(vec3(vY, vX, u_time));
// smoothly calculate the wiggle
float rail = 1.0 - step(abs(pow(abs(cUV.y) - railWidth + vibes, 30.0)), 1.0);
// snip out wrapping
// if (abs(cUV.y) > railWidth * 2.0) {
// discard;
// }
vec4 railColor = vec4(rail);
// albedo (staticy colorful <333)
float noise = abs(sin(snoise(uv0.xxy * 10000. * u_time)));
float noise2 = abs(sin(snoise(uv0.yxy * 10000.* u_time)));
float noise3 = abs(sin(snoise(uv0.xyx * 10000. * u_time)));
railColor.rgb -= (vec3(noise, noise2, noise3) * 0.3);
// simplex noise based on 3 moire spirals
float theta = atan(cUV.y, uv0.x);
float spiral = sin(10.0 * (sqrt(19.0 + (15.0 * sintime * 0.05))) - 1000.0 * theta - 0.01 * u_time * 0.0001);
float theta2 = atan(1.0-(cUV.y / 1000.0), uv0.x - (railWidth / 20.));
float spiral2 = sin(10.0 * (sqrt(20.0 + u_time * 0.00001) - 10000.0 * theta2 - 0.01 * u_time * 0.0001));
float theta3 = atan(1.0 - uv0.y/10.0, uv0.x);
float spiral3 = sin(100.0 * (sqrt(100.0 + uv0.y) - 100000.0 * theta3 - 0.01 * sintime * 0.0001));
float sparkleNoise = snoise(vec3(spiral, spiral2, u_time * 0.00001));
fragColor.r = step(abs(spiral2 * spiral * sparkleNoise), mix(0.0333, 0.0666, abs(uv0.y + sin(u_time * 0.00001))));
fragColor.r *= pow(1.0 - abs(cUV.y), 3.0) * abs(spiral3);
fragColor.r *= 10.0;
if (cUV.y > 0.0) {
fragColor.r = 0.0;
}
// fragColor.g = spiral3;
// keep within 0-1
fragColor = clamp(vec4(fragColor + railColor), vec4(0), vec4(1));
}
`;
// src/006-the-edge/shaders/rail.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 rail2 = (app, fragShader = rail_default) => new Shader(basicShaderConfig).vertex(basic_default).fragment(fragShader).app(app);
// src/006-the-edge/main.ts
var app = new WebGLApp({ fov: 45 });
var camera = new Transform([0, 0, 2], etoq([0, 0, 0]));
var transformRail = new Transform(v3(0), etoq(v3(0)), [1000, 1, 1]);
new Renderable(app, transformRail, new MeshRenderer(app, plane_default, rail2(app), camera).configure({}));
app.start();

5
html/chunk-13ea4b456137d650.js
View file

@ -1,5 +0,0 @@
class n{_;u;y;texture=null;width=0;height=0;constructor(_,u,y={}){this.app=_;this.url=u;this.config=y}setImage(_,u,y){return this.texture=_,this.width=u,this.height=y,this}async loadImage(){if(this.url==="manual"){if(this.texture===null)throw new Error("manual specified, but texture was not ready...");return}if(this.texture!==null)return;this.app.telemetry?.addTextures(-1),this.app.loading("Fetching textures...");const _=new Image;return new Promise((u,y)=>{_.onload=async()=>{this.texture=await createImageBitmap(_,{imageOrientation:"flipY"}),this.width=this.texture.width,this.height=this.texture.height,this.app.telemetry?.addTextures(2),u(void 0)},_.onerror=(f)=>{this.app.telemetry?.addTextures(1),y(new Error(`texture load of ${this.url} failed: ${f.toString()}`))},_.src=this.url})}}var q=`#version 300 es
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;in vec4 a_vertex;in vec2 a_uv0;in vec3 a_normal;in vec4 a_vertex_color;out vec2 uv0;out vec3 normal;out vec4 vertex_color;out vec3 light_pos;
#define ROUNDING_FACTOR 230.0f
void main(){mat4 worldInv=inverse(u_view);mat4 MVW=u_projection*u_view*u_object_to_world;vec4 realPosition=MVW*a_vertex;realPosition.xyz=round(vec3(realPosition.xyz*ROUNDING_FACTOR))/ROUNDING_FACTOR;gl_Position=realPosition;uv0=a_uv0;normal=normalize(mat3(worldInv)*a_normal);vertex_color=a_vertex_color;light_pos=normalize(mat3(u_object_to_world_inv)*u_light_0);}`;
export{n as a,q as b};

5
html/chunk-419236ae98000e07.js
View file

File diff suppressed because one or more lines are too long

3366
html/chunk-652b721da622b7d9.js Normal file
View file

File diff suppressed because it is too large Load diff

89
html/chunk-701c22b55952babe.js Normal file
View file

@ -0,0 +1,89 @@
// src/renderer/texture.ts
class Texture {
app;
url;
config;
texture = null;
width = 0;
height = 0;
constructor(app, url, config = {}) {
this.app = app;
this.url = url;
this.config = config;
}
setImage(data, width, height) {
this.texture = data;
this.width = width;
this.height = height;
return this;
}
async loadImage() {
if (this.url === "manual") {
if (this.texture === null) {
throw new Error("manual specified, but texture was not ready...");
}
return;
}
if (this.texture !== null) {
return;
}
this.app.telemetry?.addTextures(-1);
this.app.loading("Fetching textures...");
const image = new Image;
return new Promise((resolve, reject) => {
image.onload = async () => {
this.texture = await createImageBitmap(image, {
imageOrientation: "flipY"
});
this.width = this.texture.width;
this.height = this.texture.height;
this.app.telemetry?.addTextures(2);
resolve(undefined);
};
image.onerror = (e) => {
this.app.telemetry?.addTextures(1);
reject(new Error(`texture load of ${this.url} failed: ${e.toString()}`));
};
image.src = this.url;
});
}
}
// src/common-shaders/basic-vertex-rounding.vert
var basic_vertex_rounding_default = `#version 300 es
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 vec4 a_vertex;
in vec2 a_uv0;
in vec3 a_normal;
in vec4 a_vertex_color;
out vec2 uv0;
out vec3 normal;
out vec4 vertex_color;
out vec3 light_pos;
#define ROUNDING_FACTOR 230.0f
void main() {
mat4 worldInv = inverse(u_view);
mat4 MVW = u_projection * u_view * u_object_to_world;
vec4 realPosition = MVW * a_vertex;
realPosition.xyz = round(vec3(realPosition.xyz * ROUNDING_FACTOR)) / ROUNDING_FACTOR;
gl_Position = realPosition;
uv0 = a_uv0;
normal = normalize(mat3(worldInv) * a_normal);
vertex_color = a_vertex_color;
light_pos = normalize(mat3(u_object_to_world_inv) * u_light_0);
}`;
export { Texture, basic_vertex_rounding_default };

16
html/chunk-a6d990db9d9ec9c3.js Normal file
View file

@ -0,0 +1,16 @@
import {
Mesh
} from "./chunk-652b721da622b7d9.js";
// src/meshes/plane.ts
var plane_default = new Mesh({
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
});
export { plane_default };

1
html/index.html
View file

@ -31,6 +31,7 @@
</header>
<section id="works">
<ul>
<li><a href="/006-the-edge">./006-the-edge</a></li>
<li><a href="/005-thoughtform-hidenoe">./005-thoughtform-hidenoe</a></li>
<li><a href="/004-a-new-leaf">./004-a-new-leaf</a></li>
<li><a href="/003-scene">./003-scene</a></li>

25
src/006-the-edge/main.ts Normal file
View file

@ -0,0 +1,25 @@
import { outer } from "../005-thoughtform-hidenoe/shaders/outer";
import plane from "../meshes/plane";
import { MeshRenderer } from "../renderer/mesh-renderer";
import { Renderable } from "../renderer/renderable";
import { etoq, Transform, v3 } from "../renderer/transform";
import { WebGLApp } from "../renderer/webgl";
import { rail } from "./shaders/rail";
const app = new WebGLApp({ fov: 45 });
const camera = new Transform([0, 0, 2], etoq([0, 0, 0]));
const transformRail = new Transform(v3(0), etoq(v3(0)), [1000, 1, 1]);
// new Renderable(
// app,
// transformRail,
// new MeshRenderer(app, plane, outer(app), camera).configure({})
// );
new Renderable(
app,
transformRail,
new MeshRenderer(app, plane, rail(app), camera).configure({})
);
app.start();

152
src/006-the-edge/shaders/rail.frag Normal file
View file

@ -0,0 +1,152 @@
#version 300 es
precision highp float;
uniform float u_time;
in vec2 uv0;
out vec4 fragColor;
const float railWidth = 0.041666;
const float railWiggle = 0.0015;
vec3 mod289(vec3 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 mod289(vec4 x) {
return x - floor(x * (1.0 / 289.0)) * 289.0;
}
vec4 permute(vec4 x) {
return mod289(((x*34.0)+1.0)*x);
}
vec4 taylorInvSqrt(vec4 r)
{
return 1.79284291400159 - 0.85373472095314 * r;
}
float snoise(vec3 v) {
const vec2 C = vec2(1.0/6.0, 1.0/3.0) ;
const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
// First corner
vec3 i = floor(v + dot(v, C.yyy) );
vec3 x0 = v - i + dot(i, C.xxx) ;
// Other corners
vec3 g = step(x0.yzx, x0.xyz);
vec3 l = 1.0 - g;
vec3 i1 = min( g.xyz, l.zxy );
vec3 i2 = max( g.xyz, l.zxy );
// x0 = x0 - 0.0 + 0.0 * C.xxx;
// x1 = x0 - i1 + 1.0 * C.xxx;
// x2 = x0 - i2 + 2.0 * C.xxx;
// x3 = x0 - 1.0 + 3.0 * C.xxx;
vec3 x1 = x0 - i1 + C.xxx;
vec3 x2 = x0 - i2 + C.yyy; // 2.0*C.x = 1/3 = C.y
vec3 x3 = x0 - D.yyy; // -1.0+3.0*C.x = -0.5 = -D.y
// Permutations
i = mod289(i);
vec4 p = permute( permute( permute(
i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
+ i.y + vec4(0.0, i1.y, i2.y, 1.0 ))
+ i.x + vec4(0.0, i1.x, i2.x, 1.0 ));
// Gradients: 7x7 points over a square, mapped onto an octahedron.
// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
const float n_ = 0.142857142857; // 1.0/7.0
vec3 ns = n_ * D.wyz - D.xzx;
vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,7*7)
vec4 x_ = floor(j * ns.z);
vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N)
vec4 x = x_ *ns.x + ns.yyyy;
vec4 y = y_ *ns.x + ns.yyyy;
vec4 h = 1.0 - abs(x) - abs(y);
vec4 b0 = vec4( x.xy, y.xy );
vec4 b1 = vec4( x.zw, y.zw );
//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
vec4 s0 = floor(b0)*2.0 + 1.0;
vec4 s1 = floor(b1)*2.0 + 1.0;
vec4 sh = -step(h, vec4(0, 0, 0, 0));
vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy ;
vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww ;
vec3 p0 = vec3(a0.xy,h.x);
vec3 p1 = vec3(a0.zw,h.y);
vec3 p2 = vec3(a1.xy,h.z);
vec3 p3 = vec3(a1.zw,h.w);
//Normalise gradients
vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3)));
p0 *= norm.x;
p1 *= norm.y;
p2 *= norm.z;
p3 *= norm.w;
// Mix final noise value
vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0);
m = m * m;
return 42.0 * dot( m*m, vec4( dot(p0,x0), dot(p1,x1),
dot(p2,x2), dot(p3,x3) ) );
}
void main() {
vec2 cUV = uv0 * 2.0 - 1.0;
float sintime = sin(u_time * 0.0001);
// wiggle
float vY = cos(uv0.y * sintime);
float vX = sin(uv0.x * sintime * 10000.0);
float vibes = railWiggle * snoise(vec3(vY, vX, u_time));
// smoothly calculate the wiggle
float rail = 1.0 - step(abs(pow(abs(cUV.y) - railWidth + vibes, 30.0)), 1.0);
// snip out wrapping
// if (abs(cUV.y) > railWidth * 2.0) {
// discard;
// }
vec4 railColor = vec4(rail);
// albedo (staticy colorful <333)
float noise = abs(sin(snoise(uv0.xxy * 10000. * u_time)));
float noise2 = abs(sin(snoise(uv0.yxy * 10000.* u_time)));
float noise3 = abs(sin(snoise(uv0.xyx * 10000. * u_time)));
railColor.rgb -= (vec3(noise, noise2, noise3) * 0.3);
// simplex noise based on 3 moire spirals
float theta = atan(cUV.y, uv0.x);
float spiral = sin(10.0 * (sqrt(19.0 + (15.0 * sintime * 0.05))) - 1000.0 * theta - 0.01 * u_time * 0.0001);
float theta2 = atan(1.0-(cUV.y / 1000.0), uv0.x - (railWidth / 20.));
float spiral2 = sin(10.0 * (sqrt(20.0 + u_time * 0.00001) - 10000.0 * theta2 - 0.01 * u_time * 0.0001));
float theta3 = atan(1.0 - uv0.y/10.0, uv0.x);
float spiral3 = sin(100.0 * (sqrt(100.0 + uv0.y) - 100000.0 * theta3 - 0.01 * sintime * 0.0001));
float sparkleNoise = snoise(vec3(spiral, spiral2, u_time * 0.00001));
fragColor.r = step(abs(spiral2 * spiral * sparkleNoise), mix(0.0333, 0.0666, abs(uv0.y + sin(u_time * 0.00001))));
fragColor.r *= pow(1.0 - abs(cUV.y), 3.0) * abs(spiral3);
fragColor.r *= 10.0;
if (cUV.y > 0.0) {
fragColor.r = 0.0;
}
// fragColor.g = spiral3;
// keep within 0-1
fragColor = clamp(vec4(fragColor + railColor), vec4(0), vec4(1));
}

35
src/006-the-edge/shaders/rail.ts Normal file
View file

@ -0,0 +1,35 @@
import { Shader, ShaderConfig } from "../../renderer/shader";
import { WebGLApp } from "../../renderer/webgl";
import vert from "../../common-shaders/basic.vert";
import frag from "./rail.frag";
export const basicShaderConfig: ShaderConfig = {
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",
},
};
// export const outerFrags = {
// normal: frag,
// alt3: fragAlt3,
// };
export const rail = (app: WebGLApp, fragShader: string = frag) =>
new Shader(basicShaderConfig).vertex(vert).fragment(fragShader).app(app);