webgl_materials_texture_hdr.html 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - materials - HDR texture loader</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. <style>
  8. body {
  9. color: #fff;
  10. font-family:Monospace;
  11. font-size:13px;
  12. text-align:center;
  13. font-weight: bold;
  14. background-color: #000;
  15. margin: 0px;
  16. overflow: hidden;
  17. }
  18. #info {
  19. color:#fff;
  20. position: absolute;
  21. top: 0px; width: 100%;
  22. padding: 5px;
  23. }
  24. a { color: red; }
  25. </style>
  26. </head>
  27. <body>
  28. <div id="container"></div>
  29. <div id="info">
  30. <a href="http://threejs.org" target="_blank">three.js</a> - webgl HDR texture loader example -
  31. based on <a href="http://spidergl.org/example.php?id=13" target="_blank">SpiderGL</a>
  32. </div>
  33. <script src="../build/three.js"></script>
  34. <script src="js/loaders/RGBELoader.js"></script>
  35. <script src="js/Detector.js"></script>
  36. <script src="js/libs/stats.min.js"></script>
  37. <!-- HDR fragment shader -->
  38. <script id="fs-hdr" type="x-shader/x-fragment">
  39. uniform sampler2D tDiffuse;
  40. uniform float exposure;
  41. uniform float brightMax;
  42. varying vec2 vUv;
  43. vec3 decode_pnghdr( const in vec4 color ) {
  44. vec4 rgbcolor = vec4( 0.0, 0.0, 0.0, 0.0 );
  45. if ( color.w > 0.0 ) {
  46. float f = pow(2.0, 127.0*(color.w-0.5));
  47. rgbcolor.xyz = color.xyz * f;
  48. }
  49. return rgbcolor.xyz;
  50. /*
  51. // remove gamma correction
  52. vec4 res = color * color;
  53. // decoded RI
  54. float ri = pow( 2.0, res.w * 32.0 - 16.0 );
  55. // decoded HDR pixel
  56. res.xyz = res.xyz * ri;
  57. return res.xyz;
  58. */
  59. }
  60. void main() {
  61. vec4 color = texture2D( tDiffuse, vUv );
  62. color.xyz = decode_pnghdr( color );
  63. // apply gamma correction and exposure
  64. //gl_FragColor = vec4( pow( exposure * color.xyz, vec3( 0.474 ) ), 1.0 );
  65. // Perform tone-mapping
  66. float Y = dot(vec4(0.30, 0.59, 0.11, 0.0), color);
  67. float YD = exposure * (exposure/brightMax + 1.0) / (exposure + 1.0);
  68. color *= YD;
  69. gl_FragColor = vec4( color.xyz, 1.0 );
  70. }
  71. </script>
  72. <!-- HDR vertex shader -->
  73. <script id="vs-hdr" type="x-shader/x-vertex">
  74. varying vec2 vUv;
  75. void main() {
  76. vUv = uv;
  77. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  78. }
  79. </script>
  80. <script>
  81. if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
  82. var container, stats;
  83. var camera, scene, renderer;
  84. var materialHDR, quad, gamma, exposure;
  85. var sign = 1, rate = 1;
  86. var clock = new THREE.Clock();
  87. init();
  88. function init() {
  89. container = document.getElementById( 'container' );
  90. camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10000 );
  91. camera.position.z = 900;
  92. scene = new THREE.Scene();
  93. var loader = new THREE.RGBELoader();
  94. var texture = loader.load( "textures/miranda_uncropped.hdr", function( texture, textureData ){
  95. console.log( textureData.header ); // header string
  96. console.log( [textureData.width, textureData.height] ); // dimensions
  97. materialHDR = new THREE.ShaderMaterial( {
  98. uniforms: {
  99. tDiffuse: { value: texture },
  100. exposure: { value: textureData.exposure },
  101. brightMax: { value: textureData.gamma }
  102. },
  103. vertexShader: getText( 'vs-hdr' ),
  104. fragmentShader: getText( 'fs-hdr' )
  105. } );
  106. quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( textureData.width, textureData.height ), materialHDR );
  107. quad.position.z = -100;
  108. scene.add( quad );
  109. animate();
  110. } );
  111. texture.minFilter = THREE.LinearFilter;
  112. texture.magFilter = THREE.NearestFilter;
  113. renderer = new THREE.WebGLRenderer();
  114. renderer.setPixelRatio( window.devicePixelRatio );
  115. renderer.setSize( window.innerWidth, window.innerHeight );
  116. container.appendChild( renderer.domElement );
  117. stats = new Stats();
  118. container.appendChild( stats.dom );
  119. //
  120. window.addEventListener( 'resize', onWindowResize, false );
  121. }
  122. function onWindowResize() {
  123. camera.aspect = window.innerWidth / window.innerHeight;
  124. camera.updateProjectionMatrix();
  125. renderer.setSize( window.innerWidth, window.innerHeight );
  126. }
  127. function getText( id ) {
  128. return document.getElementById( id ).textContent;
  129. }
  130. //
  131. function animate() {
  132. requestAnimationFrame( animate );
  133. render();
  134. stats.update();
  135. }
  136. function render() {
  137. delta = clock.getDelta() * 5;
  138. if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
  139. rate = 0.25;
  140. } else {
  141. rate = 1;
  142. }
  143. if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
  144. sign *= -1;
  145. }
  146. materialHDR.uniforms.exposure.value += sign * rate * delta;
  147. renderer.render( scene, camera );
  148. }
  149. </script>
  150. </body>
  151. </html>