and here’s the script it uses internally - this is what you need if you want to get it to work easily in the Editor
2 Likes
@mvaligursky @yaustar
Thanks a lot!
PS: one more question of interest: is it possible to use box projection as usual with this method?
What do you mean by a box projection? What are you trying to do?
Basically I’m trying to render a cubemap in a (most likely not quadratric) room, let’s say 2,5 x 1,5 x 2,5 m. Then I want to use the Box Projection Setting on all materials in the room (shiny floor etc.) with the correct measurements / Half Extends of the room so that the reflection of the environment matches the rooms dimensions exactly.
This should work, and it’s on my list to look at adding this as an engine example in the near future.
Ok, that’s nice to hear. I have several more questions if you are willing to bear with me:
- Is it possible to only render the cubeMap ONCE (e.g. on initialize) and keep it in memory while the 6 cameras are destroyed / disabled?
- Can I or how can I use the cubeMap like I would use a prefiltered CubeMap for rough surfaces like discussed in this thread: [SOLVED] Assigning Cubemaps to Materials at Runtime
- yes, that’s the best way to go about it now. Disable camera to stop rendering, the cubemap will still be usable of course.
- See how the viewer does prefiltering. You might need to do something similar to handle rough surfaces. At some point in the near future I’d like to wrap all this in some easier to use API, but that has not been done yet. I hope to have something as simple as Camera.RenderCubemap(cubemap, layers, prefilter); or similar.
https://github.com/playcanvas/playcanvas-viewer/blob/master/src/viewer.ts#L345
1 Like
- Where would I do this then? When I disable the camera(s) after this part in the code:
// add the camera as a child entity
this.entity.addChild(e);
// set up its rotation
e.setRotation(cameraRotations[i]);
the material which uses the cubeMap simply turns black.
- So basically what’s done here is rendering the same Cubemap several times in several sizes and then calling pc.reprojectTexture to … kinda combine them , correct?
- I added this to render-to-cubemap example to execute after inside app.on(“update” …, to stop cubemaps from updating. But make sure this is done on the second frame, as first one needs to render it. The cubemap at that time continues to be rendered on the sphere.
This disables 6 child cameras that render individual faces.
shinyBall.children.forEach(function(child) {
if (child.camera) {
child.camera.enabled = false;
}
})
- from the viewer code, this block is relevant: " // generate prefiltered lighting data"
it uses single loaded cubemap, and renders it with varying levels of blur into a set of cubemaps, which are then used as a skydome.
3 Likes
I came up with the following solution: use a setTimeout with a short delay and then disable the cameras. However, in the short period of time where the cameras are enabled, every camera throws an error from launch.js seemingly every frame:
Trying to bind current color buffer as a texture
If I don’t disable them at all, this error gets thrown continously. Any idea what I may have done wrong? I mostly just copied the code from above with the minor adjustment that I made it so it could be applied to a model and have the camera as a seperate entity.
Demo is here: https://playcanvas.com/editor/scene/1037157
1 Like
I would say that an object you put cubemap on is getting rendered into cubemap … and you cannot use cubemap both for read and write at the same time. In the example I did, the sphere with cubemap is on excluded layer, so it does not render into cubemap.
2 Likes
also, set timeout is not ideal … it can render few times, or not at all, depending on system’s performance.
Just have some boolean variable, flip it in the update, and use it inside next update to disable cameras.
2 Likes
After a lot of trial and error with the correct way of prefiltering the cubemap, it works fine now. Thanks, @mvaligursky
Here’s the Demo if anyone is interested:
https://playcanvas.com/editor/scene/1037157
3 Likes
nice! glad all that worked.
After a full day of debugging, I came to the conclusion that it doesn’t really work, after all.
In my simple test scene I tried to render a CubeMap and project it to a hollow cube (room-wall-floor-thingy) but the projection doesn’t look right at all. The most glaring issue is the blue cone which is facing to the right instead to the left where it should be facing.
What am I doing wrong this time?
This is not a solution, but it might help. In Playcanvas cubemaps that are downloaded are x-axes flipped compared to those that are realtime rendered. At the moment we have flag on the texture (cubemap). This is automatically set when you render to texture using RenderTarget, but I guess not when we reproject cubemap to another cubemap. So for now, for your 6 or so cubemaps you generate, try to set this on them:
cubemapTexture._isRenderTarget = true;
I’m not quite sure where in the code the texture could actually be accessed, seeing that there are 6 renderTargets created in a loop and then immediately the texture is rendered to the cubeMap, which is the only pc.Texture in the code.
// set up rendering for all 6 faces
for (var i = 0; i < 6; i++) {
// render target, connected to cubemap texture face
var renderTarget = new pc.RenderTarget(this.app.graphicsDevice, this.cubeMap, {
depth: this.depth,
face: i
});
// create a child entity with the camera for this face
var e = new pc.Entity("CubeMapCamera_" + i);
e.addComponent('camera', {
aspectRatio: 1,
fov: 90,
// cubemap will render all layers as setup on Entity's camera
layers: camera.layers,
// priority
priority: camera.priority,
// copy other camera properties
clearColor: camera.clearColor,
clearColorBuffer: camera.clearColorBuffer,
clearDepthBuffer: camera.clearDepthBuffer,
clearStencilBuffer: camera.clearStencilBuffer,
farClip: camera.farClip,
nearClip: camera.nearClip,
frustumCulling: camera.frustumCulling,
// this camera renders into texture target
renderTarget: renderTarget
});
// add the camera as a child entity
this.cameraEntity.addChild(e);
// set up its rotation
e.setRotation(cameraRotations[i]);
}
};
I’ve tried it with renderTarget._isRenderTarget = true, I tried setting the cubeMap Texture to _isRenderTarget = true and I tried setting it in the prefilter function, to no avail.
Is there another method to x-flip rendered cubemaps?
those cubemaps created for the reprojection should have that flag set, so the code you based on this creates those textures
I tried setting the flag like you described but it didn’t change anything. Upon further inspection, I noticed that the flag had already be set to true by default, even without me setting it:
how about changing the flag to false on those?
if that doesnt work I’m not sure what the problem is, but as mentioned, it’s on my list to work on this and create some simple API to use this in a way you’re trying to.