WebGLRenderer: Only compile renderable objects

[vanruesc]

Description

The methods WebGLRenderer.compile() and WebGLRenderer.compileAsync() fail when trying to compile custom objects that define a material property. My use case involves objects that manage child meshes. The composite objects provide access to an inner, shared material via a getter for convenience.

To reproduce the error, uncomment line 47 or 48 in the following example: https://jsfiddle.net/7nvcjwk8/

Uncaught (in promise) TypeError: geometry is undefined
    getParameters WebGLPrograms.js:77
    getProgram WebGLRenderer.js:1631
    prepareMaterial WebGLRenderer.js:921
    compile WebGLRenderer.js:999
    traverse Object3D.js:536
    traverse Object3D.js:542
    compile WebGLRenderer.js:980
    compileAsync WebGLRenderer.js:1019
    init webgl_geometry_cube.html:65
    <anonymous> webgl_geometry_cube.html:37
WebGLPrograms.js:77

This PR changes the compile method to only process renderable objects, similar to how it's done in WebGLRenderer.projectObject().

Alternatively, Object3D could define isRenderable with a default value of false and the renderable sub classes could set this flag to true.

[github-actions]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	685.18 169.62	685.24 169.64	+56 B +14 B
WebGPU	825.96 221.44	825.96 221.44	+0 B +0 B
WebGPU Nodes	825.54 221.34	825.54 221.34	+0 B +0 B

🌳 Bundle size after tree-shaking

Minimal build including a renderer, camera, empty scene, and dependencies.

	Before	After	Diff
WebGL	461.96 111.46	462.02 111.48	+56 B +15 B
WebGPU	525.27 141.52	525.27 141.52	+0 B +0 B
WebGPU Nodes	481.93 131.34	481.93 131.34	+0 B +0 B

[mrdoob]

The methods WebGLRenderer.compile() and WebGLRenderer.compileAsync() fail when trying to compile custom objects that define a material property.

Shouldn't you be using object.userData for that?

[vanruesc]

Shouldn't you be using object.userData for that?

In an end product (i.e. when working with instances of builtin classes) yes, but my use case is a custom class in a library. The class is a custom 3D object that manages an internal InstancedMesh which changes based on certain parameters and userData isn't really suited for defining its public API.