webgl_shader_lava.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - materials - shaders [lava]</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"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - shader material demo. featuring lava shader by <a href="http://irrlicht.sourceforge.net/phpBB2/viewtopic.php?t=21057" target="_blank" rel="noopener">TheGameMaker</a></div>
  12. <script id="fragmentShader" type="x-shader/x-fragment">
  13. uniform float time;
  14. uniform float fogDensity;
  15. uniform vec3 fogColor;
  16. uniform sampler2D texture1;
  17. uniform sampler2D texture2;
  18. varying vec2 vUv;
  19. void main( void ) {
  20. vec2 position = - 1.0 + 2.0 * vUv;
  21. vec4 noise = texture2D( texture1, vUv );
  22. vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02;
  23. vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01;
  24. T1.x += noise.x * 2.0;
  25. T1.y += noise.y * 2.0;
  26. T2.x -= noise.y * 0.2;
  27. T2.y += noise.z * 0.2;
  28. float p = texture2D( texture1, T1 * 2.0 ).a;
  29. vec4 color = texture2D( texture2, T2 * 2.0 );
  30. vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );
  31. if( temp.r > 1.0 ) { temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
  32. if( temp.g > 1.0 ) { temp.rb += temp.g - 1.0; }
  33. if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; }
  34. gl_FragColor = temp;
  35. float depth = gl_FragCoord.z / gl_FragCoord.w;
  36. const float LOG2 = 1.442695;
  37. float fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );
  38. fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );
  39. gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
  40. }
  41. </script>
  42. <script id="vertexShader" type="x-shader/x-vertex">
  43. uniform vec2 uvScale;
  44. varying vec2 vUv;
  45. void main()
  46. {
  47. vUv = uvScale * uv;
  48. vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
  49. gl_Position = projectionMatrix * mvPosition;
  50. }
  51. </script>
  52. <script type="module">
  53. import * as THREE from '../build/three.module.js';
  54. import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
  55. import { RenderPass } from './jsm/postprocessing/RenderPass.js';
  56. import { FilmPass } from './jsm/postprocessing/FilmPass.js';
  57. import { BloomPass } from './jsm/postprocessing/BloomPass.js';
  58. let camera, renderer, composer, clock;
  59. let uniforms, mesh;
  60. init();
  61. animate();
  62. function init() {
  63. const container = document.getElementById( 'container' );
  64. camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
  65. camera.position.z = 4;
  66. const scene = new THREE.Scene();
  67. clock = new THREE.Clock();
  68. const textureLoader = new THREE.TextureLoader();
  69. uniforms = {
  70. "fogDensity": { value: 0.45 },
  71. "fogColor": { value: new THREE.Vector3( 0, 0, 0 ) },
  72. "time": { value: 1.0 },
  73. "uvScale": { value: new THREE.Vector2( 3.0, 1.0 ) },
  74. "texture1": { value: textureLoader.load( 'textures/lava/cloud.png' ) },
  75. "texture2": { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
  76. };
  77. uniforms[ "texture1" ].value.wrapS = uniforms[ "texture1" ].value.wrapT = THREE.RepeatWrapping;
  78. uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = THREE.RepeatWrapping;
  79. const size = 0.65;
  80. const material = new THREE.ShaderMaterial( {
  81. uniforms: uniforms,
  82. vertexShader: document.getElementById( 'vertexShader' ).textContent,
  83. fragmentShader: document.getElementById( 'fragmentShader' ).textContent
  84. } );
  85. mesh = new THREE.Mesh( new THREE.TorusGeometry( size, 0.3, 30, 30 ), material );
  86. mesh.rotation.x = 0.3;
  87. scene.add( mesh );
  88. //
  89. renderer = new THREE.WebGLRenderer( { antialias: true } );
  90. renderer.setPixelRatio( window.devicePixelRatio );
  91. container.appendChild( renderer.domElement );
  92. renderer.autoClear = false;
  93. //
  94. const renderModel = new RenderPass( scene, camera );
  95. const effectBloom = new BloomPass( 1.25 );
  96. const effectFilm = new FilmPass( 0.35, 0.95, 2048, false );
  97. composer = new EffectComposer( renderer );
  98. composer.addPass( renderModel );
  99. composer.addPass( effectBloom );
  100. composer.addPass( effectFilm );
  101. //
  102. onWindowResize();
  103. window.addEventListener( 'resize', onWindowResize );
  104. }
  105. function onWindowResize() {
  106. camera.aspect = window.innerWidth / window.innerHeight;
  107. camera.updateProjectionMatrix();
  108. renderer.setSize( window.innerWidth, window.innerHeight );
  109. composer.setSize( window.innerWidth, window.innerHeight );
  110. }
  111. //
  112. function animate() {
  113. requestAnimationFrame( animate );
  114. render();
  115. }
  116. function render() {
  117. const delta = 5 * clock.getDelta();
  118. uniforms[ 'time' ].value += 0.2 * delta;
  119. mesh.rotation.y += 0.0125 * delta;
  120. mesh.rotation.x += 0.05 * delta;
  121. renderer.clear();
  122. composer.render( 0.01 );
  123. }
  124. </script>
  125. </body>
  126. </html>