-
-
Notifications
You must be signed in to change notification settings - Fork 35.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
scene.background support for equirectangular textures #9733
Comments
How aboud doing a Equirectangular to Cubemap helper instead? /ping @spite |
I've got half working a helper to convert equirectangular panoramas to THREE.WebGLRenderTargetCube (based on https://github.com/spite/THREE.CubemapToEquirectangular) It makes more sense to use cube mapping rather than spherical mapping, since there's cases in which the seams in the wrapping can't be fixed. |
I'm thinking we may want to add |
I had someone telling me that they get seams in cubemaps, quoting KhronosGroup/WebGL#1528 this would not happen with the equirectangular image, although you need a bit heavier shader |
@spite check this 4 tap trick article edit actually nvm, that would require altering the texture any way |
bump. I'm thinking that if the scene background If users have just a flat texture, they can set it as the CSS background. |
That will make capturing trickier, since the CSS background won't be part of the Canvas. It might be better to have a backdrop/background object that can work with equi/cubemap/flat textures (sphere/cube/tri geos)? |
@spite Good point. Maybe an API that captures these features... renderer.clearColor
renderer.backgroundTexture // image or procedural texture, backdrop
scene.background //equirectangular or cube |
@WestLangley We could also add a new mapping... |
@mrdoob Yes, I think that is a good idea. We would have to make sure it still works if the user sets the mapping in the loader callback -- and hence, potentially after the first call to render. |
Has the mapping been abandoned in favor of the PMREM conversion? I imagine having the mapping directly done in the shader is still nice for the background. What do you think? @mrdoob @WestLangley |
I considered this recently... Something like a 🤔 /cc @elalish |
Do we need to use the if( scene.background.isTexture && scene.background.mapping === EquirectangularMapping ) {
// Set shader define to `ENVMAP_TYPE_EQUIREC `
} And fetch the texture using spherical coordinates in the shader. |
var options = {
generateMipmaps: true,
minFilter: THREE.LinearMipmapLinearFilter,
magFilter: THREE.LinearFilter
};
scene.background = new THREE.WebGLCubeRenderTarget( 512, options ).fromEquirectangularTexture( renderer, texture ); |
@WestLangley Interesting! I missed that, really nice and done on the GPU. It would still be nice to support equirectangular like any other texture as a background with no conversion, but it's not a priority. |
thank you @WestLangley, that was useful. How should the WebGLCubeRenderTarget size be chosen in order to get the best resolution from the image? I am doing something like this example, with a really hi-res equirectangular image. const size = THREE.MathUtils.floorPowerOfTwo(texture.image.naturalHeight) |
@marcofugaro I generally use half the height (assuming powers of two). So for a 1024x512 equirect, I use a 256x256 cubemap. That gives identical pixel sizes at the equator, and the cube map gets 25% fewer pixels overall, since the stretched poles get collapsed. |
Fixed via #19911 🎉 . |
Currently the helper
background
property on aScene
can be set to either a cubemap (rendered on a cube geometry) or a texture on a fullscreen orthographic plane. There are a lot of equirectangular images (a lot more coming from 360/VR cameras soon) might be nice to also support as another type and get same benefits.Potential API:
The text was updated successfully, but these errors were encountered: