# Server-side render and get pixel data fast

**URL:** <https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784>\
**Category:** Questions\
**Tags:** webgl-renderer\
**Created:** [May 31, 2021, 5:03am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784 "2021-05-31T05:03:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![towrabbit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/towrabbit/32/6955_2.png) [@towrabbit](https://discourse.threejs.org/u/towrabbit)\
**Post date:** [May 31, 2021, 5:03am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/1 "2021-05-31T05:03:50Z")

</div>

Hi, I’m using three.js render a scene server-side without any GPU and I use puppeteer and headless Chrome.  
it worked readding pixels and save them as png files. but the speed is too damn slow. it took amost 300ms to render and 2000ms to read pixels data from canvas in a 2048\*2048 rendering context.  
I have heard that PBO(pixel buffer object) can speed up pixel reading progress. is there any way that I can get pixel data using PBO? or if there got a way that can get a video stream from canvas?  
here is what I found about OpenGL PBO and read pixel speedup related blog:

> **[Fast Pixel Transfers with Pixel Buffer Objects](https://www.roxlu.com/2014/048/fast-pixel-transfers-with-pixel-buffer-objects)**
>
> Using Pixel Buffer Objects (PBO) for fast asynchronous data transfers and OpenGL.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [May 31, 2021, 1:37pm UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/2 "2021-05-31T13:37:12Z")

</div>

I’m just rendering the WebGL canvas with cropped viewport into a 2D canvas and from there just either grab the pixel data or get the encoded image, this works fine for 8bit data.

---

<div class="post-metadata">

**Author:** ![towrabbit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/towrabbit/32/6955_2.png) [@towrabbit](https://discourse.threejs.org/u/towrabbit)\
**Post date:** [June 1, 2021, 5:01am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/3 "2021-06-01T05:01:56Z")

</div>

in fact I want post those video/image stream to server and send the video to another client, like emm, web chatting with camera maybe, but it’s a canvas WebGL render result. Thx for reply BTW

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 1, 2021, 5:54am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/4 "2021-06-01T05:54:34Z")

</div>

With the media api you can stream a canvas, not sure why you said:

> [@towrabbit](#):
>
> save them as png files

or a resolution of 2048x2048

---

<div class="post-metadata">

**Author:** ![towrabbit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/towrabbit/32/6955_2.png) [@towrabbit](https://discourse.threejs.org/u/towrabbit)\
**Post date:** [June 1, 2021, 6:35am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/5 "2021-06-01T06:35:24Z")

</div>

2048\*2048 is the size of the rendered result.  
there is a post related

> [@Server side rendering](https://discourse.threejs.org/t/server-side-rendering/10517/4):
>
> What I need is a headless service to create snapshots from different angles of a 3d model. We already have a working app on the browser, but we need a service just for pictures.

my aim is to build a server-side render application that can receive render request from clients, and then render a series of images with different camera angles for a 3d scene(just as the post above described). I created a headless Chrome by [puppeteer](https://developers.google.com/web/tools/puppeteer) , and then render the scene, get pixel data after render. but too much time is spent on render and read-pixel. so I wondering if I could get pixel data faster by other ways.  
oh I have changed topic BTW

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [June 1, 2021, 7:30am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/6 "2021-06-01T07:30:56Z")

</div>

Like i said the method i described should avoid the issue that readPixels causes, however it doesn’t accelerate rendering, for doing serious rendering server-side there should be a GPU installed.

---

<div class="post-metadata">

**Author:** ![towrabbit](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/towrabbit/32/6955_2.png) [@towrabbit](https://discourse.threejs.org/u/towrabbit)\
**Post date:** [June 1, 2021, 7:33am UTC](https://discourse.threejs.org/t/server-side-render-and-get-pixel-data-fast/26784/7 "2021-06-01T07:33:32Z")

</div>

oh thx I will try that