Testing WebGPURenderer backwards compatibility

[mrdoob]

[github-actions[bot]]

📦 Bundle size

Full ESM build, minified and gzipped.

	Before	After	Diff
WebGL	338.63 79.03	567.31 156.89	+228.69 kB +77.86 kB
WebGPU	567.29 156.89	9.29 3.04	-558.01 kB -153.85 kB
WebGPU Nodes	565.9 156.64	565.9 156.64	+0 B +0 B

🌳 Bundle size after tree-shaking

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

	Before	After	Diff
WebGL	470.05 113.73	639.31 173.15	+169.26 kB +59.42 kB
WebGPU	638.76 172.87	638.76 172.87	+0 B +0 B
WebGPU Nodes	593.4 162.16	593.4 162.16	+0 B +0 B

[sunag]

Example	Available	Notes
webgl_animation_keyframes	✅	Fixed https://github.com/mrdoob/three.js/pull/29959
webgl_animation_skinning_blending	✅
webgl_animation_skinning_additive_blending	✅
webgl_animation_skinning_ik	⚠️	The girl's hand sphere is not rendering the environment.
webgl_animation_skinning_morph	✅
webgl_animation_multiple	✅
webgl_camera	⚠️	The scissor area does not constrain the region cleared. https://github.com/mrdoob/three.js/pull/26930#discussion_r1359233591
webgl_camera_array	✅
webgl_camera_logarithmicdepthbuffer	✅
webgl_clipping	🔧	Need to migrate to THREE.ClippingGroup() https://github.com/mrdoob/three.js/pull/28237
webgl_clipping_advanced	🔧	Need to migrate to THREE.ClippingGroup() https://github.com/mrdoob/three.js/pull/28237
webgl_clipping_intersection	🔧	Need to migrate to THREE.ClippingGroup() https://github.com/mrdoob/three.js/pull/28237
webgl_clipping_stencil	🔧	Need to migrate to THREE.ClippingGroup() https://github.com/mrdoob/three.js/pull/28237
webgl_decals	✅
webgl_depth_texture	⛔	Need to migrate to TSL
webgl_effects_anaglyph	⛔	Need to migrate to TSL
webgl_effects_ascii	✅
webgl_effects_parallaxbarrier	⛔	Need to migrate to TSL
webgl_effects_peppersghost	✅
webgl_effects_stereo	⚠️	Ratio different.
webgl_framebuffer_texture	⚠️	flip-y
webgl_geometries	✅
webgl_geometries_parametric	✅
webgl_geometry_colors	✅
webgl_geometry_colors_lookuptable	✅
webgl_geometry_convex	✅
webgl_geometry_csg	❓	WGSL error
webgl_geometry_cube	✅
webgl_geometry_dynamic	✅
webgl_geometry_extrude_shapes	✅
webgl_geometry_extrude_splines	✅
webgl_geometry_minecraft	✅
webgl_geometry_nurbs	✅
webgl_geometry_shapes	✅
webgl_geometry_spline_editor	❓	WGSL error
webgl_geometry_teapot	✅
webgl_geometry_terrain	✅
webgl_geometry_terrain_raycast	✅
webgl_geometry_text	✅
webgl_geometry_text_shapes	✅
webgl_geometry_text_stroke	✅
webgl_helpers	✅
webgl_instancing_morph	✅
webgl_instancing_dynamic	✅
webgl_instancing_performance	✅
webgl_instancing_raycast	✅
webgl_instancing_scatter	✅
webgl_interactive_buffergeometry	✅
webgl_interactive_cubes	✅
webgl_interactive_cubes_gpu	❓	WebGPU error
webgl_interactive_cubes_ortho	✅
webgl_interactive_lines	✅
webgl_interactive_points	⛔	Need to migrate to TSL
webgl_interactive_raycasting_points	✅
webgl_interactive_voxelpainter	✅
webgl_layers	✅
webgl_lensflares	🔧	Need to migrate to https://github.com/mrdoob/three.js/pull/29715
webgl_lightprobe	✅
webgl_lightprobe_cubecamera	❓	WebGPURenderer error
webgl_lights_hemisphere	🔍	Different sky color?
webgl_lights_physical	✅
webgl_lights_pointlights	✅
webgl_lights_spotlight	✅
webgl_lights_spotlights	✅
webgl_lights_rectarealight	🔧	Needs to migrate to https://github.com/mrdoob/three.js/pull/28580
webgl_lines_colors	✅
webgl_lines_dashed	❓	WGSLNodeBuilder error
webgl_lines_fat	🔧	Need to migrate to https://github.com/mrdoob/three.js/pull/26704
webgl_lines_fat_raycasting	🔧	Need to migrate to https://github.com/mrdoob/three.js/pull/26704
webgl_lines_fat_wireframe	🔧	Need to migrate to https://github.com/mrdoob/three.js/pull/26704
webgl_loader_3dm	✅
webgl_loader_3ds	✅
webgl_loader_3mf	✅
webgl_loader_3mf_materials	✅
webgl_loader_amf	✅
webgl_loader_bvh	✅
webgl_loader_collada	✅
webgl_loader_collada_kinematics	✅
webgl_loader_collada_skinning	✅
webgl_loader_draco	✅
webgl_loader_fbx	✅
webgl_loader_fbx_nurbs	✅
webgl_loader_gcode	✅
webgl_loader_gltf	✅
webgl_loader_gltf_avif	✅
webgl_loader_gltf_compressed	🔧	Need to migrate to KTX2Loader.detectSupportAsync( renderer )
webgl_loader_gltf_dispersion	✅
webgl_loader_gltf_instancing	✅
webgl_loader_gltf_iridescence	✅
webgl_loader_gltf_sheen	✅
webgl_loader_gltf_transmission	✅
webgl_loader_gltf_variants	✅
webgl_loader_gltf_anisotropy	✅
webgl_loader_ifc	✅
webgl_loader_imagebitmap	✅
webgl_loader_kmz	✅
webgl_loader_ldraw	✅
webgl_loader_lwo	✅
webgl_loader_md2	✅
webgl_loader_md2_control	✅
webgl_loader_mdd	✅
webgl_loader_mmd	⛔	Need to migrate to TSL
webgl_loader_mmd_pose	⛔	Need to migrate to TSL
webgl_loader_mmd_audio	⛔	Need to migrate to TSL
webgl_loader_nrrd	✅
webgl_loader_obj	✅
webgl_loader_obj_mtl	✅
webgl_loader_pcd	✅
webgl_loader_pdb	✅
webgl_loader_ply	✅
webgl_loader_stl	✅
webgl_loader_svg	✅
webgl_loader_texture_dds	❓	Needs investigation.
webgl_loader_texture_exr	✅
webgl_loader_texture_ultrahdr	✅
webgl_loader_texture_hdr	✅
webgl_loader_texture_ktx	❓	Needs investigation.
webgl_loader_texture_ktx2	❓	Needs investigation.
webgl_loader_texture_lottie	✅
webgl_loader_texture_pvrtc	❓	Needs investigation.
webgl_loader_texture_rgbm	✅
webgl_loader_texture_tga	✅
webgl_loader_texture_tiff	✅
webgl_loader_ttf	✅
webgl_loader_usdz	✅
webgl_loader_vox	✅
webgl_loader_vrml	✅
webgl_loader_vtk	✅
webgl_loader_xyz	✅
webgl_lod	✅
webgl_marchingcubes	⛔	Need to migrate to TSL
webgl_materials_alphahash	❓	THREE.UniformsUtils error ?
webgl_materials_blending	✅
webgl_materials_blending_custom	✅
webgl_materials_bumpmap	✅
webgl_materials_car	✅
webgl_materials_channels	⛔	Need to migrate to TSL
webgl_materials_cubemap	✅
webgl_materials_cubemap_dynamic	✅
webgl_materials_cubemap_refraction	✅
webgl_materials_cubemap_mipmaps	🔍	No all mipmaps was copied.
webgl_materials_cubemap_render_to_mipmaps	❓	Needs investigation.
webgl_materials_displacementmap	✅
webgl_materials_envmaps	✅
webgl_materials_envmaps_exr	✅
webgl_materials_envmaps_groundprojected	✅
webgl_materials_envmaps_hdr	⚠️	Probably renderer initialization.
webgl_materials_matcap	✅
webgl_materials_normalmap	❓	UniformsUtils
webgl_materials_normalmap_object_space	✅
webgl_materials_physical_clearcoat	✅
webgl_materials_physical_transmission	✅
webgl_materials_physical_transmission_alpha	⚠️	HTML background color not preserved.
webgl_materials_subsurface_scattering	🔧	Need to migrate to MeshSSSNodeMaterial
webgl_materials_texture_anisotropy	⚠️	Missing .getMaxAnisotropy()
webgl_materials_texture_canvas	✅
webgl_materials_texture_filters	✅
webgl_materials_texture_manualmipmap	✅
webgl_materials_texture_partialupdate	✅
webgl_materials_texture_rotation	⚠️	Missing .getMaxAnisotropy()
webgl_materials_toon	🔧	Need to migrate to TSL
webgl_materials_video	🔧	Need to migrate to TSL
webgl_materials_video_webcam	✅
webgl_materials_wireframe	🔧	Need to migrate to TSL
webgl_math_obb	✅
webgl_math_orientation_transform	✅
webgl_mesh_batch	✅
webgl_mirror	✅	Need to migrate to TSL
webgl_modifier_curve	⛔	THREE.LineLoop are not supported.
webgl_modifier_curve_instanced	⛔	THREE.LineLoop are not supported.
webgl_modifier_edgesplit	✅
webgl_modifier_simplifier	✅
webgl_modifier_subdivision	⛔	Need to migrate to TSL
webgl_modifier_tessellation	✅
webgl_morphtargets	✅
webgl_morphtargets_face	❓
webgl_morphtargets_horse	✅
webgl_morphtargets_sphere	✅
webgl_morphtargets_webcam	✅
webgl_multiple_elements	✅	https://github.com/mrdoob/three.js/pull/27628
webgl_multiple_elements_text	✅	https://github.com/mrdoob/three.js/pull/27628
webgl_multiple_scenes_comparison	❓	WebGPU Scissor
webgl_multiple_views	❓	WebGPU Scissor
webgl_panorama_cube	✅
webgl_panorama_equirectangular	✅
webgl_points_billboards	⛔	Need to migrate to TSL
webgl_points_dynamic	⛔	Need to migrate to TSL
webgl_points_sprites	⛔	Need to migrate to TSL
webgl_points_waves	⛔	Need to migrate to TSL
webgl_portal	⛔	Need to migrate to TSL
webgl_raycaster_bvh	⛔	Need to migrate to TSL
webgl_raycaster_sprite	✅
webgl_raycaster_texture	✅
webgl_read_float_buffer	✅
webgl_renderer_pathtracer	⛔	Need to migrate to TSL
webgl_refraction	✅	Need to migrate to TSL
webgl_rtt	⚠️	Need to migrate to TSL
webgl_shader	⛔	Need to migrate to TSL
webgl_shader_lava	⛔	Need to migrate to TSL
webgl_shaders_ocean	⛔	Need to migrate to TSL
webgl_shaders_sky	⛔	Need to migrate to TSL
webgl_shadow_contact	⛔	Need to migrate to TSL
webgl_shadowmap	⛔	Need to migrate to TSL
webgl_shadowmap_performance	✅
webgl_shadowmap_pointlight	✅	Fixed https://github.com/mrdoob/three.js/pull/29991
webgl_shadowmap_viewer	⛔	Need to migrate to TSL
webgl_shadowmap_vsm	✅
webgl_shadowmesh	❓
webgl_sprites	✅
webgl_test_memory	✅
webgl_test_memory2	⛔	Need to migrate to TSL
webgl_test_wide_gamut	❓
webgl_tonemapping	⛔	Need to migrate to TSL
webgl_video_kinect	✅
webgl_video_panorama_equirectangular	✅
webgl_water	✅	Need to migrate to TSL
webgl_water_flowmap	✅	Need to migrate to TSL

[di-sukharev]

what is TSL?

[mrdoob]

what is TSL?

https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language