Addons: Support overview in `WebGLRenderer` and `WebGPURenderer`.

[Mugen87]

Description

This issue is intended for tracking which addons are already supported in WebGPURenderer.

Not all open tasks must be implemented. Certain addons might not be ported to WebGPURenderer because they are outdated (like the old BloomPass) or replaced with different APIs (like MaskPass). Such addons are marked with a ✖️ sign.

If someone wants to migrate a component, it's best to leave a comment so we can add the name to the "Assignee" column. In this way, we avoid the situation where more than one developer works at the same task.

Addon	WebGLRenderer	WebGPURenderer	Assignee
animation/AnimationClipCreator.js	✅	✅	-
animation/CCDIKSolver.js	✅	✅	-
animation/MMDAnimationHelper.js	✅	✅	-
animation/MMDPhysics.js	✅	✅	-
capabilities/WebGL.js	✅	✅	-
capabilities/WebGPU.js	✅	✅	-
controls/ArcballControls.js	✅	✅	-
controls/DragControls.js	✅	✅	-
controls/FirstPersonControls.js	✅	✅	-
controls/FlyControls.js	✅	✅	-
controls/MapControls.js	✅	✅	-
controls/OrbitControls.js	✅	✅	-
controls/PointerLockControls.js	✅	✅	-
controls/TrackballControls.js	✅	✅	-
controls/TransformControls.js	✅	✅	-
csm/CSM.js	✅	✅	-
csm/CSMFrustum.js	✅	✅	-
csm/CSMHelper.js	✅	✅	-
csm/CSMShader.js	✅	✅	-
curves/CurveExtras.js	✅	✅	-
curves/NURBSCurve.js	✅	✅	-
curves/NURBSSurface.js	✅	✅	-
curves/NURBSUtils.js	✅	✅	-
curves/NURBSVolume.js	✅	✅	-
effects/AnaglyphEffect.js	✅	✅ (as AnaglyphPassNode )	-
effects/AsciiEffect.js	✅	✅	-
effects/OutlineEffect.js	✅	✅ (as ToonOutlinePassNode )	-
effects/ParallaxBarrierEffect.js	✅	✅ (as ParallaxBarrierPassNode )	-
effects/PeppersGhostEffect.js	✅	✅	-
effects/StereoEffect.js	✅	✅ (as StereoPassNode)	-
environments/DebugEnvironment.js	✅	✅	-
environments/RoomEnvironment.js	✅	✅	-
exporters/DRACOExporter.js	✅	✅	-
exporters/EXRExporter.js	✅	✅	-
exporters/GLTFExporter.js	✅	✅	-
exporters/KTX2Exporter.js	✅	✅	-
exporters/MMDExporter.js	✅	✅	-
exporters/OBJExporter.js	✅	✅	-
exporters/PLYExporter.js	✅	✅	-
exporters/STLExporter.js	✅	✅	-
exporters/USDZExporter.js	✅	✅	-
geometries/BoxLineGeometry.js	✅	✅	-
geometries/ConvexGeometry.js	✅	✅	-
geometries/DecalGeometry.js	✅	✅	-
geometries/InstancedPointsGeometry.js	✅	✅	-
geometries/ParametricGeometries.js	✅	✅	-
geometries/ParametricGeometry.js	✅	✅	-
geometries/RoundedBoxGeometry.js	✅	✅	-
geometries/TeapotGeometry.js	✅	✅	-
geometries/TextGeometry.js	✅	✅	-
helpers/LightProbeHelper.js	✅	✅ (as LightProbeHelperGPU)	-
helpers/OctreeHelper.js	✅	✅	-
helpers/PositionalAudioHelper.js	✅	✅	-
helpers/RectAreaLightHelper.js	✅	✅	-
helpers/TextureHelper.js	✅	✅ (as TextureHelperGPU)	-
helpers/VertexNormalsHelper.js	✅	✅	-
helpers/VertexTangentsHelper.js	✅	✅	-
helpers/ViewHelper.js	✅	✅	-
interactive/HTMLMesh.js	✅	✅	-
interactive/InteractiveGroup.js	✅	✅	-
interactive/SelectionBox.js	✅	✅	-
interactive/SelectionHelper.js	✅	✅	-
lights/LightProbeGenerator.js	✅	✅	-
lights/RectAreaLightTexturesLib.js	✅	✅	-
lights/RectAreaLightUniformsLib.js	✅	✅	-
lines/Lines.js	✅	✅ (as webgpu/Lines2.js)	-
lines/LineGeometry.js	✅	✅	-
lines/LineMaterial.js	✅	✅ (as Line2NodeMaterial)	-
lines/LineSegments2.js	✅	✅ (as webgpu/LineSegments2.js)	-
lines/LineSegmentsGeometry.js	✅	✅	-
lines/Wireframe.js	✅	✅ (as webgpu/Wireframe.js)	-
lines/WireframeGeometry2.js	✅	✅	-
loaders/3DMLoader.js	✅	✅	-
loaders/3MFLoader.js	✅	✅	-
loaders/AMFLoader.js	✅	✅	-
loaders/BVHLoader.js	✅	✅	-
loaders/ColladaLoader.js	✅	✅	-
loaders/DDSLoader.js	✅	✅	-
loaders/DRACOLoader.js	✅	✅	-
loaders/EXRLoader.js	✅	✅	-
loaders/FBXLoader.js	✅	✅	-
loaders/FontLoader.js	✅	✅	-
loaders/GCodeLoader.js	✅	✅	-
loaders/GLTFLoader.js	✅	✅	-
loaders/HDRCubeTextureLoader.js	✅	✅	-
loaders/IESLoader.js	✅	✅	-
loaders/KMZLoader.js	✅	✅	-
loaders/KTX2Loader.js	✅	✅	-
loaders/KTXLoader.js	✅	✅	-
loaders/LDrawLoader.js	✅	✅	-
loaders/LottieLoader.js	✅	✅	-
loaders/LUT3dlLoader.js	✅	✅	-
loaders/LUTCubeLoader.js	✅	✅	-
loaders/LUTImageLoader.js	✅	✅	-
loaders/LWOLoader.js	✅	✅	-
loaders/MaterialXLoader.js	✅	✅	-
loaders/MD2Loader.js	✅	✅	-
loaders/MDDLoader.js	✅	✅	-
loaders/MTLLoader.js	✅	✅	-
loaders/NRRDLoader.js	✅	✅	-
loaders/OBJLoader.js	✅	✅	-
loaders/PCDLoader.js	✅	✅	-
loaders/PDBLoader.js	✅	✅	-
loaders/PLYLoader.js	✅	✅	-
loaders/PVRLoader.js	✅	✅	-
loaders/RGBELoader.js	✅	✅	-
loaders/RGBMLoader.js	✅	✅	-
loaders/STLLoader.js	✅	✅	-
loaders/SVGLoader.js	✅	✅	-
loaders/TDSLoader.js	✅	✅	-
loaders/TGALoader.js	✅	✅	-
loaders/TIFFLoader.js	✅	✅	-
loaders/TTFLoader.js	✅	✅	-
loaders/UltraHDRLoader.js	✅	✅	-
loaders/USDZLoader.js	✅	✅	-
loaders/VOXLoader.js	✅	✅	-
loaders/VRMLLoader.js	✅	✅	-
loaders/VTKLoader.js	✅	✅	-
loaders/XYZLoader.js	✅	✅	-
materials/MeshGouraudMaterial.js	✅	✖️ (won't be ported)	-
materials/MeshPostProcessingMaterial.js	✅	✖️ (won't be ported)	-
math/Capsule.js	✅	✅	-
math/ColorConverter.js	✅	✅	-
math/ConvexHull.js	✅	✅	-
math/ImprovedNoise.js	✅	✅	-
math/Lut.js	✅	✅	-
math/MeshSurfaceSampler.js	✅	✅	-
math/OBB.js	✅	✅	-
math/Octree.js	✅	✅	-
math/SimplexNoise.js	✅	✅	-
misc/ConvexObjectBreaker.js	✅	✅	-
misc/GPUComputationRenderer.js	✅	✖️ (replaced with compute shaders)	-
misc/Gyroscope.js	✅	✅	-
misc/MD2Character.js	✅	✅	-
misc/MD2CharacterComplex.js	✅	✅	-
misc/MorphAnimMesh.js	✅	✅	-
misc/MorphBlendMesh.js	✅	✅	-
misc/ProgressiveLightMap.js	✅	✅	-
misc/RollerCoaster.js	✅	✅	-
misc/Timer.js	✅	✅	-
misc/TubePainter.js	✅	✅	-
misc/Volume.js	✅	✅	-
misc/VolumeSlice.js	✅	✅	-
modifiers/CurveModifier.js	✅	✅ (as CurveModifierGPU)	-
modifiers/EdgeSplitModifier.js	✅	✅	-
modifiers/SimplifyModifier.js	✅	✅	-
modifiers/TessellateModifier.js	✅	✅	-
objects/GroundedSkybox.js	✅	✅	-
objects/Lensflare.js	✅	✅ (as LensflareMesh)	-
objects/MarchingCubes.js	✅	✅	-
objects/Reflector.js	✅	✅ (as ReflectorNode)	-
objects/ReflectorForSSRPass.js	✅	✖️ (use ReflectorNode instead)	-
objects/Refractor.js	✅	✅ (as viewportSharedTexture())	-
objects/ShadowMesh.js	✅	✅	-
objects/Sky.js	✅	✅ (as objects/SkyMesh)	-
objects/Water.js	✅	✅ (as objects/WaterMesh)	-
objects/Water2.js	✅	✅ (as objects/Water2Mesh)	-
physics/AmmoPhysics.js	✅	✅	-
physics/JoltPhysics.js	✅	✅	-
physics/RapierPhysics.js	✅	✅	-
postprocessing/AfterimagePass.js	✅	✅ (as AfterImageNode)	-
postprocessing/BloomPass.js	✅	✖️ (use BloomNode instead)	-
postprocessing/BokehPass.js	✅	✅ (as DepthOfFieldNode)	-
postprocessing/ClearPass.js	✅	✖️ (won't be ported)	-
postprocessing/CubeTexturePass.js	✅	✖️ (won't be ported)	-
postprocessing/DotScreenPass.js	✅	✅ (as DotScreenNode)	-
postprocessing/EffectComposer.js	✅	✅ (as PostProcessing)	-
postprocessing/FilmPass.js	✅	✅ (as FilmNode)	-
postprocessing/GlitchPass.js	✅	✖️ (won't be ported)	-
postprocessing/GTAOPass.js	✅	✅ (as GTAONode)	-
postprocessing/HalftonePass.js	✅	✖️ (won't be ported)	-
postprocessing/LUTPass.js	✅	✅ (as Lut3DNode)	-
postprocessing/MaskPass.js	✅	✖️ (won't be ported)	-
postprocessing/OutlinePass.js	✅	✅ (as OutlineNode)	-
postprocessing/OutputPass.js	✅	✅ (as RenderOutputNode)	-
postprocessing/Pass.js	✅	✅ (as TempNode or TextureNode)	-
postprocessing/RenderPass.js	✅	✅ (as PassNode)	-
postprocessing/RenderPixelatedPass.js	✅	✅ (as PixelationNode)	-
postprocessing/SAOPass.js	✅	✖️ (use GTAONode instead)	-
postprocessing/SavePass.js	✅	✖️ (won't be ported)	-
postprocessing/ShaderPass.js	✅	✖️ (won't be ported)	-
postprocessing/SMAAPass.js	✅	✅ (as SMAANode)	-
postprocessing/SSAARenderPass.js	✅	✅ (as SSAAPassNode)	-
postprocessing/SSAOPass.js	✅	✖️ (use GTAONode instead)	-
postprocessing/SSRPass.js	✅	✅ (as SSRNode)	-
postprocessing/TAARenderPass.js	✅	✅ (as TRAAPassNode)	-
postprocessing/TexturePass.js	✅	✅ (as TextureNode)	-
postprocessing/UnrealBloomPass.js	✅	✅ (as BloomNode)	-
renderers/CSS2DRenderer.js	✅	✅	-
renderers/CSS3DRenderer.js	✅	✅	-
renderers/Projector.js	✅	✅	-
renderers/SVGRenderer.js	✅	✅	-
shaders	✅	✖️ (only dependencies are ported)	-
textures/FlakesTexture.js	✅	✅	-
utils/BufferGeometryUtils.js	✅	✅	-
utils/GeometryCompressionUtils.js	✅	✅	-
utils/GeometryUtils.js	✅	✅	-
utils/LDrawUtils.js	✅	✅	-
utils/SceneUtils.js	✅	✅	-
utils/ShadowMapViewer.js	✅	✅ (as ShadowMapViewerGPU)	-
utils/SkeletonUtils.js	✅	✅	-
utils/SortUtils.js	✅	✅	-
utils/UVsDebug.js	✅	✅	-
utils/WebGLTextureUtils.js	✅	✅ (as WebGPUTextureUtils)	-
utils/WorkerPool.js	✅	✅	-
webxr/ARButton.js	✅	❌ (dependency to WebGLRenderer)	-
webxr/OculusHandModel.js	✅	✅	-
webxr/OculusHandPointerModel.js	✅	✅	-
webxr/Text2D.js	✅	✅	-
webxr/VRButton.js	✅	❌ (dependency to WebGLRenderer)	-
webxr/XRButton.js	✅	❌ (dependency to WebGLRenderer)	-
webxr/XRControllerModelFactory.js	✅	✅	-
webxr/XREstimatedLight.js	✅	❌ (dependency to WebGLRenderer)	-
webxr/XRHandMeshModel.js	✅	✅	-
webxr/XRHandModelFactory.js	✅	✅	-
webxr/XRHandPrimitiveModel.js	✅	✅	-
webxr/XRPlanes.js	✅	❌ (dependency to WebGLRenderer)	-

[aardgoose]

@Mugen87 I am looking at LensFlare()

[Mugen87]

@cmhhelgeson Are you still interested in working at OutlinePass? If so, I would put your name into the table so the task is reserved.

[cmhhelgeson]

@cmhhelgeson Are you still interested in working at OutlinePass? If so, I would put your name into the table so the task is reserved.

How would I add my name to the table?

[Mugen87]

I can do that for you 👍 .

[aardgoose]

Also looking at CurveModifier (actually working roughly - as always another bug/feature elsewhere found).

Lensflare working apart from some color space etc issues - requires #29400 and #29384 upstream.

[cmhhelgeson]

Hi @Mugen87, I'd actually like to unreserve the OutlineEffect task for the time being.

[aardgoose]

Currently looking at CSM - ordinary mode working - fade to do.