You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

136 lines
3.3 KiB

  1. /*
  2. Most of the stuff in here is just bootstrapping. Essentially it's just
  3. setting ThreeJS up so that it renders a flat surface upon which to draw
  4. the shader. The only thing to see here really is the uniforms sent to
  5. the shader. Apart from that all of the magic happens in the HTML view
  6. under the fragment shader.
  7. */
  8. var container = void 0;
  9. var camera = void 0,
  10. scene = void 0,
  11. renderer = void 0;
  12. var uniforms = void 0;
  13. var loader = new THREE.TextureLoader();
  14. var texture = void 0;
  15. loader.setCrossOrigin("anonymous");
  16. loader.load(
  17. 'img/noise.png',
  18. function do_something_with_texture(tex) {
  19. texture = tex;
  20. texture.wrapS = THREE.RepeatWrapping;
  21. texture.wrapT = THREE.RepeatWrapping;
  22. texture.minFilter = THREE.LinearFilter;
  23. init();
  24. animate();
  25. });
  26. function init() {
  27. container = document.getElementById('container');
  28. // scene.background = new THREE.Color( 0xff0000 );
  29. camera = new THREE.Camera();
  30. camera.position.z = 1;
  31. scene = new THREE.Scene();
  32. var geometry = new THREE.PlaneBufferGeometry(2, 2);
  33. uniforms = {
  34. u_time: {
  35. type: "f",
  36. value: 1.0
  37. },
  38. u_resolution: {
  39. type: "v2",
  40. value: new THREE.Vector2()
  41. },
  42. u_noise: {
  43. type: "t",
  44. value: texture
  45. },
  46. u_mouse: {
  47. type: "v2",
  48. value: new THREE.Vector2()
  49. }
  50. };
  51. var material = new THREE.ShaderMaterial({
  52. uniforms: uniforms,
  53. vertexShader: document.getElementById('vertexShader').textContent,
  54. fragmentShader: document.getElementById('fragmentShader').textContent
  55. });
  56. material.extensions.derivatives = true;
  57. var mesh = new THREE.Mesh(geometry, material);
  58. var material = new THREE.MeshBasicMaterial( { color: 0xffffff } );
  59. scene.add(mesh);
  60. renderer = new THREE.WebGLRenderer();
  61. renderer.setPixelRatio(window.devicePixelRatio);
  62. container.appendChild(renderer.domElement);
  63. onWindowResize();
  64. window.addEventListener('resize', onWindowResize, false);
  65. document.addEventListener('pointermove', function(e) {
  66. var ratio = window.innerHeight / window.innerWidth;
  67. uniforms.u_mouse.value.x = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
  68. uniforms.u_mouse.value.y = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
  69. e.preventDefault();
  70. });
  71. }
  72. function onWindowResize(event) {
  73. renderer.setSize(window.innerWidth, window.innerHeight);
  74. renderer.setSize( 1600, 1600 );
  75. uniforms.u_resolution.value.x = renderer.domElement.width;
  76. uniforms.u_resolution.value.y = renderer.domElement.height;
  77. }
  78. function animate(delta) {
  79. requestAnimationFrame(animate);
  80. render(delta);
  81. }
  82. var capturer = new CCapture({
  83. verbose: true,
  84. framerate: 30,
  85. // motionBlurFrames: 4,
  86. quality: 90,
  87. format: 'webm',
  88. workersPath: 'js/'
  89. });
  90. var capturing = false;
  91. isCapturing = function isCapturing(val) {
  92. if(val === false && window.capturing === true) {
  93. capturer.stop();
  94. capturer.save();
  95. } else if(val === true && window.capturing === false) {
  96. capturer.start();
  97. }
  98. capturing = val;
  99. };
  100. toggleCapture = function toggleCapture() {
  101. isCapturing(!capturing);
  102. };
  103. window.addEventListener('keyup', function(e) {
  104. if(e.keyCode == 68) toggleCapture();
  105. });
  106. var then = 0;
  107. function render(delta) {
  108. uniforms.u_time.value = -11000 + delta * 0.0015; //转动速度
  109. renderer.render(scene, camera);
  110. if(capturing) {
  111. capturer.capture(renderer.domElement);
  112. }
  113. }