webgl_postprocessing_glitch.html 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>three.js webgl - postprocessing - digital glitch</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. <label for="dotScreen">Glitch me wild:</label><input id="wildGlitch" type="checkbox"/><br />
  12. </div>
  13. <script type="module">
  14. import {
  15. AmbientLight,
  16. DirectionalLight,
  17. Fog,
  18. Mesh,
  19. MeshPhongMaterial,
  20. Object3D,
  21. PerspectiveCamera,
  22. Scene,
  23. SphereBufferGeometry,
  24. WebGLRenderer,
  25. } from "../build/three.module.js";
  26. import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
  27. import { RenderPass } from './jsm/postprocessing/RenderPass.js';
  28. import { GlitchPass } from './jsm/postprocessing/GlitchPass.js';
  29. var camera, scene, renderer, composer;
  30. var object, light;
  31. var glitchPass;
  32. init();
  33. animate();
  34. function updateOptions() {
  35. var wildGlitch = document.getElementById( 'wildGlitch' );
  36. glitchPass.goWild = wildGlitch.checked;
  37. }
  38. function init() {
  39. renderer = new WebGLRenderer();
  40. renderer.setPixelRatio( window.devicePixelRatio );
  41. renderer.setSize( window.innerWidth, window.innerHeight );
  42. document.body.appendChild( renderer.domElement );
  43. //
  44. camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
  45. camera.position.z = 400;
  46. scene = new Scene();
  47. scene.fog = new Fog( 0x000000, 1, 1000 );
  48. object = new Object3D();
  49. scene.add( object );
  50. var geometry = new SphereBufferGeometry( 1, 4, 4 );
  51. for ( var i = 0; i < 100; i ++ ) {
  52. var material = new MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
  53. var mesh = new Mesh( geometry, material );
  54. mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
  55. mesh.position.multiplyScalar( Math.random() * 400 );
  56. mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
  57. mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
  58. object.add( mesh );
  59. }
  60. scene.add( new AmbientLight( 0x222222 ) );
  61. light = new DirectionalLight( 0xffffff );
  62. light.position.set( 1, 1, 1 );
  63. scene.add( light );
  64. // postprocessing
  65. composer = new EffectComposer( renderer );
  66. composer.addPass( new RenderPass( scene, camera ) );
  67. glitchPass = new GlitchPass();
  68. composer.addPass( glitchPass );
  69. //
  70. window.addEventListener( 'resize', onWindowResize, false );
  71. var wildGlitchOption = document.getElementById( 'wildGlitch' );
  72. wildGlitchOption.addEventListener( 'change', updateOptions );
  73. updateOptions();
  74. }
  75. function onWindowResize() {
  76. camera.aspect = window.innerWidth / window.innerHeight;
  77. camera.updateProjectionMatrix();
  78. renderer.setSize( window.innerWidth, window.innerHeight );
  79. composer.setSize( window.innerWidth, window.innerHeight );
  80. }
  81. function animate() {
  82. requestAnimationFrame( animate );
  83. object.rotation.x += 0.005;
  84. object.rotation.y += 0.01;
  85. composer.render();
  86. }
  87. </script>
  88. </body>
  89. </html>