shaders 2.4.76 → 2.4.77
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/Form3D-D3MoN95S.js +574 -0
- package/dist/core/{VideoTexture-Cl-V4Igy.js → VideoTexture-DDnc6aVv.js} +1 -1
- package/dist/core/{WebcamTexture-5b9qf7mC.js → WebcamTexture-rb0dLKSc.js} +1 -1
- package/dist/core/effects/raymarch3d.d.ts +32 -0
- package/dist/core/effects/raymarch3d.d.ts.map +1 -0
- package/dist/core/index.js +61 -60
- package/dist/core/registry.js +61 -60
- package/dist/core/shaderRegistry-9huRXSRI.js +218 -0
- package/dist/core/shaderRegistry.d.ts.map +1 -1
- package/dist/core/shaders/Form3D/index.d.ts +59 -0
- package/dist/core/shaders/Form3D/index.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/index.js +4 -0
- package/dist/core/shaders/Form3D/shapes/box.d.ts +14 -0
- package/dist/core/shaders/Form3D/shapes/box.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/shapes/capsule.d.ts +14 -0
- package/dist/core/shaders/Form3D/shapes/capsule.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/shapes/mobius.d.ts +15 -0
- package/dist/core/shaders/Form3D/shapes/mobius.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/shapes/ribbon.d.ts +14 -0
- package/dist/core/shaders/Form3D/shapes/ribbon.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/shapes/rotation.d.ts +5 -0
- package/dist/core/shaders/Form3D/shapes/rotation.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/shapes/sphere.d.ts +13 -0
- package/dist/core/shaders/Form3D/shapes/sphere.d.ts.map +1 -0
- package/dist/core/shaders/Form3D/shapes/torus.d.ts +14 -0
- package/dist/core/shaders/Form3D/shapes/torus.d.ts.map +1 -0
- package/dist/core/shaders/Glass/index.js +1 -1
- package/dist/core/shaders/GlassTiles/index.js +1 -1
- package/dist/core/shaders/Glitch/index.js +1 -1
- package/dist/core/shaders/Glow/index.js +1 -1
- package/dist/core/shaders/Godrays/index.js +1 -1
- package/dist/core/shaders/Grayscale/index.js +1 -1
- package/dist/core/shaders/Grid/index.js +1 -1
- package/dist/core/shaders/GridDistortion/index.js +1 -1
- package/dist/core/shaders/Group/index.js +1 -1
- package/dist/core/shaders/Halftone/index.js +1 -1
- package/dist/core/shaders/HueShift/index.js +1 -1
- package/dist/core/shaders/ImageTexture/index.js +1 -1
- package/dist/core/shaders/Invert/index.js +1 -1
- package/dist/core/shaders/Kaleidoscope/index.js +1 -1
- package/dist/core/shaders/LensFlare/index.js +1 -1
- package/dist/core/shaders/LinearBlur/index.js +1 -1
- package/dist/core/shaders/LinearGradient/index.js +1 -1
- package/dist/core/shaders/Liquify/index.js +1 -1
- package/dist/core/shaders/Mirror/index.js +1 -1
- package/dist/core/shaders/Neon/index.js +1 -1
- package/dist/core/shaders/Paper/index.js +1 -1
- package/dist/core/shaders/Perspective/index.js +1 -1
- package/dist/core/shaders/Pixelate/index.js +1 -1
- package/dist/core/shaders/Plasma/index.js +1 -1
- package/dist/core/shaders/PolarCoordinates/index.js +1 -1
- package/dist/core/shaders/Polygon/index.js +1 -1
- package/dist/core/shaders/Posterize/index.js +1 -1
- package/dist/core/shaders/ProgressiveBlur/index.js +1 -1
- package/dist/core/shaders/RadialGradient/index.js +1 -1
- package/dist/core/shaders/RectangularCoordinates/index.js +1 -1
- package/dist/core/shaders/Ring/index.js +1 -1
- package/dist/core/shaders/Ripples/index.js +1 -1
- package/dist/core/shaders/RoundedRect/index.js +1 -1
- package/dist/core/shaders/Saturation/index.js +1 -1
- package/dist/core/shaders/Sharpness/index.js +1 -1
- package/dist/core/shaders/Shatter/index.js +1 -1
- package/dist/core/shaders/SimplexNoise/index.js +1 -1
- package/dist/core/shaders/SineWave/index.js +1 -1
- package/dist/core/shaders/SolidColor/index.js +1 -1
- package/dist/core/shaders/Spherize/index.js +1 -1
- package/dist/core/shaders/Spiral/index.js +1 -1
- package/dist/core/shaders/Star/index.js +1 -1
- package/dist/core/shaders/Strands/index.js +1 -1
- package/dist/core/shaders/Stretch/index.js +1 -1
- package/dist/core/shaders/Stripes/index.js +1 -1
- package/dist/core/shaders/StudioBackground/index.js +1 -1
- package/dist/core/shaders/Swirl/index.js +1 -1
- package/dist/core/shaders/TiltShift/index.js +1 -1
- package/dist/core/shaders/Tint/index.js +1 -1
- package/dist/core/shaders/Trapezoid/index.js +1 -1
- package/dist/core/shaders/Tritone/index.js +1 -1
- package/dist/core/shaders/Twirl/index.js +1 -1
- package/dist/core/shaders/Vesica/index.js +1 -1
- package/dist/core/shaders/Vibrance/index.js +1 -1
- package/dist/core/shaders/VideoTexture/index.js +2 -2
- package/dist/core/shaders/WaveDistortion/index.js +1 -1
- package/dist/core/shaders/WebcamTexture/index.js +2 -2
- package/dist/core/shaders/ZoomBlur/index.js +1 -1
- package/dist/core/types.d.ts +1 -1
- package/dist/core/types.d.ts.map +1 -1
- package/dist/react/Form3D.js +180 -0
- package/dist/react/Preview.js +1 -0
- package/dist/react/components/Form3D.d.ts +36 -0
- package/dist/react/components/Form3D.d.ts.map +1 -0
- package/dist/react/engine/Preview.d.ts.map +1 -1
- package/dist/react/index.d.ts +1 -0
- package/dist/react/index.d.ts.map +1 -1
- package/dist/react/index.js +2 -1
- package/dist/react/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/react/utils/generatePresetCode.js +15 -0
- package/dist/registry.js +225 -0
- package/dist/solid/components/Form3D.d.ts +33 -0
- package/dist/solid/components/Form3D.d.ts.map +1 -0
- package/dist/solid/components/Form3D.js +183 -0
- package/dist/solid/engine/Preview.d.ts.map +1 -1
- package/dist/solid/engine/Preview.js +64 -62
- package/dist/solid/index.d.ts +1 -0
- package/dist/solid/index.d.ts.map +1 -1
- package/dist/solid/index.js +122 -120
- package/dist/solid/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/solid/utils/generatePresetCode.js +15 -0
- package/dist/svelte/components/Form3D.svelte.d.ts +23 -0
- package/dist/svelte/{generatePresetCode-AulpMcSM.js → generatePresetCode-Bpe8YcaW.js} +15 -0
- package/dist/svelte/index.d.ts +1 -0
- package/dist/svelte/index.js +443 -296
- package/dist/svelte/source/components/Form3D.svelte +290 -0
- package/dist/svelte/source/engine/Preview.svelte +2 -0
- package/dist/svelte/source/index.js +1 -0
- package/dist/svelte/utils/generatePresetCode.js +1 -1
- package/dist/vue/Form3D.js +3 -0
- package/dist/vue/Form3D.vue_vue_type_script_setup_true_lang.js +173 -0
- package/dist/vue/Preview.vue_vue_type_script_setup_true_lang.js +2 -0
- package/dist/vue/components/Form3D.vue.d.ts +58 -0
- package/dist/vue/components/Form3D.vue.d.ts.map +1 -0
- package/dist/vue/index.d.ts +1 -0
- package/dist/vue/index.d.ts.map +1 -1
- package/dist/vue/index.js +2 -1
- package/dist/vue/utils/generatePresetCode.d.ts.map +1 -1
- package/dist/vue/utils/generatePresetCode.js +15 -0
- package/package.json +19 -1
- package/dist/core/shaderRegistry-BNFvV6rz.js +0 -216
- /package/dist/core/{Glass-Xwagp7_F.js → Glass-CRaFJ-8c.js} +0 -0
- /package/dist/core/{GlassTiles-C3KnN5iI.js → GlassTiles-C3PKMWgp.js} +0 -0
- /package/dist/core/{Glitch-ktKO_KpJ.js → Glitch-MyIU0Bad.js} +0 -0
- /package/dist/core/{Glow-DBifdH__.js → Glow-1ee_R1fA.js} +0 -0
- /package/dist/core/{Godrays-Bh6SzbNk.js → Godrays-CvcPIegU.js} +0 -0
- /package/dist/core/{Grayscale-C3gjFyCl.js → Grayscale-8MPw9PHN.js} +0 -0
- /package/dist/core/{Grid-CtdGngeK.js → Grid-D64zkkku.js} +0 -0
- /package/dist/core/{GridDistortion-S4PnLDHk.js → GridDistortion-B7PGORW3.js} +0 -0
- /package/dist/core/{Group-B9Y-gzFl.js → Group-DoOcKuhW.js} +0 -0
- /package/dist/core/{Halftone-B5YmZMs3.js → Halftone-Co7P2SWy.js} +0 -0
- /package/dist/core/{HueShift-BTUePzBC.js → HueShift-Bvd9VTak.js} +0 -0
- /package/dist/core/{ImageTexture-Bx-3RaXB.js → ImageTexture-BJ1udc62.js} +0 -0
- /package/dist/core/{Invert-CRnAnmF1.js → Invert-5VR-fNRw.js} +0 -0
- /package/dist/core/{Kaleidoscope-ChPX5tcw.js → Kaleidoscope-B0McCEhc.js} +0 -0
- /package/dist/core/{LensFlare-Ci0e-hkw.js → LensFlare-DXgpPyJK.js} +0 -0
- /package/dist/core/{LinearBlur-DaW1vgWS.js → LinearBlur-CBl0B23J.js} +0 -0
- /package/dist/core/{LinearGradient-D7APN-6R.js → LinearGradient-C0FT7-Lc.js} +0 -0
- /package/dist/core/{Liquify-CeIq9oBd.js → Liquify-Cy6ck3_k.js} +0 -0
- /package/dist/core/{Mirror-BYbVTGkj.js → Mirror-DfZBEOUf.js} +0 -0
- /package/dist/core/{Neon-Bt0J1xV_.js → Neon-E8whPM6C.js} +0 -0
- /package/dist/core/{Paper-C2D-Fwp3.js → Paper-DJwBbPxA.js} +0 -0
- /package/dist/core/{Perspective-Bdm0cUQh.js → Perspective-BdHcCgqZ.js} +0 -0
- /package/dist/core/{Pixelate-CTjHHN-r.js → Pixelate-B9x2E0k-.js} +0 -0
- /package/dist/core/{Plasma-CCGtK1Nq.js → Plasma-CMXrHMJv.js} +0 -0
- /package/dist/core/{PolarCoordinates-XCMKSG2_.js → PolarCoordinates-tZbl0VOq.js} +0 -0
- /package/dist/core/{Polygon-bhh40D7s.js → Polygon-B4ab2iAo.js} +0 -0
- /package/dist/core/{Posterize-BI-jQFPl.js → Posterize-Big6cECo.js} +0 -0
- /package/dist/core/{ProgressiveBlur-BJTqGhls.js → ProgressiveBlur-D0ZlHOw4.js} +0 -0
- /package/dist/core/{RadialGradient-iLZnaIxZ.js → RadialGradient-C1Uu5_bL.js} +0 -0
- /package/dist/core/{RectangularCoordinates-BaO9nFBZ.js → RectangularCoordinates-BB7_S4gH.js} +0 -0
- /package/dist/core/{Ring-CVjkjiUD.js → Ring-DVW66Ug0.js} +0 -0
- /package/dist/core/{Ripples-DM_4XyVc.js → Ripples-DeRyNukC.js} +0 -0
- /package/dist/core/{RoundedRect-DIZw7grS.js → RoundedRect-B9y33WS5.js} +0 -0
- /package/dist/core/{Saturation-Sn1JvnA0.js → Saturation-NrGhLp0a.js} +0 -0
- /package/dist/core/{Sharpness-bKBphxzQ.js → Sharpness-DAC9Qnh0.js} +0 -0
- /package/dist/core/{Shatter-BaTW-RUu.js → Shatter-ZIaXf4fs.js} +0 -0
- /package/dist/core/{SimplexNoise-BHkNvira.js → SimplexNoise-mSsE7oXX.js} +0 -0
- /package/dist/core/{SineWave-BiSC-P30.js → SineWave-BAhTQVXp.js} +0 -0
- /package/dist/core/{SolidColor-Cx-mC1as.js → SolidColor-BQnId3qy.js} +0 -0
- /package/dist/core/{Spherize-Do9r5rep.js → Spherize-YvHlKrZy.js} +0 -0
- /package/dist/core/{Spiral-cnUEuXK4.js → Spiral-DUDZyQjj.js} +0 -0
- /package/dist/core/{Star-CYt36zBy.js → Star-DB4dmzyz.js} +0 -0
- /package/dist/core/{Strands-Cv5R6Tve.js → Strands-CF49kt1s.js} +0 -0
- /package/dist/core/{Stretch-Cbg46rCc.js → Stretch-Dkhera5t.js} +0 -0
- /package/dist/core/{Stripes-BFeaEYmE.js → Stripes-BOROXiAH.js} +0 -0
- /package/dist/core/{StudioBackground-DmjrfYQk.js → StudioBackground-DNmf8LGj.js} +0 -0
- /package/dist/core/{Swirl-BnYnaDkG.js → Swirl-C5RQIA6E.js} +0 -0
- /package/dist/core/{TiltShift-CZYvmOJC.js → TiltShift-BgscLSg_.js} +0 -0
- /package/dist/core/{Tint-CpEcvX7Q.js → Tint-CvKUJTtg.js} +0 -0
- /package/dist/core/{Trapezoid-C9JGRsdF.js → Trapezoid-Co8cWZTK.js} +0 -0
- /package/dist/core/{Tritone-zGl8HUq_.js → Tritone-Ss5m7yFO.js} +0 -0
- /package/dist/core/{Twirl-CYwSYwxr.js → Twirl-CF_9ObSp.js} +0 -0
- /package/dist/core/{Vesica-BF2ZOKVA.js → Vesica-C7tcbHbW.js} +0 -0
- /package/dist/core/{Vibrance-MtwpojF5.js → Vibrance-DVWcESAa.js} +0 -0
- /package/dist/core/{WaveDistortion-BOovaVR7.js → WaveDistortion-Caj3cQz7.js} +0 -0
- /package/dist/core/{ZoomBlur-COhLGJIk.js → ZoomBlur-DUrSxwl0.js} +0 -0
- /package/dist/core/{browser-BHtD5nQW.js → browser-daS5XZwr.js} +0 -0
|
@@ -0,0 +1,574 @@
|
|
|
1
|
+
import { c as transformEdges, l as transformPosition } from "./transformations-B5lM6fYX.js";
|
|
2
|
+
import { t as createAnimatedTime } from "./time-DUqSFWvT.js";
|
|
3
|
+
import { Break, Fn, If, Loop, abs, atan, clamp, convertToTexture, cos, dot, float, fract, max, min, mix, normalize, pow, screenUV, sin, uniform, vec2, vec3, vec4, viewportSize } from "three/tsl";
|
|
4
|
+
function applyDistortion3D(childTexture, shape, uniforms, march = {}) {
|
|
5
|
+
const steps = march.steps ?? 96;
|
|
6
|
+
const stepCap = march.stepCap ?? .15;
|
|
7
|
+
const hitEps = march.hitEps ?? .001;
|
|
8
|
+
const maxDistance = march.maxDistance ?? 20;
|
|
9
|
+
const aspect = viewportSize.x.div(viewportSize.y);
|
|
10
|
+
const cx = uniforms.center.uniform.x;
|
|
11
|
+
const cy = uniforms.center.uniform.y.oneMinus();
|
|
12
|
+
const camDist = float(8).sub(uniforms.zoom.uniform.mul(.06));
|
|
13
|
+
const glossAmt = uniforms.glossiness.uniform.mul(.005);
|
|
14
|
+
const lightAmt = uniforms.lighting.uniform.mul(.005);
|
|
15
|
+
const uvMode = uniforms.uvMode.uniform;
|
|
16
|
+
const applyUVMode = (uv$1) => {
|
|
17
|
+
const stretched = clamp(uv$1, 0, 1);
|
|
18
|
+
const mirrored = abs(fract(uv$1.mul(.5)).mul(2).sub(1));
|
|
19
|
+
const wrapped = fract(uv$1);
|
|
20
|
+
const transparentVisible = uv$1.x.lessThan(0).or(uv$1.x.greaterThan(1)).or(uv$1.y.lessThan(0)).or(uv$1.y.greaterThan(1)).select(float(0), float(1));
|
|
21
|
+
return {
|
|
22
|
+
uv: uvMode.lessThan(float(.5)).select(stretched, uvMode.lessThan(float(1.5)).select(uv$1, uvMode.lessThan(float(2.5)).select(mirrored, wrapped))),
|
|
23
|
+
visible: uvMode.lessThan(float(.5)).select(float(1), uvMode.lessThan(float(1.5)).select(transparentVisible, float(1)))
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
const calcNormal = Fn(([p]) => {
|
|
27
|
+
const h = float(.001);
|
|
28
|
+
const hn = h.negate();
|
|
29
|
+
const k0 = shape.sdf(p.add(vec3(h, hn, hn)));
|
|
30
|
+
const k1 = shape.sdf(p.add(vec3(hn, hn, h)));
|
|
31
|
+
const k2 = shape.sdf(p.add(vec3(hn, h, hn)));
|
|
32
|
+
const k3 = shape.sdf(p.add(vec3(h, h, h)));
|
|
33
|
+
return normalize(vec3(1, -1, -1).mul(k0).add(vec3(-1, -1, 1).mul(k1)).add(vec3(-1, 1, -1).mul(k2)).add(vec3(1, 1, 1).mul(k3)));
|
|
34
|
+
});
|
|
35
|
+
return Fn(() => {
|
|
36
|
+
const uv$1 = screenUV;
|
|
37
|
+
const ro = vec3(0, 0, camDist.negate());
|
|
38
|
+
const focal = float(1.5);
|
|
39
|
+
const rd = normalize(vec3(uv$1.x.sub(cx).mul(aspect), uv$1.y.sub(cy), focal));
|
|
40
|
+
const rayT = float(0).toVar();
|
|
41
|
+
const hit = float(0).toVar();
|
|
42
|
+
Loop(steps, () => {
|
|
43
|
+
const p = ro.add(rd.mul(rayT));
|
|
44
|
+
const d = shape.sdf(p);
|
|
45
|
+
If(d.lessThan(float(hitEps)), () => {
|
|
46
|
+
hit.assign(1);
|
|
47
|
+
Break();
|
|
48
|
+
});
|
|
49
|
+
If(rayT.greaterThan(maxDistance), () => {
|
|
50
|
+
Break();
|
|
51
|
+
});
|
|
52
|
+
rayT.addAssign(min(d, float(stepCap)));
|
|
53
|
+
});
|
|
54
|
+
const hitPos = ro.add(rd.mul(rayT));
|
|
55
|
+
const normal = calcNormal(hitPos);
|
|
56
|
+
const { uv: finalUV, visible: uvVisible } = applyUVMode(shape.surfaceUV(hitPos, normal));
|
|
57
|
+
const surfaceColor = childTexture.sample(finalUV);
|
|
58
|
+
const lightDir = normalize(vec3(.4, .7, -.6));
|
|
59
|
+
const viewDir = rd.negate();
|
|
60
|
+
const diffuse = clamp(dot(normal, lightDir), 0, 1);
|
|
61
|
+
const halfVec = normalize(lightDir.add(viewDir));
|
|
62
|
+
const specPow = glossAmt.mul(256).add(4);
|
|
63
|
+
const specular = pow(clamp(dot(normal, halfVec), 0, 1), specPow).mul(glossAmt).mul(1.5);
|
|
64
|
+
const nDotV = clamp(dot(normal, viewDir), 0, 1);
|
|
65
|
+
const fresnel = pow(float(1).sub(nDotV), float(3)).mul(.5).mul(glossAmt);
|
|
66
|
+
const ambient = float(.35);
|
|
67
|
+
const lit = mix(float(1), ambient.add(diffuse.mul(.65)).add(specular).add(fresnel), lightAmt);
|
|
68
|
+
return vec4(clamp(surfaceColor.rgb.mul(clamp(lit, 0, 3)), 0, 1), hit.mul(surfaceColor.a).mul(uvVisible));
|
|
69
|
+
})();
|
|
70
|
+
}
|
|
71
|
+
var TWIST_SPEED = .08;
|
|
72
|
+
function createRibbonShape(params) {
|
|
73
|
+
const { angleRad, twistAmt, halfW, ribbonWidth, ribbonThickness, twistPhase, t } = params;
|
|
74
|
+
const evalCrossSection = (rpy, pz, xPos) => {
|
|
75
|
+
const twistAngle = xPos.mul(twistAmt).add(twistPhase).add(t.mul(TWIST_SPEED));
|
|
76
|
+
const ca = cos(twistAngle);
|
|
77
|
+
const sa = sin(twistAngle);
|
|
78
|
+
const localU = rpy.mul(ca).add(pz.mul(sa));
|
|
79
|
+
const localV = rpy.mul(sa).negate().add(pz.mul(ca));
|
|
80
|
+
return vec2(max(abs(localU).sub(halfW), 0), localV).length().sub(ribbonThickness);
|
|
81
|
+
};
|
|
82
|
+
const getRotated = (p) => {
|
|
83
|
+
const cosA = cos(angleRad);
|
|
84
|
+
const sinA = sin(angleRad);
|
|
85
|
+
return {
|
|
86
|
+
rpx: p.x.mul(cosA).add(p.y.mul(sinA)),
|
|
87
|
+
rpy: p.x.mul(sinA).negate().add(p.y.mul(cosA))
|
|
88
|
+
};
|
|
89
|
+
};
|
|
90
|
+
const lipschitz = max(halfW.mul(twistAmt), float(1));
|
|
91
|
+
return {
|
|
92
|
+
sdf: Fn(([p]) => {
|
|
93
|
+
const { rpx, rpy } = getRotated(p);
|
|
94
|
+
return evalCrossSection(rpy, p.z, rpx).div(lipschitz);
|
|
95
|
+
}),
|
|
96
|
+
surfaceUV: Fn(([hitPos, _normal]) => {
|
|
97
|
+
const { rpx, rpy } = getRotated(hitPos);
|
|
98
|
+
const twistAngle = rpx.mul(twistAmt).add(twistPhase).add(t.mul(TWIST_SPEED));
|
|
99
|
+
const ca = cos(twistAngle);
|
|
100
|
+
const sa = sin(twistAngle);
|
|
101
|
+
const localUClamped = max(min(rpy.mul(ca).add(hitPos.z.mul(sa)), halfW), halfW.negate());
|
|
102
|
+
return vec2(rpx.mul(.15).add(.5), localUClamped.div(ribbonWidth).add(.5));
|
|
103
|
+
})
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
const rotateX = Fn(([p, a]) => {
|
|
107
|
+
const c = cos(a), s = sin(a);
|
|
108
|
+
return vec3(p.x, p.y.mul(c).sub(p.z.mul(s)), p.y.mul(s).add(p.z.mul(c)));
|
|
109
|
+
});
|
|
110
|
+
const rotateY = Fn(([p, a]) => {
|
|
111
|
+
const c = cos(a), s = sin(a);
|
|
112
|
+
return vec3(p.x.mul(c).add(p.z.mul(s)), p.y, p.x.mul(s).negate().add(p.z.mul(c)));
|
|
113
|
+
});
|
|
114
|
+
const rotateZ = Fn(([p, a]) => {
|
|
115
|
+
const c = cos(a), s = sin(a);
|
|
116
|
+
return vec3(p.x.mul(c).sub(p.y.mul(s)), p.x.mul(s).add(p.y.mul(c)), p.z);
|
|
117
|
+
});
|
|
118
|
+
const createApplyRot = (rotX_u, rotY_u, rotZ_u, spinX, spinY, spinZ) => (p) => rotateZ(rotateX(rotateY(p, rotY_u.add(spinY)), rotX_u.add(spinX)), rotZ_u.add(spinZ));
|
|
119
|
+
function createTorusShape(u) {
|
|
120
|
+
const { outerRadius, tubeRadius, rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ } = u;
|
|
121
|
+
const applyRot = createApplyRot(rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ);
|
|
122
|
+
return {
|
|
123
|
+
sdf: Fn(([p]) => {
|
|
124
|
+
const rp = applyRot(p);
|
|
125
|
+
return vec2(vec2(rp.x, rp.z).length().sub(outerRadius), rp.y).length().sub(tubeRadius);
|
|
126
|
+
}),
|
|
127
|
+
surfaceUV: Fn(([hitPos, _normal]) => {
|
|
128
|
+
const rp = applyRot(hitPos);
|
|
129
|
+
const u$1 = atan(rp.z, rp.x).div(Math.PI * 2).add(.5);
|
|
130
|
+
const ringDist = vec2(rp.x, rp.z).length().sub(outerRadius);
|
|
131
|
+
return vec2(u$1, atan(rp.y, ringDist).div(Math.PI * 2).add(.5));
|
|
132
|
+
})
|
|
133
|
+
};
|
|
134
|
+
}
|
|
135
|
+
function createBoxShape(u) {
|
|
136
|
+
const { halfExtents, rounding, rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ } = u;
|
|
137
|
+
const applyRot = createApplyRot(rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ);
|
|
138
|
+
return {
|
|
139
|
+
sdf: Fn(([p]) => {
|
|
140
|
+
const rp = applyRot(p);
|
|
141
|
+
const q = vec3(abs(rp.x), abs(rp.y), abs(rp.z)).sub(halfExtents).add(rounding);
|
|
142
|
+
const outer = vec3(max(q.x, float(0)), max(q.y, float(0)), max(q.z, float(0))).length();
|
|
143
|
+
const inner = min(max(q.x, max(q.y, q.z)), float(0));
|
|
144
|
+
return outer.add(inner).sub(rounding);
|
|
145
|
+
}),
|
|
146
|
+
surfaceUV: Fn(([hitPos, normal]) => {
|
|
147
|
+
const rp = applyRot(hitPos);
|
|
148
|
+
const rn = applyRot(normal);
|
|
149
|
+
const absNorm = vec3(abs(rn.x), abs(rn.y), abs(rn.z));
|
|
150
|
+
const scaleX = float(.5).div(max(halfExtents.y, halfExtents.z));
|
|
151
|
+
const scaleY = float(.5).div(max(halfExtents.x, halfExtents.z));
|
|
152
|
+
const scaleZ = float(.5).div(max(halfExtents.x, halfExtents.y));
|
|
153
|
+
const uvX = vec2(rp.z, rp.y).mul(scaleX).add(.5);
|
|
154
|
+
const uvY = vec2(rp.x, rp.z).mul(scaleY).add(.5);
|
|
155
|
+
const uvZ = vec2(rp.x, rp.y).mul(scaleZ).add(.5);
|
|
156
|
+
return absNorm.x.greaterThan(absNorm.y).select(absNorm.x.greaterThan(absNorm.z).select(uvX, uvZ), absNorm.y.greaterThan(absNorm.z).select(uvY, uvZ));
|
|
157
|
+
})
|
|
158
|
+
};
|
|
159
|
+
}
|
|
160
|
+
function createSphereShape(u) {
|
|
161
|
+
const { radius, rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ } = u;
|
|
162
|
+
const applyRot = createApplyRot(rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ);
|
|
163
|
+
return {
|
|
164
|
+
sdf: Fn(([p]) => {
|
|
165
|
+
return applyRot(p).length().sub(radius);
|
|
166
|
+
}),
|
|
167
|
+
surfaceUV: Fn(([hitPos, _normal]) => {
|
|
168
|
+
const n = normalize(applyRot(hitPos));
|
|
169
|
+
return vec2(atan(n.z, n.x).div(Math.PI * 2).add(.5), n.y.add(1).mul(.5));
|
|
170
|
+
})
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
function createCapsuleShape(u) {
|
|
174
|
+
const { radius, halfHeight, rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ } = u;
|
|
175
|
+
const applyRot = createApplyRot(rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ);
|
|
176
|
+
return {
|
|
177
|
+
sdf: Fn(([p]) => {
|
|
178
|
+
const rp = applyRot(p);
|
|
179
|
+
const clampedY = clamp(rp.y, halfHeight.negate(), halfHeight);
|
|
180
|
+
return vec3(rp.x, rp.y.sub(clampedY), rp.z).length().sub(radius);
|
|
181
|
+
}),
|
|
182
|
+
surfaceUV: Fn(([hitPos, _normal]) => {
|
|
183
|
+
const rp = applyRot(hitPos);
|
|
184
|
+
const u$1 = atan(rp.z, rp.x).div(Math.PI * 2).add(.5);
|
|
185
|
+
const span = halfHeight.add(radius);
|
|
186
|
+
return vec2(u$1, clamp(rp.y.div(span).mul(.5).add(.5), float(0), float(1)));
|
|
187
|
+
})
|
|
188
|
+
};
|
|
189
|
+
}
|
|
190
|
+
function createMobiusShape(u) {
|
|
191
|
+
const { ringRadius, halfWidth, thickness, rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ } = u;
|
|
192
|
+
const applyRot = createApplyRot(rotX, rotY, rotZ, spinAngleX, spinAngleY, spinAngleZ);
|
|
193
|
+
const mobiusSDF = (rp) => {
|
|
194
|
+
const phi = atan(rp.z, rp.x);
|
|
195
|
+
const spine = vec3(cos(phi).mul(ringRadius), float(0), sin(phi).mul(ringRadius));
|
|
196
|
+
const d = rp.sub(spine);
|
|
197
|
+
const halfPhi = phi.mul(.5);
|
|
198
|
+
const ev = vec3(cos(phi).mul(cos(halfPhi)), sin(halfPhi), sin(phi).mul(cos(halfPhi)));
|
|
199
|
+
const vProj = dot(d, ev);
|
|
200
|
+
return {
|
|
201
|
+
phi,
|
|
202
|
+
vProj,
|
|
203
|
+
du: max(abs(vProj).sub(halfWidth), float(0)),
|
|
204
|
+
perp: d.sub(ev.mul(vProj))
|
|
205
|
+
};
|
|
206
|
+
};
|
|
207
|
+
return {
|
|
208
|
+
sdf: Fn(([p]) => {
|
|
209
|
+
const { du, perp } = mobiusSDF(applyRot(p));
|
|
210
|
+
return vec2(du, perp.length()).length().sub(thickness);
|
|
211
|
+
}),
|
|
212
|
+
surfaceUV: Fn(([hitPos, _normal]) => {
|
|
213
|
+
const { phi, vProj } = mobiusSDF(applyRot(hitPos));
|
|
214
|
+
return vec2(phi.div(Math.PI * 2).add(.5), vProj.div(halfWidth).mul(.5).add(.5));
|
|
215
|
+
})
|
|
216
|
+
};
|
|
217
|
+
}
|
|
218
|
+
const componentDefinition = {
|
|
219
|
+
name: "Form3D",
|
|
220
|
+
category: "Distortions",
|
|
221
|
+
description: "Wraps child content onto a 3D raymarched shape with lighting.",
|
|
222
|
+
requiresRTT: true,
|
|
223
|
+
requiresChild: true,
|
|
224
|
+
props: {
|
|
225
|
+
shape3d: {
|
|
226
|
+
default: JSON.stringify({
|
|
227
|
+
type: "ribbon",
|
|
228
|
+
angle: 0,
|
|
229
|
+
twist: 50,
|
|
230
|
+
width: 40,
|
|
231
|
+
thickness: 20,
|
|
232
|
+
seed: 0
|
|
233
|
+
}),
|
|
234
|
+
description: "3D shape and its parameters",
|
|
235
|
+
ui: {
|
|
236
|
+
type: "shape3d",
|
|
237
|
+
label: "Shape",
|
|
238
|
+
group: "Shape"
|
|
239
|
+
}
|
|
240
|
+
},
|
|
241
|
+
shape3dType: {
|
|
242
|
+
default: "ribbon",
|
|
243
|
+
compileTime: true,
|
|
244
|
+
description: "Active shape type — triggers recompile when shape is switched"
|
|
245
|
+
},
|
|
246
|
+
center: {
|
|
247
|
+
default: {
|
|
248
|
+
x: .5,
|
|
249
|
+
y: .5
|
|
250
|
+
},
|
|
251
|
+
transform: transformPosition,
|
|
252
|
+
description: "Center position of the shape on screen",
|
|
253
|
+
ui: {
|
|
254
|
+
type: "position",
|
|
255
|
+
label: "Center",
|
|
256
|
+
group: "Position"
|
|
257
|
+
}
|
|
258
|
+
},
|
|
259
|
+
zoom: {
|
|
260
|
+
default: 50,
|
|
261
|
+
description: "Camera zoom level",
|
|
262
|
+
ui: {
|
|
263
|
+
type: ["range", "map"],
|
|
264
|
+
min: 10,
|
|
265
|
+
max: 200,
|
|
266
|
+
step: 1,
|
|
267
|
+
label: "Zoom",
|
|
268
|
+
group: "Scene"
|
|
269
|
+
}
|
|
270
|
+
},
|
|
271
|
+
glossiness: {
|
|
272
|
+
default: 50,
|
|
273
|
+
description: "Specular highlight intensity and sharpness",
|
|
274
|
+
ui: {
|
|
275
|
+
type: ["range", "map"],
|
|
276
|
+
min: 0,
|
|
277
|
+
max: 200,
|
|
278
|
+
step: 1,
|
|
279
|
+
label: "Glossiness",
|
|
280
|
+
group: "Lighting"
|
|
281
|
+
}
|
|
282
|
+
},
|
|
283
|
+
lighting: {
|
|
284
|
+
default: 50,
|
|
285
|
+
description: "Overall intensity of lighting effects",
|
|
286
|
+
ui: {
|
|
287
|
+
type: ["range", "map"],
|
|
288
|
+
min: 0,
|
|
289
|
+
max: 200,
|
|
290
|
+
step: 1,
|
|
291
|
+
label: "Lighting",
|
|
292
|
+
group: "Lighting"
|
|
293
|
+
}
|
|
294
|
+
},
|
|
295
|
+
uvMode: {
|
|
296
|
+
default: "stretch",
|
|
297
|
+
transform: transformEdges,
|
|
298
|
+
description: "How to handle UV coordinates at shape boundaries",
|
|
299
|
+
ui: {
|
|
300
|
+
type: "select",
|
|
301
|
+
options: [
|
|
302
|
+
{
|
|
303
|
+
label: "Stretch",
|
|
304
|
+
value: "stretch"
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
label: "Mirror",
|
|
308
|
+
value: "mirror"
|
|
309
|
+
},
|
|
310
|
+
{
|
|
311
|
+
label: "Wrap",
|
|
312
|
+
value: "wrap"
|
|
313
|
+
}
|
|
314
|
+
],
|
|
315
|
+
label: "UV Edges",
|
|
316
|
+
group: "Scene"
|
|
317
|
+
}
|
|
318
|
+
},
|
|
319
|
+
speed: {
|
|
320
|
+
default: 1,
|
|
321
|
+
description: "Animation speed — scales all spin rates",
|
|
322
|
+
ui: {
|
|
323
|
+
type: "range",
|
|
324
|
+
min: -10,
|
|
325
|
+
max: 10,
|
|
326
|
+
step: .1,
|
|
327
|
+
label: "Speed",
|
|
328
|
+
group: "Animation"
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
},
|
|
332
|
+
fragmentNode: (params) => {
|
|
333
|
+
const { uniforms, childNode, onCleanup, onBeforeRender } = params;
|
|
334
|
+
if (!childNode) return vec4(0);
|
|
335
|
+
const childTexture = convertToTexture(childNode);
|
|
336
|
+
onCleanup(() => {
|
|
337
|
+
if (childTexture?.renderTarget?.dispose) childTexture.renderTarget.dispose();
|
|
338
|
+
});
|
|
339
|
+
const t = createAnimatedTime(params, uniforms.speed);
|
|
340
|
+
const shapeType = uniforms.shape3dType.uniform.value;
|
|
341
|
+
const parse = (raw) => {
|
|
342
|
+
try {
|
|
343
|
+
return JSON.parse(typeof raw === "string" ? raw : JSON.stringify(raw));
|
|
344
|
+
} catch {
|
|
345
|
+
return {};
|
|
346
|
+
}
|
|
347
|
+
};
|
|
348
|
+
const cfg0 = parse(uniforms.shape3d.uniform.value);
|
|
349
|
+
const DEG = Math.PI / 180;
|
|
350
|
+
const TAU_RATE = Math.PI * 2 / 10;
|
|
351
|
+
const makeRotSpin = (defaults) => {
|
|
352
|
+
const u_rotX = uniform((cfg0.rotX ?? defaults.rotX ?? 0) * DEG);
|
|
353
|
+
const u_rotY = uniform((cfg0.rotY ?? defaults.rotY ?? 0) * DEG);
|
|
354
|
+
const u_rotZ = uniform((cfg0.rotZ ?? defaults.rotZ ?? 0) * DEG);
|
|
355
|
+
const u_spinAngleX = uniform(0);
|
|
356
|
+
const u_spinAngleY = uniform(0);
|
|
357
|
+
const u_spinAngleZ = uniform(0);
|
|
358
|
+
onBeforeRender(({ deltaTime }) => {
|
|
359
|
+
const cfg = parse(uniforms.shape3d.uniform.value);
|
|
360
|
+
const speed = uniforms.speed.uniform.value;
|
|
361
|
+
u_rotX.value = (cfg.rotX ?? defaults.rotX ?? 0) * DEG;
|
|
362
|
+
u_rotY.value = (cfg.rotY ?? defaults.rotY ?? 0) * DEG;
|
|
363
|
+
u_rotZ.value = (cfg.rotZ ?? defaults.rotZ ?? 0) * DEG;
|
|
364
|
+
u_spinAngleX.value += deltaTime * speed * (cfg.spinX ?? defaults.spinX ?? 0) * TAU_RATE;
|
|
365
|
+
u_spinAngleY.value += deltaTime * speed * (cfg.spinY ?? defaults.spinY ?? 0) * TAU_RATE;
|
|
366
|
+
u_spinAngleZ.value += deltaTime * speed * (cfg.spinZ ?? defaults.spinZ ?? 0) * TAU_RATE;
|
|
367
|
+
});
|
|
368
|
+
return {
|
|
369
|
+
u_rotX,
|
|
370
|
+
u_rotY,
|
|
371
|
+
u_rotZ,
|
|
372
|
+
u_spinAngleX,
|
|
373
|
+
u_spinAngleY,
|
|
374
|
+
u_spinAngleZ
|
|
375
|
+
};
|
|
376
|
+
};
|
|
377
|
+
let shape;
|
|
378
|
+
if (shapeType === "torus") {
|
|
379
|
+
const u_outerR = uniform((cfg0.outerRadius ?? 60) * .008 + .1);
|
|
380
|
+
const u_tubeR = uniform((cfg0.tubeRadius ?? 25) * .006 + .05);
|
|
381
|
+
const { u_rotX, u_rotY, u_rotZ, u_spinAngleX, u_spinAngleY, u_spinAngleZ } = makeRotSpin({
|
|
382
|
+
rotX: -90,
|
|
383
|
+
rotY: 0,
|
|
384
|
+
rotZ: 0,
|
|
385
|
+
spinX: 0,
|
|
386
|
+
spinY: .05,
|
|
387
|
+
spinZ: 0
|
|
388
|
+
});
|
|
389
|
+
onBeforeRender(() => {
|
|
390
|
+
const cfg = parse(uniforms.shape3d.uniform.value);
|
|
391
|
+
u_outerR.value = (cfg.outerRadius ?? 60) * .008 + .1;
|
|
392
|
+
u_tubeR.value = (cfg.tubeRadius ?? 25) * .006 + .05;
|
|
393
|
+
});
|
|
394
|
+
shape = createTorusShape({
|
|
395
|
+
outerRadius: u_outerR,
|
|
396
|
+
tubeRadius: u_tubeR,
|
|
397
|
+
rotX: u_rotX,
|
|
398
|
+
rotY: u_rotY,
|
|
399
|
+
rotZ: u_rotZ,
|
|
400
|
+
spinAngleX: u_spinAngleX,
|
|
401
|
+
spinAngleY: u_spinAngleY,
|
|
402
|
+
spinAngleZ: u_spinAngleZ
|
|
403
|
+
});
|
|
404
|
+
} else if (shapeType === "box") {
|
|
405
|
+
const u_halfX = uniform((cfg0.sizeX ?? 50) * .006);
|
|
406
|
+
const u_halfY = uniform((cfg0.sizeY ?? 50) * .006);
|
|
407
|
+
const u_halfZ = uniform((cfg0.sizeZ ?? 50) * .006);
|
|
408
|
+
const u_rounding = uniform((cfg0.rounding ?? 20) * .001);
|
|
409
|
+
const { u_rotX, u_rotY, u_rotZ, u_spinAngleX, u_spinAngleY, u_spinAngleZ } = makeRotSpin({
|
|
410
|
+
rotX: 15,
|
|
411
|
+
rotY: 0,
|
|
412
|
+
rotZ: 0,
|
|
413
|
+
spinX: 0,
|
|
414
|
+
spinY: .1,
|
|
415
|
+
spinZ: 0
|
|
416
|
+
});
|
|
417
|
+
onBeforeRender(() => {
|
|
418
|
+
const cfg = parse(uniforms.shape3d.uniform.value);
|
|
419
|
+
u_halfX.value = (cfg.sizeX ?? 50) * .006;
|
|
420
|
+
u_halfY.value = (cfg.sizeY ?? 50) * .006;
|
|
421
|
+
u_halfZ.value = (cfg.sizeZ ?? 50) * .006;
|
|
422
|
+
u_rounding.value = (cfg.rounding ?? 20) * .001;
|
|
423
|
+
});
|
|
424
|
+
shape = createBoxShape({
|
|
425
|
+
halfExtents: vec3(u_halfX, u_halfY, u_halfZ),
|
|
426
|
+
rounding: u_rounding,
|
|
427
|
+
rotX: u_rotX,
|
|
428
|
+
rotY: u_rotY,
|
|
429
|
+
rotZ: u_rotZ,
|
|
430
|
+
spinAngleX: u_spinAngleX,
|
|
431
|
+
spinAngleY: u_spinAngleY,
|
|
432
|
+
spinAngleZ: u_spinAngleZ
|
|
433
|
+
});
|
|
434
|
+
} else if (shapeType === "sphere") {
|
|
435
|
+
const u_radius = uniform((cfg0.radius ?? 60) * .008 + .1);
|
|
436
|
+
const { u_rotX, u_rotY, u_rotZ, u_spinAngleX, u_spinAngleY, u_spinAngleZ } = makeRotSpin({
|
|
437
|
+
rotX: 0,
|
|
438
|
+
rotY: 0,
|
|
439
|
+
rotZ: 0,
|
|
440
|
+
spinX: 0,
|
|
441
|
+
spinY: .1,
|
|
442
|
+
spinZ: 0
|
|
443
|
+
});
|
|
444
|
+
onBeforeRender(() => {
|
|
445
|
+
u_radius.value = (parse(uniforms.shape3d.uniform.value).radius ?? 60) * .008 + .1;
|
|
446
|
+
});
|
|
447
|
+
shape = createSphereShape({
|
|
448
|
+
radius: u_radius,
|
|
449
|
+
rotX: u_rotX,
|
|
450
|
+
rotY: u_rotY,
|
|
451
|
+
rotZ: u_rotZ,
|
|
452
|
+
spinAngleX: u_spinAngleX,
|
|
453
|
+
spinAngleY: u_spinAngleY,
|
|
454
|
+
spinAngleZ: u_spinAngleZ
|
|
455
|
+
});
|
|
456
|
+
} else if (shapeType === "capsule") {
|
|
457
|
+
const u_radius = uniform((cfg0.radius ?? 25) * .006 + .05);
|
|
458
|
+
const u_halfHeight = uniform((cfg0.height ?? 80) * .005);
|
|
459
|
+
const { u_rotX, u_rotY, u_rotZ, u_spinAngleX, u_spinAngleY, u_spinAngleZ } = makeRotSpin({
|
|
460
|
+
rotX: 0,
|
|
461
|
+
rotY: 0,
|
|
462
|
+
rotZ: 0,
|
|
463
|
+
spinX: 0,
|
|
464
|
+
spinY: .1,
|
|
465
|
+
spinZ: 0
|
|
466
|
+
});
|
|
467
|
+
onBeforeRender(() => {
|
|
468
|
+
const cfg = parse(uniforms.shape3d.uniform.value);
|
|
469
|
+
u_radius.value = (cfg.radius ?? 25) * .006 + .05;
|
|
470
|
+
u_halfHeight.value = (cfg.height ?? 80) * .005;
|
|
471
|
+
});
|
|
472
|
+
shape = createCapsuleShape({
|
|
473
|
+
radius: u_radius,
|
|
474
|
+
halfHeight: u_halfHeight,
|
|
475
|
+
rotX: u_rotX,
|
|
476
|
+
rotY: u_rotY,
|
|
477
|
+
rotZ: u_rotZ,
|
|
478
|
+
spinAngleX: u_spinAngleX,
|
|
479
|
+
spinAngleY: u_spinAngleY,
|
|
480
|
+
spinAngleZ: u_spinAngleZ
|
|
481
|
+
});
|
|
482
|
+
} else if (shapeType === "mobius") {
|
|
483
|
+
const u_ringRadius = uniform((cfg0.ringRadius ?? 60) * .008 + .1);
|
|
484
|
+
const u_halfWidth = uniform((cfg0.halfWidth ?? 30) * .005);
|
|
485
|
+
const u_thickness = uniform((cfg0.thickness ?? 8) * .001 + .005);
|
|
486
|
+
const { u_rotX, u_rotY, u_rotZ, u_spinAngleX, u_spinAngleY, u_spinAngleZ } = makeRotSpin({
|
|
487
|
+
rotX: -30,
|
|
488
|
+
rotY: 0,
|
|
489
|
+
rotZ: 0,
|
|
490
|
+
spinX: 0,
|
|
491
|
+
spinY: .05,
|
|
492
|
+
spinZ: 0
|
|
493
|
+
});
|
|
494
|
+
onBeforeRender(() => {
|
|
495
|
+
const cfg = parse(uniforms.shape3d.uniform.value);
|
|
496
|
+
u_ringRadius.value = (cfg.ringRadius ?? 60) * .008 + .1;
|
|
497
|
+
u_halfWidth.value = (cfg.halfWidth ?? 30) * .005;
|
|
498
|
+
u_thickness.value = (cfg.thickness ?? 8) * .001 + .005;
|
|
499
|
+
});
|
|
500
|
+
shape = createMobiusShape({
|
|
501
|
+
ringRadius: u_ringRadius,
|
|
502
|
+
halfWidth: u_halfWidth,
|
|
503
|
+
thickness: u_thickness,
|
|
504
|
+
rotX: u_rotX,
|
|
505
|
+
rotY: u_rotY,
|
|
506
|
+
rotZ: u_rotZ,
|
|
507
|
+
spinAngleX: u_spinAngleX,
|
|
508
|
+
spinAngleY: u_spinAngleY,
|
|
509
|
+
spinAngleZ: u_spinAngleZ
|
|
510
|
+
});
|
|
511
|
+
} else {
|
|
512
|
+
const u_angle = uniform((cfg0.angle ?? 0) * DEG);
|
|
513
|
+
const u_twist = uniform((cfg0.twist ?? 50) * .03);
|
|
514
|
+
const u_width = uniform((cfg0.width ?? 40) * .012);
|
|
515
|
+
const u_thickness = uniform((cfg0.thickness ?? 20) * .001 + .01);
|
|
516
|
+
const u_seed = uniform(cfg0.seed ?? 0);
|
|
517
|
+
onBeforeRender(() => {
|
|
518
|
+
const cfg = parse(uniforms.shape3d.uniform.value);
|
|
519
|
+
u_angle.value = (cfg.angle ?? 0) * DEG;
|
|
520
|
+
u_twist.value = (cfg.twist ?? 50) * .03;
|
|
521
|
+
u_width.value = (cfg.width ?? 40) * .012;
|
|
522
|
+
u_thickness.value = (cfg.thickness ?? 20) * .001 + .01;
|
|
523
|
+
u_seed.value = cfg.seed ?? 0;
|
|
524
|
+
});
|
|
525
|
+
shape = createRibbonShape({
|
|
526
|
+
angleRad: u_angle,
|
|
527
|
+
twistAmt: u_twist,
|
|
528
|
+
halfW: u_width.mul(.5),
|
|
529
|
+
ribbonWidth: u_width,
|
|
530
|
+
ribbonThickness: u_thickness,
|
|
531
|
+
twistPhase: u_seed,
|
|
532
|
+
t
|
|
533
|
+
});
|
|
534
|
+
}
|
|
535
|
+
return applyDistortion3D(childTexture, shape, uniforms, {
|
|
536
|
+
ribbon: {
|
|
537
|
+
steps: 128,
|
|
538
|
+
stepCap: .08,
|
|
539
|
+
hitEps: .002
|
|
540
|
+
},
|
|
541
|
+
torus: {
|
|
542
|
+
steps: 96,
|
|
543
|
+
stepCap: .5,
|
|
544
|
+
hitEps: .001
|
|
545
|
+
},
|
|
546
|
+
box: {
|
|
547
|
+
steps: 96,
|
|
548
|
+
stepCap: .5,
|
|
549
|
+
hitEps: .001
|
|
550
|
+
},
|
|
551
|
+
sphere: {
|
|
552
|
+
steps: 64,
|
|
553
|
+
stepCap: 1.5,
|
|
554
|
+
hitEps: .001
|
|
555
|
+
},
|
|
556
|
+
capsule: {
|
|
557
|
+
steps: 64,
|
|
558
|
+
stepCap: 1.5,
|
|
559
|
+
hitEps: .001
|
|
560
|
+
},
|
|
561
|
+
mobius: {
|
|
562
|
+
steps: 96,
|
|
563
|
+
stepCap: .3,
|
|
564
|
+
hitEps: .001
|
|
565
|
+
}
|
|
566
|
+
}[shapeType] ?? {
|
|
567
|
+
steps: 96,
|
|
568
|
+
stepCap: .5,
|
|
569
|
+
hitEps: .001
|
|
570
|
+
});
|
|
571
|
+
}
|
|
572
|
+
};
|
|
573
|
+
var Form3D_default = componentDefinition;
|
|
574
|
+
export { componentDefinition as n, Form3D_default as t };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as needsVideoCanvasWorkaround } from "./browser-
|
|
1
|
+
import { t as needsVideoCanvasWorkaround } from "./browser-daS5XZwr.js";
|
|
2
2
|
import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
|
|
3
3
|
import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
|
|
4
4
|
const componentDefinition = {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { t as needsVideoCanvasWorkaround } from "./browser-
|
|
1
|
+
import { t as needsVideoCanvasWorkaround } from "./browser-daS5XZwr.js";
|
|
2
2
|
import { CanvasTexture, SRGBColorSpace, VideoTexture } from "three/webgpu";
|
|
3
3
|
import { float, max, min, or, screenUV, select, step, texture, uniform, vec2, vec4, viewportSize } from "three/tsl";
|
|
4
4
|
const componentDefinition = {
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Node } from 'three/webgpu';
|
|
2
|
+
import { UniformsMap } from '../types';
|
|
3
|
+
|
|
4
|
+
export interface Shape3D {
|
|
5
|
+
sdf: (p: any) => any;
|
|
6
|
+
surfaceUV: (hitPos: any, normal: any) => any;
|
|
7
|
+
}
|
|
8
|
+
export interface Distortion3DUniforms {
|
|
9
|
+
center: {
|
|
10
|
+
uniform: any;
|
|
11
|
+
};
|
|
12
|
+
zoom: {
|
|
13
|
+
uniform: any;
|
|
14
|
+
};
|
|
15
|
+
glossiness: {
|
|
16
|
+
uniform: any;
|
|
17
|
+
};
|
|
18
|
+
lighting: {
|
|
19
|
+
uniform: any;
|
|
20
|
+
};
|
|
21
|
+
uvMode: {
|
|
22
|
+
uniform: any;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
export interface MarchOptions {
|
|
26
|
+
steps?: number;
|
|
27
|
+
stepCap?: number;
|
|
28
|
+
hitEps?: number;
|
|
29
|
+
maxDistance?: number;
|
|
30
|
+
}
|
|
31
|
+
export declare function applyDistortion3D(childTexture: any, shape: Shape3D, uniforms: Distortion3DUniforms & UniformsMap, march?: MarchOptions): Node;
|
|
32
|
+
//# sourceMappingURL=raymarch3d.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"raymarch3d.d.ts","sourceRoot":"","sources":["../../src/effects/raymarch3d.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,cAAc,CAAA;AACtC,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAEzC,MAAM,WAAW,OAAO;IACpB,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,GAAG,CAAA;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,KAAK,GAAG,CAAA;CAC/C;AAED,MAAM,WAAW,oBAAoB;IACjC,MAAM,EAAM;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAA;IAC5B,IAAI,EAAQ;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAA;IAC5B,UAAU,EAAE;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAA;IAC5B,QAAQ,EAAI;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAA;IAC5B,MAAM,EAAM;QAAE,OAAO,EAAE,GAAG,CAAA;KAAE,CAAA;CAC/B;AAED,MAAM,WAAW,YAAY;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,WAAW,CAAC,EAAE,MAAM,CAAA;CACvB;AAED,wBAAgB,iBAAiB,CAC7B,YAAY,EAAE,GAAG,EACjB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,oBAAoB,GAAG,WAAW,EAC5C,KAAK,GAAE,YAAiB,GACzB,IAAI,CAqHN"}
|