Examples: Update screenshots for now working WebGPU (webgl backend) examples. (#27007)

* update examples

* update screenshots

---------

Co-authored-by: aardgoose <[email protected]>

examples/webgpu_instance_mesh.html

@@ -31,6 +31,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			let camera, scene, renderer, stats;
@@ -44,11 +46,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

examples/webgpu_morphtargets.html

@@ -32,6 +32,8 @@
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			let container, camera, scene, renderer, mesh;
@@ -40,11 +42,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

examples/webgpu_skinning.html

@@ -30,6 +30,8 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			let camera, scene, renderer;
@@ -40,11 +42,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

examples/webgpu_skinning_instancing.html

@@ -30,6 +30,8 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			let camera, scene, renderer;
@@ -40,11 +42,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

examples/webgpu_skinning_points.html

@@ -30,6 +30,8 @@
 			import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
 			import WebGPU from 'three/addons/capabilities/WebGPU.js';
+			import WebGL from 'three/addons/capabilities/WebGL.js';
+
 			import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
 
 			let camera, scene, renderer;
@@ -40,11 +42,11 @@
 
 			function init() {
 
-				if ( WebGPU.isAvailable() === false ) {
+				if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
 
 					document.body.appendChild( WebGPU.getErrorMessage() );
 
-					throw new Error( 'No WebGPU support' );
+					throw new Error( 'No WebGPU or WebGL2 support' );
 
 				}
 

test/e2e/puppeteer.js

@@ -116,20 +116,15 @@ const exceptionList = [
 	'webgpu_compute_texture',
 	'webgpu_compute_texture_pingpong',
 	'webgpu_cubemap_dynamic',
-	'webgpu_instance_mesh',
 	'webgpu_loader_gltf',
 	'webgpu_loader_gltf_compressed',
 	'webgpu_loader_gltf_iridescence',
 	'webgpu_loader_gltf_sheen',
 	'webgpu_materials',
 	'webgpu_materials_video',
-	'webgpu_morphtargets',
 	'webgpu_particles',
 	'webgpu_sandbox',
 	'webgpu_shadowmap',
-	'webgpu_skinning',
-	'webgpu_skinning_instancing',
-	'webgpu_skinning_points',
 	'webgpu_sprites',
 	'webgpu_tsl_editor',
 	'webgpu_video_panorama'