-
-
Notifications
You must be signed in to change notification settings - Fork 35.3k
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
CubeTexture orientation #16328
Comments
You mean being able to rotate We probably need a new API though... scene.background = new THREE.Background( cubeTexture );`
scene.background.rotation.y = Math.PI / 2; |
I'm struggling with exactly this right now. Trying to get baked ground shadows to match up to the sun direction from a cubemap. |
@fabienrohrer Try scene.rotation.y = Math.PI; If that is not working, please provide a live example to demonstrate exactly what you are doing. |
Oh, that works? 😮 The camera must be a child of the scene though? |
I don't think that matters. |
@mrdoob this is exactly what I need too :-) Rotating the overall scene is overkilled and may cause many side effects in my app. I would like to be able to rotate the background only, and for sure, the environment maps should work the same way. A live demo is not possible to do, because the API is missing. It's a matter to take any example having a background cubemap (like https://threejs.org/examples/#webgl_materials_cubemap) and be able to rotate only the background around the y-axis. Or more generally, to apply any rotation to the background. Being able to apply a custom rotation matrix / quaternion to any cubemap seems to be the most generic solution for me. |
three.js is careful to ensure that material reflections are consistent with the material Why don't you create the correct world-space cube map in your app? |
I tried doing If we introduce a var envMap = material.envMap;
if ( scene.background && scene.background.isBackground && envMap === null ) {
envMap = scene.background.texture;
} |
I said
That means it may not work. :-) It depends on the use-case. I tried with unrelated: the |
It makes more sense to do this at the texture level, otherwise any IBL lighting will not match the background, I assume. We allow rotation of normal textures, is there any reason why we wouldn't want to do the same for cube textures? Is it too complex to implement?
This is very time consuming. I've been working on generating cube maps over the last couple of days, and making changes then re-rendering the cube map takes me about 15-20 minutes for each change. Another potential interesting use case for this is that you could change the direction of environmental lighting in real time. I'm currently combining a PMREM environment map with a directional light for real-time shadows, and using the map as a skybox, which gives a fairly decent daylight effect. |
My concern is also about performance. Currently I implemented a hack about to rotate the top and bottom texture and swap the other ones. It takes about 10ms to rotate a 1024x1024 texture in JS. |
Alternatively, could it be possible to have only two options for the CubeTexture orientation, the one you currently have and another one (with the 180 degree rotation) that would be friendly with the other standard largely used in 3D formats (X3D, VRML, etc.). We could probably easily adapt the consistency with material reflections to handle both formats? |
This sounds familiar #11103 |
If I would implement |
And how often are you doing this in your app? |
@WestLangley I just give you a detailed answer here: #16507 (comment)
Not much. Once at loading per client, and once each time the background is changed (very rare case). A DEFINE would also do the job. |
Sorry, I am not following the logic of that. |
Unfortunately, @WestLangley doesn't want to merge my modification about the CubeTexture.rotation because of the runtime overhead (a supplementary mat3 multiplication). In this case, I'm running out of ideas to solve this cleanly in threejs. |
actually im using a hack lol, but my hack is pre fixed value, maybe if i know how to feed uniforms onBeforeCompile... maybe ask gpt, at least my hacked fragment rotates correctly by 3 axis, after so much attempts that used to distort before. |
This is quite an old, but fundamental, feature of rendering. It's been punted over the years to the next revision but some of us need the feature for various upcoming deliverables. Happy to put up some serious sponsorship cash, immediately, to fast track its implementation. Or, for someone to at least post the working shader code so we can implement it locally. |
@PeteMatterfield paste this in any part of your js:
im hardcoding these: but i suppose it can feed via some uniforms in onbeforecompile, gpt said something about that, but i not tested, so can realtime update... because i think they will implement it soon... |
Thanks @VanderSP but I'll wait for pmrem support as that's what is being used by default. |
I've added an experimental https://rawcdn.githack.com/Mugen87/three.js/053bbee3597e55b88e1da5be44dd0b1e81b70cce/examples/webgl_materials_envmaps.html
@VanderSP @PeteMatterfield Does this look correct to you? Like mentioned earlier in the discussion, it would be good to have this feature for environment maps with normal meshes (not just the background skybox) as well. |
Looks like it rotates... but i neve use back just envmap reflections, my manual solution works, not tested with the pmrem file but probably its possible, as i tried before but with wrong rot calculations, now i just need to ask gpt how to feed uniform values on onbeforecompile so i can change in realtime, but yes actually im overriding the shader variable fragment |
@Mugen87 Yes, this looks good so far! |
@VanderSP, I'm trying to figure out rotating my scene.enviornment as I have a Z up scene. Does your code work for that? I tried to use it, but I get |
hi @jrj2211 no need to compile , just paste code in any part of js, it will override it |
Hmm, if I just paste it in I get the "Fragment shader is not compiled.". I am unfortunately stuck on an older version of Threejs so I'm guessing that's the reason. |
@jrj2211 Maybe you get luck first copying the fragment from your actual version, then copying the relevant parts I added! |
Thanks for the suggestion! I'll give that a shot |
@nickyvanurk I suggest you ask your question at the forum. GitHub is no the right place for help requests. When you do so, demonstrate the issue with a live example. Without seeing your code, it is not possible to provide feedback. Edit: Answer at the forum: https://discourse.threejs.org/t/cubetexture-docs-axis-confusing-wrong/61513/4 |
In my app, I would like to rotate the CubeTexture that defines the scene background and the environment map reflections by 180° along the vertical y-axis.
My rotation is defined by the VRML and X3D specifications about the background fields.
I tried to modify several parameters like the
mapping
,flipY
androtation
Texture fields. However I didn't found any good way to do so.three.js
?Texture.flipX
andCubeTexture.flipZ
)? Would you be interested in this feature?The text was updated successfully, but these errors were encountered: