webgl_read_float_buffer.html 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - read float pixels</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="container"></div>
  11. <div id="info">
  12. <a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> read float pixels webgl example<br/>
  13. <span id="values"></span>
  14. </div>
  15. <script id="fragment_shader_screen" type="x-shader/x-fragment">
  16. varying vec2 vUv;
  17. uniform sampler2D tDiffuse;
  18. void main() {
  19. gl_FragColor = texture2D( tDiffuse, vUv );
  20. }
  21. </script>
  22. <script id="fragment_shader_pass_1" type="x-shader/x-fragment">
  23. varying vec2 vUv;
  24. uniform float time;
  25. void main() {
  26. float r = vUv.x;
  27. if( vUv.y < 0.5 ) r = 0.0;
  28. float g = vUv.y;
  29. if( vUv.x < 0.5 ) g = 0.0;
  30. gl_FragColor = vec4( r, g, time, 1.0 );
  31. }
  32. </script>
  33. <script id="vertexShader" type="x-shader/x-vertex">
  34. varying vec2 vUv;
  35. void main() {
  36. vUv = uv;
  37. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  38. }
  39. </script>
  40. <script type="module">
  41. import * as THREE from '../build/three.module.js';
  42. import Stats from './jsm/libs/stats.module.js';
  43. var container, stats;
  44. var cameraRTT, sceneRTT, sceneScreen, renderer, zmesh1, zmesh2;
  45. var mouseX = 0, mouseY = 0;
  46. var windowHalfX = window.innerWidth / 2;
  47. var windowHalfY = window.innerHeight / 2;
  48. var rtTexture, material, quad;
  49. var delta = 0.01;
  50. var valueNode;
  51. init();
  52. animate();
  53. function init() {
  54. container = document.getElementById( 'container' );
  55. cameraRTT = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, - 10000, 10000 );
  56. cameraRTT.position.z = 100;
  57. //
  58. sceneRTT = new THREE.Scene();
  59. sceneScreen = new THREE.Scene();
  60. var light = new THREE.DirectionalLight( 0xffffff );
  61. light.position.set( 0, 0, 1 ).normalize();
  62. sceneRTT.add( light );
  63. light = new THREE.DirectionalLight( 0xffaaaa, 1.5 );
  64. light.position.set( 0, 0, - 1 ).normalize();
  65. sceneRTT.add( light );
  66. rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat, type: THREE.FloatType } );
  67. material = new THREE.ShaderMaterial( {
  68. uniforms: { "time": { value: 0.0 } },
  69. vertexShader: document.getElementById( 'vertexShader' ).textContent,
  70. fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent
  71. } );
  72. var materialScreen = new THREE.ShaderMaterial( {
  73. uniforms: { "tDiffuse": { value: rtTexture.texture } },
  74. vertexShader: document.getElementById( 'vertexShader' ).textContent,
  75. fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
  76. depthWrite: false
  77. } );
  78. var plane = new THREE.PlaneBufferGeometry( window.innerWidth, window.innerHeight );
  79. quad = new THREE.Mesh( plane, material );
  80. quad.position.z = - 100;
  81. sceneRTT.add( quad );
  82. var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
  83. var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
  84. var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );
  85. zmesh1 = new THREE.Mesh( geometry, mat1 );
  86. zmesh1.position.set( 0, 0, 100 );
  87. zmesh1.scale.set( 1.5, 1.5, 1.5 );
  88. sceneRTT.add( zmesh1 );
  89. zmesh2 = new THREE.Mesh( geometry, mat2 );
  90. zmesh2.position.set( 0, 150, 100 );
  91. zmesh2.scale.set( 0.75, 0.75, 0.75 );
  92. sceneRTT.add( zmesh2 );
  93. quad = new THREE.Mesh( plane, materialScreen );
  94. quad.position.z = - 100;
  95. sceneScreen.add( quad );
  96. renderer = new THREE.WebGLRenderer();
  97. renderer.setPixelRatio( window.devicePixelRatio );
  98. renderer.setSize( window.innerWidth, window.innerHeight );
  99. renderer.autoClear = false;
  100. container.appendChild( renderer.domElement );
  101. stats = new Stats();
  102. container.appendChild( stats.dom );
  103. valueNode = document.getElementById( 'values' );
  104. document.addEventListener( 'mousemove', onDocumentMouseMove, false );
  105. }
  106. function onDocumentMouseMove( event ) {
  107. mouseX = ( event.clientX - windowHalfX );
  108. mouseY = ( event.clientY - windowHalfY );
  109. }
  110. //
  111. function animate() {
  112. requestAnimationFrame( animate );
  113. render();
  114. stats.update();
  115. }
  116. function render() {
  117. var time = Date.now() * 0.0015;
  118. if ( zmesh1 && zmesh2 ) {
  119. zmesh1.rotation.y = - time;
  120. zmesh2.rotation.y = - time + Math.PI / 2;
  121. }
  122. if ( material.uniforms[ "time" ].value > 1 || material.uniforms[ "time" ].value < 0 ) {
  123. delta *= - 1;
  124. }
  125. material.uniforms[ "time" ].value += delta;
  126. renderer.clear();
  127. // Render first scene into texture
  128. renderer.setRenderTarget( rtTexture );
  129. renderer.clear();
  130. renderer.render( sceneRTT, cameraRTT );
  131. // Render full screen quad with generated texture
  132. renderer.setRenderTarget( null );
  133. renderer.render( sceneScreen, cameraRTT );
  134. var read = new Float32Array( 4 );
  135. renderer.readRenderTargetPixels( rtTexture, windowHalfX + mouseX, windowHalfY - mouseY, 1, 1, read );
  136. valueNode.innerHTML = 'r:' + read[ 0 ] + '<br/>g:' + read[ 1 ] + '<br/>b:' + read[ 2 ];
  137. }
  138. </script>
  139. </body>
  140. </html>