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

0005: thoughtform alt for debug

Browse source
This commit is contained in:
41666 2024-04-30 21:04:09 -04:00
parent 86f1634b5f
commit ed93a41e71
4 changed files with 56 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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;i<maxIterations;i++){z=squareImaginary(z)+(coord*-1.3);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.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;i<maxIterations;i++){z=squareImaginary(z)+(coord*-1.3);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.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();

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

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

43
src/005-thoughtform-hidenoe/shaders/noe-debug.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.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);
}

8
src/005-thoughtform-hidenoe/shaders/noe.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 "./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);