EquirectangularToCubeGenerator.js 3.0 KB

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