feat: Use @typegpu/gl as a fallback when @typegpu/three is made to generate GLSL - #2794
feat: Use @typegpu/gl as a fallback when @typegpu/three is made to generate GLSL#2794iwoplaza wants to merge 3 commits into
Conversation
|
pkg.pr.new packages benchmark commit |
Resolution Time Benchmark---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Random Branching (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.86, 1.78, 3.69, 5.82, 6.69, 11.57, 21.33, 24.35]
line [0.94, 1.85, 4.08, 6.03, 7.05, 11.67, 22.06, 21.52]
line [0.84, 1.92, 4.13, 6.29, 7.30, 11.29, 22.52, 26.07]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Linear Recursion (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.25, 0.54, 0.69, 0.79, 1.04, 1.14, 1.32, 1.48]
line [0.28, 0.49, 0.64, 0.78, 1.14, 1.17, 1.33, 1.51]
line [0.30, 0.56, 0.68, 0.86, 1.19, 1.22, 1.46, 1.52]
---
config:
themeVariables:
xyChart:
plotColorPalette: "#E63946, #3B82F6, #059669"
---
xychart
title "Full Tree (🔴 PR | 🔵 main | 🟢 release)"
x-axis "max depth" [1, 2, 3, 4, 5, 6, 7, 8]
y-axis "time (ms)"
line [0.82, 1.99, 3.48, 6.29, 11.54, 24.44, 50.58, 105.41]
line [0.77, 1.96, 3.57, 6.38, 11.75, 24.07, 52.13, 105.53]
line [0.92, 2.02, 3.84, 6.13, 12.19, 25.74, 55.11, 112.08]
|
Bundle size comparison (
|
| 🟢 Decreased | ➖ Unchanged | 🔴 Increased (max 0.02%) | ❔ Unknown |
|---|---|---|---|
| 0 | 301 | 21 | 0 |
import { ... } in PR vs import * as ... in PR (is the library tree-Shakeable?):
| Test | tsdown |
|---|---|
| tgpu_init.ts | 260.49 kB ( |
| tgpu_initFromDevice.ts | 259.96 kB ( |
| tgpu_resolve.ts | 166.94 kB ( |
| tgpu_resolveWithContext.ts | 166.87 kB ( |
| tgpu_bindGroupLayout.ts | 71.53 kB ( |
| tgpu_mutableAccessor.ts | 67.92 kB ( |
| tgpu_accessor.ts | 67.92 kB ( |
| tgpu_privateVar.ts | 66.66 kB ( |
| tgpu_workgroupVar.ts | 66.66 kB ( |
| tgpu_const.ts | 66.14 kB ( |
| tgpu_lazy.ts | 66.02 kB ( |
| tgpu_fn.ts | 38.45 kB ( |
| tgpu_fragmentFn.ts | 38.45 kB ( |
| tgpu_vertexFn.ts | 38.27 kB ( |
| tgpu_computeFn.ts | 37.97 kB ( |
| tgpu_vertexLayout.ts | 27.08 kB ( |
| tgpu_comptime.ts | 14.77 kB ( |
| tgpu_unroll.ts | 1.66 kB ( |
| tgpu_slot.ts | 1.54 kB ( |
If you wish to run a comparison for other, slower bundlers, run the 'Tree-shake test' from the GitHub Actions menu.
There was a problem hiding this comment.
Pull request overview
This PR updates @typegpu/three to support Three.js’s WebGL backend path by switching TypeGPU shader generation to GLSL via @typegpu/gl when WebGL is detected.
Changes:
- Add
@typegpu/glas a peer dependency and wire it into the workspace lockfile. - Detect WebGL backend in the node builder and apply
glOptions({ shaderStage: 'none' })totgpu.resolve(...)calls. - Adjust function-start detection to handle GLSL-style function declarations.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| pnpm-lock.yaml | Adds @typegpu/gl to the workspace install graph for packages/typegpu-three. |
| packages/typegpu-three/src/typegpu-node.ts | Adds WebGL detection + GLSL generation options via glOptions, and updates function-start detection. |
| packages/typegpu-three/package.json | Declares @typegpu/gl as a peer dependency for @typegpu/three. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| function isWebGL(builder: THREE.NodeBuilder): boolean { | ||
| return 'isWebGLBackend' in builder.renderer.backend && !!builder.renderer.backend.isWebGLBackend; | ||
| } |
| const lastFnStart = findFunctionStart(stageData.codeGeneratedThusFar, functionId, webgl); | ||
|
|
||
| // Extracting the function code | ||
| const fnCode = stageData.codeGeneratedThusFar.slice(lastFnStart).trim(); | ||
|
|
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
The WebGL fallback path now generates GLSL, but forceExplicitVoidReturn is WGSL-only: it appends -> void after the first ), corrupting every GLSL function signature. This prevents the fallback from working. See the inline comment on packages/typegpu-three/src/typegpu-node.ts:193.
Reviewed changes
- Declared
@typegpu/glas a peer dependency and wiredglOptions({ shaderStage: 'none' })into the threetgpu.resolvecalls when the Three.js builder targets WebGL. - Added
isWebGL()backend detection andfindFunctionStart()to handle both WGSL (fn name) and GLSL (type name() function declaration syntax. - Refactored the dependency-assignment resolution in
generate()into a localcodevariable. - Updated
pnpm-lock.yamlto link the new peer dependency.
ℹ️ Docs will need updating once WebGL works
The @typegpu/three docs currently include a caution block stating that the WebGL fallback does not work. Once this feature branch makes it work, that block and the install instructions should be updated.
Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
da61438 to
a010b4f
Compare
|
Follow-up to the review above with line-specific notes:
|
a010b4f to
2cc2d21
Compare
There was a problem hiding this comment.
Important
The @typegpu/gl delta improves GLSL emission, but the WebGL fallback path is still blocked because forceExplicitVoidReturn corrupts GLSL signatures.
Reviewed changes
Reviewed the delta that removed the WORKAROUND_wgslToGlslFixups post-processor from @typegpu/gl and replaced it with native GLSL generation.
- Removed
WORKAROUND_wgslToGlslFixupsfrompackages/typegpu-gl/src/tgpuRootWebGL.tsand its export inpackages/typegpu-gl/src/index.ts. - Added native array support in
packages/typegpu-gl/src/glslGenerator.ts:resolveArraySizeSuffix, array-awaredeclareGlobalConst,declareGlobalVar,typeAnnotation,typeInstantiation, and_emitVarDeclnow emit GLSLtype name[N]declarations andtype[N](...)constructors. - Added a
numericLiteraloverride that emits GLSL literals without WGSLf/hsuffixes, keepsuforu32, and chooses decimal or exponential form for floats. - Updated
@typegpu/gltest snapshots; all 35@typegpu/gltests pass.
⚠️ WebGL fallback remains broken for GLSL signatures
packages/typegpu-three/src/typegpu-node.ts:193 still applies forceExplicitVoidReturn(fnCode) unconditionally. The helper inserts -> void after the first ), which corrupts GLSL function signatures such as float foo() into float foo()-> void. This prevents the WebGL fallback from working even though @typegpu/gl now emits valid GLSL.
Technical details
# forceExplicitVoidReturn corrupts GLSL signatures
## Affected sites
- packages/typegpu-three/src/typegpu-node.ts:193 — `forceExplicitVoidReturn(fnCode)` is applied to GLSL code
## Required outcome
- GLSL function code must not be passed through the WGSL-specific `forceExplicitVoidReturn` helper.
## Suggested approach
Skip `forceExplicitVoidReturn` when `webgl` is true, or detect whether the resolved code already has a return type in a language-agnostic way.Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏
More updates to make Caustics work Unslopify Generate vertex and fragment from shell-less entry functions using only the public APIs Remove unnecessary casting when returning from entry function Generating non-empty vector constructors, without a hacky solution Tweaks and fixes Making tinyest a dep, and typed-binary not a dep Fix exports and alpha bump Unhackify constants and variables Better array handling Export workaround temporarily Update GLSLGenerator to match the new shader gen api Reformat Update usage of makeDereferencable Fixes Docs Fixes on top of fixes
2cc2d21 to
7b889ba
Compare
No description provided.