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

0005: noe alt2

Browse source
This commit is contained in:
41666 2024-05-01 00:05:00 -04:00
parent bdacfc0f5f
commit 56508267a3
4 changed files with 69 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

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

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

43
src/005-thoughtform-hidenoe/shaders/noe-alt2.frag Normal file
View file

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

14
src/005-thoughtform-hidenoe/shaders/noe.ts
View file

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