Importing WebGL-only or WebGPU-only

kzhsw · September 10, 2025, 3:21am

Background

As recent development babylon.js is making dual-version shaders, one for WebGL, and one for WebGPU. But the shaders are imported via side effect and can not be tree-shaked by bundlers, that makes final packaged size grow in recent versions.

Here is a graph from webpack-bundle-analyzer that shows both Shaders and ShadersWGSL are kept in the final package, and takes considerable size.

Proposal

Add WebGL-only and WebGPU-only variants for each index.ts file, taking Meshes/index.ts for example:

github.com/BabylonJS/Babylon.js

packages/dev/core/src/Meshes/index.ts

447517cdb


      
          export * from "./mesh.vertexData.subdivide";

          import "./thinInstanceMesh";

          // eslint-disable-next-line no-duplicate-imports

          export * from "./thinInstanceMesh";

          export * from "./Node/index";

          export * from "./GaussianSplatting/gaussianSplattingMesh";

          

          // LineMesh

          export * from "../Shaders/color.fragment";

          export * from "../Shaders/color.vertex";

          export * from "../ShadersWGSL/color.fragment";

          export * from "../ShadersWGSL/color.vertex";

          

          // MeshUVSPaceRenderer

          export * from "../Shaders/meshUVSpaceRenderer.vertex";

          export * from "../Shaders/meshUVSpaceRenderer.fragment";

          export * from "../Shaders/meshUVSpaceRendererMasker.vertex";

          export * from "../Shaders/meshUVSpaceRendererMasker.fragment";

          export * from "../Shaders/meshUVSpaceRendererFinaliser.fragment";

          export * from "../Shaders/meshUVSpaceRendererFinaliser.vertex";

          export * from "../ShadersWGSL/meshUVSpaceRenderer.vertex";

A Meshes/index-webgl.ts contains only import/exports from Shaders, and a Meshes/index-webgpu.ts contains only import/exports from ShadersWGSL.
Also, when importing from other index file, like export * from "./fluidRenderer/index"; would be export * from "./fluidRenderer/index-webgl"; or export * from "./fluidRenderer/index-webgpu";

Alternative

Do not import from any index file, and manually import only files needed, which could be a major overhead to downstream devs.
Compile shaders to space-efficient compressed bytecode format and recover at runtime, which could make loading slower.
Configure bundlers to ignore shader imports globally

sebavan · September 10, 2025, 4:32pm

This is the current recommendation and @ryantrem / @RaananW have a plan for easier management.

Topic		Replies	Views
Treeshaking ShaderWGSL Questions treeshaking	2	44	July 17, 2025
Webgpu treeshaking Questions webgpu	18	623	January 22, 2024
Babylon.js bundle size for reasonably minimal project? Questions	12	2263	November 18, 2022
Bundle size, ES6 import Questions	4	544	July 3, 2020
ES6 Tree Shaking build large bundle size Questions documentation	4	1095	May 25, 2021

Importing WebGL-only or WebGPU-only

Background

Proposal

Alternative

Related topics