EquiangularToCubeGenerator.js 2.9 KB

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