EquirectangularToCubeGenerator.js 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
  1. /**
  2. * @author Richard M. / https://github.com/richardmonette
  3. */
  4. THREE.EquirectangularToCubeGenerator = function ( sourceTexture, resolution ) {
  5. this.sourceTexture = sourceTexture;
  6. this.resolution = resolution;
  7. this.views = [
  8. { t: [ 1, 0, 0 ], u: [ 0, - 1, 0 ] },
  9. { t: [ - 1, 0, 0 ], u: [ 0, - 1, 0 ] },
  10. { t: [ 0, 1, 0 ], u: [ 0, 0, 1 ] },
  11. { t: [ 0, - 1, 0 ], u: [ 0, 0, - 1 ] },
  12. { t: [ 0, 0, 1 ], u: [ 0, - 1, 0 ] },
  13. { t: [ 0, 0, - 1 ], u: [ 0, - 1, 0 ] },
  14. ];
  15. this.camera = new THREE.PerspectiveCamera( 90, 1, 0.1, 10 );
  16. this.boxMesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 1 ), this.getShader() );
  17. this.boxMesh.material.side = THREE.BackSide;
  18. this.scene = new THREE.Scene();
  19. this.scene.add( this.boxMesh );
  20. var params = {
  21. format: THREE.RGBAFormat,
  22. magFilter: this.sourceTexture.magFilter,
  23. minFilter: this.sourceTexture.minFilter,
  24. type: this.sourceTexture.type,
  25. generateMipmaps: this.sourceTexture.generateMipmaps,
  26. anisotropy: this.sourceTexture.anisotropy,
  27. encoding: this.sourceTexture.encoding
  28. };
  29. this.renderTarget = new THREE.WebGLRenderTargetCube( this.resolution, this.resolution, params );
  30. };
  31. THREE.EquirectangularToCubeGenerator.prototype = {
  32. constructor: THREE.EquirectangularToCubeGenerator,
  33. update: function ( renderer ) {
  34. for ( var i = 0; i < 6; i ++ ) {
  35. this.renderTarget.activeCubeFace = i;
  36. var v = this.views[ i ];
  37. this.camera.position.set( 0, 0, 0 );
  38. this.camera.up.set( v.u[ 0 ], v.u[ 1 ], v.u[ 2 ] );
  39. this.camera.lookAt( v.t[ 0 ], v.t[ 1 ], v.t[ 2 ] );
  40. renderer.render( this.scene, this.camera, this.renderTarget, true );
  41. }
  42. return this.renderTarget.texture;
  43. },
  44. getShader: function () {
  45. var shaderMaterial = new THREE.ShaderMaterial( {
  46. uniforms: {
  47. "equirectangularMap": { value: this.sourceTexture },
  48. },
  49. vertexShader:
  50. "varying vec3 localPosition;\n\
  51. \n\
  52. void main() {\n\
  53. localPosition = position;\n\
  54. gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n\
  55. }",
  56. fragmentShader:
  57. "#include <common>\n\
  58. varying vec3 localPosition;\n\
  59. uniform sampler2D equirectangularMap;\n\
  60. \n\
  61. vec2 EquirectangularSampleUV(vec3 v) {\n\
  62. vec2 uv = vec2(atan(v.z, v.x), asin(v.y));\n\
  63. uv *= vec2(0.1591, 0.3183); // inverse atan\n\
  64. uv += 0.5;\n\
  65. return uv;\n\
  66. }\n\
  67. \n\
  68. void main() {\n\
  69. vec2 uv = EquirectangularSampleUV(normalize(localPosition));\n\
  70. vec3 color = texture2D(equirectangularMap, uv).rgb;\n\
  71. \n\
  72. gl_FragColor = vec4( color, 1.0 );\n\
  73. }",
  74. blending: THREE.NoBlending
  75. } );
  76. shaderMaterial.type = 'EquirectangularToCubeGenerator';
  77. return shaderMaterial;
  78. },
  79. dispose: function () {
  80. this.boxMesh.geometry.dispose();
  81. this.boxMesh.material.dispose();
  82. this.renderTarget.dispose();
  83. }
  84. };