0

I have a project with 360 scene - camera is inside the sphere and 360 photo is wrapped as texture around the sphere: http://kitchen-360.herokuapp.com/

I added several smaller spheres with transparent textures and Im seeing sudden drop of performance. It is 'fill bound' issue as described in this link: Debugging low FPS in Three.js

Im trying to solve this performance issue. Im thinking of having only one sphere with multiple textures on it. Is this gonna be faster then stacked spheres with one texture each?

I tried to create sphere mesh with array of MeshBasicMaterial but its not working. Only first texture in the array is visible:

// when texture is loaded I push it to array
var sphereMaterial = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide
  })
sphereMaterial.transparent = true;
matArr.push(sphereMaterial);

//... then later when all textures loaded
roomMesh = new THREE.Mesh( sphereGeometryR, matArr );
roomMesh.name = 'great room';
scene.add( roomMesh );

I saw this example for custom shader but dont know how to add and change textures dynamically at later time: Multiple transparent textures on the same mesh face in Three.js

Is there any other way to optimize this problem? Would geometry merge help here?

pera
  • 684
  • 6
  • 19
  • How many meshes do you have in the array for checking the intersection? How many vertices in your sphere geometries? What type of geometry do you use? How complex are your geometries in general? – prisoner849 Dec 26 '18 at 07:22
  • geometry is irrelevant, just couple of spheres with ~100 vertices. No physics or heavy calculations. All performance drops are from fullscreen pixel blending like in this example: http://greggman.github.io/doodles/overdraw.html plus in my case I have transparency on each texture so no z order optimization is possible. – pera Dec 26 '18 at 12:39

0 Answers0