webgpu_compute_texture.html 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. <html lang="en">
  2. <head>
  3. <title>three.js - WebGPU - Compute Texture</title>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  6. <link type="text/css" rel="stylesheet" href="main.css">
  7. </head>
  8. <body>
  9. <div id="info">
  10. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> WebGPU - Compute Texture
  11. <br>Texture generated using GPU Compute.
  12. </div>
  13. <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
  14. <script type="importmap">
  15. {
  16. "imports": {
  17. "three": "../build/three.module.js",
  18. "three/addons/": "./jsm/",
  19. "three/nodes": "./jsm/nodes/Nodes.js"
  20. }
  21. }
  22. </script>
  23. <script type="module">
  24. import * as THREE from 'three';
  25. import { texture, textureStore, wgslFn, instanceIndex, MeshBasicNodeMaterial } from 'three/nodes';
  26. import WebGPU from 'three/addons/capabilities/WebGPU.js';
  27. import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
  28. let camera, scene, renderer;
  29. init();
  30. render();
  31. function init() {
  32. if ( WebGPU.isAvailable() === false ) {
  33. document.body.appendChild( WebGPU.getErrorMessage() );
  34. throw new Error( 'No WebGPU support' );
  35. }
  36. const aspect = window.innerWidth / window.innerHeight;
  37. camera = new THREE.OrthographicCamera( - aspect, aspect, 1, - 1, 0, 2 );
  38. camera.position.z = 1;
  39. scene = new THREE.Scene();
  40. // texture
  41. const width = 512, height = 512;
  42. const storageTexture = new THREE.Texture();
  43. storageTexture.image = { width, height };
  44. storageTexture.magFilter = THREE.LinearFilter;
  45. storageTexture.minFilter = THREE.LinearFilter;
  46. // create function
  47. const computeWGSL = wgslFn( `
  48. fn computeWGSL( storageTex: texture_storage_2d<rgba8unorm, write>, index: u32 ) -> void {
  49. let posX = index % ${ width };
  50. let posY = index / ${ width };
  51. let indexUV = vec2u( posX, posY );
  52. let uv = getUV( posX, posY );
  53. textureStore( storageTex, indexUV, vec4f( uv, 0, 1 ) );
  54. }
  55. fn getUV( posX: u32, posY: u32 ) -> vec2f {
  56. let uv = vec2f( f32( posX ) / ${ width }.0, f32( posY ) / ${ height }.0 );
  57. return uv;
  58. }
  59. ` );
  60. // compute
  61. const computeWGSLCall = computeWGSL( { storageTex: textureStore( storageTexture ), index: instanceIndex } );
  62. const computeNode = computeWGSLCall.compute( width * height );
  63. const material = new MeshBasicNodeMaterial( { color: 0x00ff00 } );
  64. material.colorNode = texture( storageTexture );
  65. const plane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), material );
  66. scene.add( plane );
  67. renderer = new WebGPURenderer( { antialias: true } );
  68. renderer.setPixelRatio( window.devicePixelRatio );
  69. renderer.setSize( window.innerWidth, window.innerHeight );
  70. document.body.appendChild( renderer.domElement );
  71. // compute texture
  72. renderer.compute( computeNode );
  73. window.addEventListener( 'resize', onWindowResize );
  74. }
  75. function onWindowResize() {
  76. renderer.setSize( window.innerWidth, window.innerHeight );
  77. const aspect = window.innerWidth / window.innerHeight;
  78. const frustumHeight = camera.top - camera.bottom;
  79. camera.left = - frustumHeight * aspect / 2;
  80. camera.right = frustumHeight * aspect / 2;
  81. camera.updateProjectionMatrix();
  82. render();
  83. }
  84. function render() {
  85. renderer.render( scene, camera );
  86. }
  87. </script>
  88. </body>
  89. </html>