Merge pull request #21364 from mrdoob/importmaps

Adopt importmaps in WebGPU examples

Author: mrdoob

examples/jsm/renderers/webgpu/WebGPUBackground.js

@@ -1,5 +1,5 @@
 import { GPULoadOp } from './constants.js';
-import { Color } from '../../../../build/three.module.js';
+import { Color } from 'three';
 
 let _clearAlpha;
 const _clearColor = new Color();

examples/jsm/renderers/webgpu/WebGPURenderPipelines.js

@@ -7,7 +7,7 @@ import {
 	NoBlending, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending,
 	AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation,
 	ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor
-} from '../../../../build/three.module.js';
+} from 'three';
 
 class WebGPURenderPipelines {
 

examples/jsm/renderers/webgpu/WebGPURenderer.js

@@ -14,7 +14,7 @@ import WebGPUNodes from './nodes/WebGPUNodes.js';
 
 import glslang from '../../libs/glslang.js';
 
-import { Frustum, Matrix4, Vector3, Color } from '../../../../build/three.module.js';
+import { Frustum, Matrix4, Vector3, Color } from 'three';
 
 console.info( 'THREE.WebGPURenderer: Modified Matrix4.makePerspective() and Matrix4.makeOrtographic() to work with WebGPU, see https://github.com/mrdoob/three.js/issues/20276.' );
 

examples/jsm/renderers/webgpu/WebGPUTextureRenderer.js

@@ -1,4 +1,4 @@
-import { WebGLRenderTarget } from '../../../../build/three.module.js';
+import { WebGLRenderTarget } from 'three';
 
 class WebGPUTextureRenderer {
 

examples/jsm/renderers/webgpu/WebGPUTextures.js

@@ -1,7 +1,7 @@
 import { GPUTextureFormat, GPUAddressMode, GPUFilterMode, GPUTextureDimension } from './constants.js';
 import { CubeTexture, Texture, NearestFilter, NearestMipmapNearestFilter, NearestMipmapLinearFilter, LinearFilter, RepeatWrapping, MirroredRepeatWrapping,
 	RGBFormat, RGBAFormat, RedFormat, RGFormat, RGBA_S3TC_DXT1_Format, RGBA_S3TC_DXT3_Format, RGBA_S3TC_DXT5_Format, UnsignedByteType, FloatType, HalfFloatType, sRGBEncoding
-} from '../../../../build/three.module.js';
+} from 'three';
 import WebGPUTextureUtils from './WebGPUTextureUtils.js';
 
 class WebGPUTextures {

examples/jsm/renderers/webgpu/WebGPUUniform.js

@@ -1,4 +1,4 @@
-import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from '../../../../build/three.module.js';
+import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from 'three';
 
 class WebGPUUniform {
 

examples/webgpu_compute.html

@@ -10,9 +10,16 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute<br/>(Chrome Canary with flag: --enable-unsafe-webgpu)
 		</div>
 
+		<script type="importmap">
+		{
+			"imports": {
+				"three": "../build/three.module.js"
+			}
+		}
+		</script>
 		<script type="module">
 
-			import * as THREE from '../build/three.module.js';
+			import * as THREE from 'three';
 
 			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
 			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';

examples/webgpu_instance_uniform.html

@@ -11,9 +11,16 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu materials
 		</div>
 
+		<script type="importmap">
+		{
+			"imports": {
+				"three": "../build/three.module.js"
+			}
+		}
+		</script>
 		<script type="module">
 
-			import * as THREE from '../build/three.module.js';
+			import * as THREE from 'three';
 
 			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
 			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';

examples/webgpu_materials.html

@@ -11,9 +11,16 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - webgpu materials
 		</div>
 
+		<script type="importmap">
+		{
+			"imports": {
+				"three": "../build/three.module.js"
+			}
+		}
+		</script>
 		<script type="module">
 
-			import * as THREE from '../build/three.module.js';
+			import * as THREE from 'three';
 
 			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
 			import WebGPU from './jsm/renderers/webgpu/WebGPU.js';

examples/webgpu_rtt.html

@@ -10,9 +10,16 @@
 			<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - RTT<br/>(Chrome Canary with flag: --enable-unsafe-webgpu)
 		</div>
 
+		<script type="importmap">
+		{
+			"imports": {
+				"three": "../build/three.module.js"
+			}
+		}
+		</script>
 		<script type="module">
 
-			import * as THREE from '../build/three.module.js';
+			import * as THREE from 'three';
 
 			import WebGPURenderer from './jsm/renderers/webgpu/WebGPURenderer.js';
 			import WebGPUTextureRenderer from './jsm/renderers/webgpu/WebGPUTextureRenderer.js';