Equirectangular screenshot

Help & Support
1

Is it possible to generate an equirectangular snapshot of the current view?

I’m not sure if this is possible through a renderTarget, rather than trying to create some over complicated function that tries to mimic a 360 camera.

Thanks!

2

I think best would be to render a CubeMap and then convert textures from 6 faces to single with equirectangular projection.

3

Thanks @max, I found a post in the forum on which you had been helping out before, but it seems the initial post started with the need to take a cubemap that was already part of the assets and replacing it in the scene.

Further in that same topic, @Kamael expressed the need to dynamically generate the cubemap and posted a script that makes a whole lot of sense:

  • Create an entity
  • Attach 6 cameras with 6 renderTargets

But from there, I don’t see how I can extract an image from each of those cameras.

After some digging, I found a script that does this in THREE.js and it works exactly like I’d like it to. Takes a snapshot and downloads an image. So I’ve taken up the task of converting that script into Playcanvas.

Check out their demo

I actually made it pretty far in with the translation, but I’m starting to hit a few bumps with terms and properties that don’t transfer over as smoothly, for example (and most importantly), the concept of a CubeCamera and the WebGLRenderer.

CubeCamera
Creates 6 cameras that render to a WebGLRenderTargetCube.

WebGLRenderer
The WebGL renderer displays your beautifully crafted scenes using WebGL.

For the cubeCam I created an entity with 6 child cameras using @Kamael 's code , but have no idea really where to attach it or how to trigger the scene snapshot. As far as the WebGL renderer, I first thought it referred to the CANVAS, then thought it was the renderTarget, but it seems that the THREE.CubeCamera also has a renderTarget as a child.

Thoughts?
Anyone interested in taking this on with me?
https://playcanvas.com/editor/code/495087?tabs=8596687
https://launch.playcanvas.com/539610?debug=true

1 Like
4

So you can set renderTarget to the camera: https://developer.playcanvas.com/en/api/pc.CameraComponent.html#renderTarget

You will need to create RenderTarget https://developer.playcanvas.com/en/api/pc.RenderTarget.html
And then render once the your face cameras (enable for one frame, and disable after, or trigger render manually).

Then you can get colorBuffer from your textures and do something about them.