Awesome
three-png-stream
Streams a PNG encoded pixels from a ThreeJS WebGLRenderTarget
. This is done in chunks of gl.readPixels
, using gl-pixel-stream, and works with render targets upwards of 10000x10000 pixels in Chrome (or more, depending on your GPU).
The following transparent PNG image was generated with ThreeJS on the client side using the example/ code. See Running from Source for details.
<img src="example/snowden.png" width="50%" />Note: This only works on Three r69-71 and 74+.
Install
npm install three-png-stream --save
Example
var pngStream = require('three-png-stream')
// this will decide the output image size
var target = new THREE.WebGLRenderTarget(512, 512)
// draw your scene into the target
renderer.render(scene, camera, target)
// now you can write it to a new PNG file
var output = fs.createWriteStream('image.png')
pngStream(renderer, target)
.pipe(output)
Usage
stream = pngStream(renderer, target, [opt])
Creates a new stream
which reads pixel data from target
in chunks, writing PNG encoded data.
renderer
is the WebGLRenderer of ThreeJStarget
is the WebGLRenderTarget; you must render to it first!opt
are some optional settings:chunkSize
number of rows of pixels to read per chunk, default 128flipY
whether to flip the output on the Y axis, defaulttrue
format
a THREE texture format to use, defaults to the format intarget
stride
the number of channels per pixel, guessed from the format (default 4)onProgress
the progress function forgl-pixel-stream
, which has an event parameter withcurrent
,total
andbounds
for the current readPixel boudns
Running From Source
Clone and install:
git clone https://github.com/Jam3/three-png-stream.git
cd three-png-stream
npm install
Now run the following:
npm run start
And open the development server at http://localhost:9966/. Once the model appears, click anywhere to save a new snowden.png
to the example folder. You can also change the outputWidth
and outputHeight
, the max size is generally GPU-dependent. This is best used in Chrome.
License
MIT, see LICENSE.md for details.