EquirectangularToCubeGenerator.js 2.9 KB

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