Home

Awesome

three-png-stream

experimental

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

NPM

stream = pngStream(renderer, target, [opt])

Creates a new stream which reads pixel data from target in chunks, writing PNG encoded data.

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.