diff --git a/src/005-thoughtform-hidenoe/main.ts b/src/005-thoughtform-hidenoe/main.ts new file mode 100644 index 0000000..01869e0 --- /dev/null +++ b/src/005-thoughtform-hidenoe/main.ts @@ -0,0 +1,40 @@ +import { MeshRenderer } from "../renderer/mesh-renderer"; +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 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)); +const transformSphere = new Transform(v3(0), etoq([0, 180, 180]), v3(0.6)); + +// app.onUpdate((time, app) => { +// // const wiggle = 40 * (Math.sin(time) * 0.001); +// // camera.position = [wiggle, 2, 4 - wiggle]; +// }); + +new Renderable( + app, + transformPlane, + new MeshRenderer(app, plane, outer(app), camera).configure({}) +); + +new Renderable( + app, + transformSphere, + new MeshRenderer(app, plane, noe(app), camera).configure({}) +); + +// createGizmo(app, camera, light); + +app.start(); diff --git a/src/005-thoughtform-hidenoe/shaders/noe.frag b/src/005-thoughtform-hidenoe/shaders/noe.frag new file mode 100644 index 0000000..23f9e04 --- /dev/null +++ b/src/005-thoughtform-hidenoe/shaders/noe.frag @@ -0,0 +1,38 @@ +#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; + +// float r = length(m); + // float a = atan(m.y, m.x); + // float v = sin(100.*(sqrt(r)-0.02*a-.3*t)); + // return clamp(v,0.,1.); + +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, 7.0); + fragColor = vec4(0.0, spiral, edgeLightZone, 1.0); +} diff --git a/src/005-thoughtform-hidenoe/shaders/noe.ts b/src/005-thoughtform-hidenoe/shaders/noe.ts new file mode 100644 index 0000000..2c1aa6d --- /dev/null +++ b/src/005-thoughtform-hidenoe/shaders/noe.ts @@ -0,0 +1,30 @@ +import { Shader, ShaderConfig } from "../../renderer/shader"; +import { WebGLApp } from "../../renderer/webgl"; +import vert from "../../common-shaders/basic.vert"; +import frag from "./noe.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 noe = (app: WebGLApp) => + new Shader(basicShaderConfig).vertex(vert).fragment(frag).app(app); diff --git a/src/005-thoughtform-hidenoe/shaders/outer.frag b/src/005-thoughtform-hidenoe/shaders/outer.frag new file mode 100644 index 0000000..9b1296e --- /dev/null +++ b/src/005-thoughtform-hidenoe/shaders/outer.frag @@ -0,0 +1,39 @@ +#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() { + // 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.a = 1.0; +} diff --git a/src/005-thoughtform-hidenoe/shaders/outer.ts b/src/005-thoughtform-hidenoe/shaders/outer.ts new file mode 100644 index 0000000..c81534f --- /dev/null +++ b/src/005-thoughtform-hidenoe/shaders/outer.ts @@ -0,0 +1,30 @@ +import { Shader, ShaderConfig } from "../../renderer/shader"; +import { WebGLApp } from "../../renderer/webgl"; +import vert from "../../common-shaders/basic.vert"; +import frag from "./outer.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 outer = (app: WebGLApp) => + new Shader(basicShaderConfig).vertex(vert).fragment(frag).app(app);