webgl_tonemapping.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - tone mapping</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" rel="noopener">three.js</a> - Tone Mapping<br />
  12. Battle Damaged Sci-fi Helmet by
  13. <a href="https://sketchfab.com/theblueturtle_" target="_blank" rel="noopener">theblueturtle_</a><br />
  14. <a href="https://hdrihaven.com/hdri/?h=royal_esplanade" target="_blank" rel="noopener">Royal Esplanade</a> by <a href="https://hdrihaven.com/" target="_blank" rel="noopener">HDRI Haven</a>
  15. </div>
  16. <script type="module">
  17. import * as THREE from '../build/three.module.js';
  18. import { GUI } from './jsm/libs/dat.gui.module.js';
  19. import { OrbitControls } from './jsm/controls/OrbitControls.js';
  20. import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
  21. import { RGBELoader } from './jsm/loaders/RGBELoader.js';
  22. var mesh, renderer, scene, camera, controls;
  23. var gui,
  24. guiWhitePoint = null,
  25. guiExposure = null;
  26. var params = {
  27. exposure: 0.8,
  28. whitePoint: 1.0, // applies to Uncharted2 only
  29. toneMapping: 'ACESFilmic'
  30. };
  31. var toneMappingOptions = {
  32. None: THREE.NoToneMapping,
  33. Linear: THREE.LinearToneMapping,
  34. Reinhard: THREE.ReinhardToneMapping,
  35. Uncharted2: THREE.Uncharted2ToneMapping,
  36. Cineon: THREE.CineonToneMapping,
  37. ACESFilmic: THREE.ACESFilmicToneMapping
  38. };
  39. init();
  40. render();
  41. function init() {
  42. renderer = new THREE.WebGLRenderer( { antialias: true } );
  43. renderer.setPixelRatio( window.devicePixelRatio );
  44. renderer.setSize( window.innerWidth, window.innerHeight );
  45. document.body.appendChild( renderer.domElement );
  46. renderer.toneMapping = toneMappingOptions[ params.toneMapping ];
  47. renderer.toneMappingWhitePoint = params.whitePoint;
  48. renderer.toneMappingExposure = params.exposure;
  49. renderer.outputEncoding = THREE.sRGBEncoding;
  50. scene = new THREE.Scene();
  51. camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.25, 20 );
  52. camera.position.set( - 1.8, 0.6, 2.7 );
  53. controls = new OrbitControls( camera, renderer.domElement );
  54. controls.addEventListener( 'change', render ); // use if there is no animation loop
  55. controls.enableZoom = false;
  56. controls.enablePan = false;
  57. controls.target.set( 0, 0, - 0.2 );
  58. controls.update();
  59. var pmremGenerator = new THREE.PMREMGenerator( renderer );
  60. pmremGenerator.compileEquirectangularShader();
  61. new RGBELoader()
  62. .setDataType( THREE.UnsignedByteType )
  63. .setPath( 'textures/equirectangular/' )
  64. .load( 'venice_sunset_1k.hdr', function ( texture ) {
  65. var envMap = pmremGenerator.fromEquirectangular( texture ).texture;
  66. scene.background = envMap;
  67. scene.environment = envMap;
  68. texture.dispose();
  69. pmremGenerator.dispose();
  70. render();
  71. // model
  72. var loader = new GLTFLoader().setPath( 'models/gltf/DamagedHelmet/glTF/' );
  73. loader.load( 'DamagedHelmet.gltf', function ( gltf ) {
  74. gltf.scene.traverse( function ( child ) {
  75. if ( child.isMesh ) {
  76. mesh = child;
  77. scene.add( mesh );
  78. }
  79. } );
  80. render();
  81. } );
  82. } );
  83. window.addEventListener( 'resize', onWindowResize, false );
  84. gui = new GUI();
  85. gui.add( params, 'toneMapping', Object.keys( toneMappingOptions ) )
  86. .onChange( function () {
  87. updateGUI();
  88. renderer.toneMapping = toneMappingOptions[ params.toneMapping ];
  89. mesh.material.needsUpdate = true;
  90. render();
  91. } );
  92. updateGUI();
  93. gui.open();
  94. }
  95. function updateGUI() {
  96. if ( guiWhitePoint !== null ) {
  97. gui.remove( guiWhitePoint );
  98. guiWhitePoint = null;
  99. }
  100. if ( guiExposure !== null ) {
  101. gui.remove( guiExposure );
  102. guiExposure = null;
  103. }
  104. if ( params.toneMapping !== 'None' ) {
  105. guiExposure = gui.add( params, 'exposure', 0, 2 )
  106. .onChange( function () {
  107. renderer.toneMappingExposure = params.exposure;
  108. render();
  109. } );
  110. }
  111. if ( params.toneMapping === 'Uncharted2' ) {
  112. guiWhitePoint = gui.add( params, 'whitePoint', 0, 2 )
  113. .onChange( function () {
  114. renderer.toneMappingWhitePoint = params.whitePoint;
  115. render();
  116. } );
  117. }
  118. }
  119. function onWindowResize() {
  120. camera.aspect = window.innerWidth / window.innerHeight;
  121. camera.updateProjectionMatrix();
  122. renderer.setSize( window.innerWidth, window.innerHeight );
  123. render();
  124. }
  125. function render() {
  126. renderer.render( scene, camera );
  127. }
  128. </script>
  129. </body>
  130. </html>