TextureStore example: Prevent aspect distortion (#26651)

examples/webgpu_compute_texture.html

@@ -35,6 +35,7 @@
 			let camera, scene, renderer;
 
 			init();
+			render();
 
 			function init() {
 
@@ -46,7 +47,8 @@
 
 				}
 
-				camera = new THREE.OrthographicCamera( - 1.0, 1.0, 1.0, - 1.0, 0, 1 );
+				const aspect = window.innerWidth / window.innerHeight;
+				camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 2 );
 				camera.position.z = 1;
 
 				scene = new THREE.Scene();
@@ -104,7 +106,6 @@
 				renderer = new WebGPURenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setAnimationLoop( animate );
 				document.body.appendChild( renderer.domElement );
 
 				// compute texture
@@ -116,13 +117,22 @@
 
 			function onWindowResize() {
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+				const aspect = window.innerWidth / window.innerHeight;
+
+				const frustumHeight = camera.top - camera.bottom;
+
+				camera.left = - frustumHeight * aspect / 2;
+				camera.right = frustumHeight * aspect / 2;
+
 				camera.updateProjectionMatrix();
 
-				renderer.setSize( window.innerWidth, window.innerHeight );
+				render();
 
 			}
 
-			function animate() {
+			function render() {
 
 				renderer.render( scene, camera );