Rendering Camera Feed as Texture on a Plane

Help & Support
1

Hi

I am trying to Render Camera Feed as Texture on a Plane, similar to the example project - https://playcanvas.com/project/528262/overview/render-to-texture-test

But when i try to fork this project or try to create a new project on similar lines, I am getting a getting blank plane with no camera feed.

Also, i wanted to do this in AR, any more directions will be a great help.

Thanks

2

Hi @parul_bansal,

That example is a bit old, written before the Playcanvas Layers system was introduced. Now the way to do that would be to create a new Layer in the editor, assign it to your active camera and objects you would like to render on and in code make the following change:

//     // Set the render target on an entity's camera component
//     this.entity.camera.renderTarget = renderTarget;
    
    // added a new Layer named Render
    var layer = this.app.scene.layers.getLayerByName('Render');
    layer.renderTarget = renderTarget;

If you would like to render to texture the whole Layers composition including the skybox etc, take a look at the following project by @yaustar :

https://playcanvas.com/project/605131/overview/capturing-screenshot-from-camera

3

Hey Thanks for the reply I used the layers and the code suggested above.

  1. I am able to get the 3d object, but i am unable to get the skybox.
  2. Also, I am able to get the model wrapped ona a cylinder like shown in this example - PlayCanvas 3D HTML5 Game Engine
    but i want it to get wrapped only the curved surface. My project is about wrapping a watch around a cylinder in AR, with cylinder having camera feed texture.

As the 3d models always load on top of the marker, I was just trying to experiement, if i can mimic it getting wrapped aroung hand with this.

Thanks
Parul

4

Hi @parul_bansal,

  1. Good point, let me check and will get back to you what’s the best way to get the full camera feed and not just a camera layer.

  2. To do that you need to prepare a cylinder model in your modelling app, to have the right texture coordinates for your use case (unwap UVW).

5

Hi @Leonidas

Gr8, I will try to modify the cylinder object with blender.

Also, do let me know incase you find a solution for point 1. I will also look and share if i find something

Thanks :slight_smile:

1 Like
6

Hi @parul_bansal,

Here is an example that renders a full camera view on a plane, it’s an engine based example.

http://playcanvas.github.io/#graphics/render-to-texture.html

Hope it helps! The full source code:

Edit: About the Skybox though, since that is rendered on its own layer I think still it will not be included on the rendered texture. There is a quick and dirty solution to grab a texture from the Application texture, but that will kill performance.

Will research further on what is the optimal way :wink: Most likely using a pc.PostEffect to copy the colorBuffer to a render texture.

7

Hey

Apologies for late reply.

Thanks for the suggestion. I will try this example and get back to you with the results…
Thanks again for your help.

1 Like
8

hi @yaustar ,

I just went through this project. The plane appears black and doesn’t render anything when I launch the project. Do I need to change anything, or is this project outdated?

https://playcanvas.com/project/605131/overview/capturing-screenshot-from-camera

9

Use the tutorial project instead: Capturing a screenshot | PlayCanvas Developer Site

My personal project is just an oooooold fork

10

thanks @yaustar but I want the mirror functionality not the screenshot one

11

All I’m doing more in my project is applying the render texture to a material that is used on the flat plane