webgpu_multiple_rendertargets.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgpu - Multiple Render Targets</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  7. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="info">
  11. <a href="https://threejs.org" target="_blank">threejs</a> webgpu - Multiple RenderTargets
  12. </div>
  13. <script type="importmap">
  14. {
  15. "imports": {
  16. "three": "../build/three.module.js",
  17. "three/addons/": "./jsm/",
  18. "three/nodes": "./jsm/nodes/Nodes.js"
  19. }
  20. }
  21. </script>
  22. <script type="module">
  23. import * as THREE from 'three';
  24. import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  25. //import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
  26. import { NodeMaterial, mix, modelNormalMatrix, normalGeometry, normalize, outputStruct, step, texture, uniform, uv, varying, vec2, vec4 } from 'three/nodes';
  27. import WebGPU from 'three/addons/capabilities/WebGPU.js';
  28. import WebGL from 'three/addons/capabilities/WebGL.js';
  29. import WebGPURenderer from 'three/addons/renderers/webgpu/WebGPURenderer.js';
  30. let camera, scene, renderer, torus;
  31. let renderTarget;
  32. let postScene, postCamera;
  33. /*
  34. const parameters = {
  35. samples: 4,
  36. wireframe: false
  37. };
  38. const gui = new GUI();
  39. gui.add( parameters, 'samples', 0, 4 ).step( 1 );
  40. gui.add( parameters, 'wireframe' );
  41. gui.onChange( render );
  42. */
  43. class WriteGBufferMaterial extends NodeMaterial {
  44. constructor( diffuseTexture ) {
  45. super();
  46. this.lights = false;
  47. this.fog = false;
  48. this.colorSpaced = false;
  49. this.diffuseTexture = diffuseTexture;
  50. const vUv = varying( uv() );
  51. const transformedNormal = modelNormalMatrix.mul( normalGeometry );
  52. const vNormal = varying( normalize( transformedNormal ) );
  53. const repeat = uniform( vec2( 5, 0.5 ) );
  54. const gColor = texture( this.diffuseTexture, vUv.mul( repeat ) );
  55. const gNormal = vec4( normalize( vNormal ), 1.0 );
  56. this.fragmentNode = outputStruct( gColor, gNormal );
  57. }
  58. }
  59. class ReadGBufferMaterial extends NodeMaterial {
  60. constructor( tDiffuse, tNormal ) {
  61. super();
  62. this.lights = false;
  63. this.fog = false;
  64. const vUv = varying( uv() );
  65. const diffuse = texture( tDiffuse, vUv );
  66. const normal = texture( tNormal, vUv );
  67. this.fragmentNode = mix( diffuse, normal, step( 0.5, vUv.x ) );
  68. }
  69. }
  70. init();
  71. function init() {
  72. if ( WebGPU.isAvailable() === false && WebGL.isWebGL2Available() === false ) {
  73. document.body.appendChild( WebGPU.getErrorMessage() );
  74. throw new Error( 'No WebGPU or WebGL2 support' );
  75. }
  76. renderer = new WebGPURenderer( { antialias: true } );
  77. renderer.setPixelRatio( window.devicePixelRatio );
  78. renderer.setSize( window.innerWidth, window.innerHeight );
  79. renderer.setAnimationLoop( render );
  80. document.body.appendChild( renderer.domElement );
  81. // Create a multi render target with Float buffers
  82. renderTarget = new THREE.WebGLMultipleRenderTargets(
  83. window.innerWidth * window.devicePixelRatio,
  84. window.innerHeight * window.devicePixelRatio,
  85. 2,
  86. { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter }
  87. );
  88. // Name our G-Buffer attachments for debugging
  89. renderTarget.texture[ 0 ].name = 'diffuse';
  90. renderTarget.texture[ 1 ].name = 'normal';
  91. // Scene setup
  92. scene = new THREE.Scene();
  93. scene.background = new THREE.Color( 0x222222 );
  94. camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 50 );
  95. camera.position.z = 4;
  96. const loader = new THREE.TextureLoader();
  97. const diffuse = loader.load( 'textures/hardwood2_diffuse.jpg', render );
  98. diffuse.colorSpace = THREE.SRGBColorSpace;
  99. diffuse.wrapS = THREE.RepeatWrapping;
  100. diffuse.wrapT = THREE.RepeatWrapping;
  101. torus = new THREE.Mesh(
  102. new THREE.TorusKnotGeometry( 1, 0.3, 128, 32 ),
  103. new WriteGBufferMaterial( diffuse )
  104. );
  105. scene.add( torus );
  106. // PostProcessing setup
  107. postScene = new THREE.Scene();
  108. postCamera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
  109. postScene.add( new THREE.Mesh(
  110. new THREE.PlaneGeometry( 2, 2 ),
  111. new ReadGBufferMaterial( renderTarget.texture[ 0 ], renderTarget.texture[ 1 ] )
  112. ) );
  113. // Controls
  114. new OrbitControls( camera, renderer.domElement );
  115. window.addEventListener( 'resize', onWindowResize );
  116. }
  117. function onWindowResize() {
  118. camera.aspect = window.innerWidth / window.innerHeight;
  119. camera.updateProjectionMatrix();
  120. renderer.setSize( window.innerWidth, window.innerHeight );
  121. const dpr = renderer.getPixelRatio();
  122. renderTarget.setSize( window.innerWidth * dpr, window.innerHeight * dpr );
  123. }
  124. function render( time ) {
  125. /*
  126. // Feature not yet working
  127. renderTarget.samples = parameters.samples;
  128. scene.traverse( function ( child ) {
  129. if ( child.material !== undefined ) {
  130. child.material.wireframe = parameters.wireframe;
  131. }
  132. } );
  133. */
  134. torus.rotation.y = ( time / 1000 ) * .4;
  135. // render scene into target
  136. renderer.setRenderTarget( renderTarget );
  137. renderer.render( scene, camera );
  138. // render post FX
  139. renderer.setRenderTarget( null );
  140. renderer.render( postScene, postCamera );
  141. }
  142. </script>
  143. </body>
  144. </html>