# What's the fastest way to copy a webcam frame to a WebGLRenderTarget?

**URL:** <https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706>\
**Category:** Questions\
**Tags:** video-texture\
**Created:** [April 26, 2021, 11:12am UTC](https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706 "2021-04-26T11:12:56Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [April 26, 2021, 11:12am UTC](https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706/1 "2021-04-26T11:12:56Z")

</div>

Greetings to the gurus,  
I’m struggling for too long with this one…

I need to post-process the device camera frames with a custom shader, so the copy of the actual image data to the render target must be as cheap as possible, to leave CPU room for the heavy post-processing.

So far I have failed using grabframe(), blob, and videotexture.

for instance, this doesn’t work (CamTex is the rendertarget):

> imageCapture.grabFrame().then(function(imageBitmap) {  
> CamTex.texture.clone(imageBitmap);

neither does this:

> CamTex.texture.getContext(‘2d’).drawImage(imageBitmap, 0, 0);

nor this:

> CAMTex.texture.clone(URL.createObjectURL(blob));

Perhaps the answer is in this example [three.js webgl - materials - video - webcam](https://threejs.org/examples/webgl_materials_video_webcam.html) where the webcam is rendered on a videotexture that is used in a scene, but… it’s a texture, not a rendertarget and whatever I tried, it failed too. Obviously, I’m not doing it right in any of the above approaches.

I want to avoid drawing the frame(s) on the canvas, then copying from the canvas etc.  
The video frame data is f\*\*\* bytes, not …peanuts(!) so I presume that it has to be an efficient way, right? 😉

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [April 26, 2021, 11:20am UTC](https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706/2 "2021-04-26T11:20:07Z")

</div>

> [@dllb](#):
>
> I need to post-process the device camera frames with a custom shader, so the copy of the actual image data to the render target must be as cheap as possible,

You don’t need a render target for this. You can use a video texture as the input for your shader.

---

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [April 26, 2021, 11:58am UTC](https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706/3 "2021-04-26T11:58:37Z")

</div>

I’m trying this, I’m not getting an error, but I’m not getting an image rendered either…  
The image displays in the hidden html video element if I unhide it, but I get a black screen from the shader.

---

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [April 26, 2021, 12:12pm UTC](https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706/4 "2021-04-26T12:12:12Z")

</div>

Got it! I was passing the video texture as CamTex.texture to the shader as we do with the render targets, when I changed that to just CamTex it worked, thank you very much Mugen87!

---

<div class="post-metadata">

**Author:** ![Walker221](https://avatars.discourse-cdn.com/v4/letter/w/e47774/32.png) [@Walker221](https://discourse.threejs.org/u/Walker221)\
**Post date:** [April 28, 2021, 10:21am UTC](https://discourse.threejs.org/t/whats-the-fastest-way-to-copy-a-webcam-frame-to-a-webglrendertarget/25706/5 "2021-04-28T10:21:34Z")

</div>

The size parameters in `renderer.setSize()` are used by the renderer to set the viewport when rendering to the _screen only_ .

When the renderer renders to an offscreen render target, the size of the texture rendered to is given by the parameters `renderTarget.width` and `renderTarget.height` .

So the answer to your question is that it is OK to use the same renderer for both; there is no inefficiency.