bsergean · March 8, 2022 01:23 · hassaananjum · Jul 18, 2017 · kevinw · Oct 13, 2017
diff --git a/README.md b/README.md
diff --git a/offscreen_sample.coffee b/offscreen_sample.coffee

 # The required node modules
 THREE = require('three')
 PNG   = require('pngjs').PNG
 gl    = require("gl")()
 fs    = require('fs')

 # Parameters (the missing one is the camera position, see below)
 width  = 600
 height = 400
 path   = 'out.png'
 png    = new PNG({ width: width, height: height })

 # THREE.js business starts here
 scene = new THREE.Scene()

 # camera attributes
 VIEW_ANGLE = 45
 ASPECT = width / height
 NEAR = 0.1
 FAR  = 100

 # set up camera
 camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR)

 scene.add(camera)
 camera.position.set(0, 2, 2)
 camera.lookAt(scene.position)

 # mock object, not used in our test case, might be problematic for some workflow
 canvas = new Object()

 # The width / height we set here doesn't matter
 renderer = new THREE.WebGLRenderer({
    antialias: true,
    width: 0,
    height: 0,
    canvas: canvas, # This parameter is usually not specified
    context: gl     # Use the headless-gl context for drawing offscreen
 })

 # add some geometry
 geometry = new THREE.BoxGeometry( 1, 1, 1 )

 # add a material; it has to be a ShaderMaterial with custom shaders for now 
 # this is a work in progress, some related link / issues / discussions
 #
 # https://github.com/stackgl/headless-gl/issues/26
 # https://github.com/mrdoob/three.js/pull/7136
 # https://github.com/mrdoob/three.js/issues/7085
 material = new THREE.ShaderMaterial()
 vec4 = new THREE.Vector4( 1.0, 0.0, 0.0, 1.0 ) # red

 material.vertexShader = '''
 void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 }
 '''
 material.fragmentShader = '''
 uniform vec4 solidColor;

 void main() {
    gl_FragColor = solidColor;
 }
 '''
 material.uniforms = { solidColor: { type: "v4", value: vec4 } }

 # Create the mesh and add it to the scene
 cube     = new THREE.Mesh(geometry, material)
 scene.add(cube)

 # Let's create a render target object where we'll be rendering
 rtTexture = new THREE.WebGLRenderTarget(
    width, height, {
        minFilter: THREE.LinearFilter,
        magFilter: THREE.NearestFilter,
        format: THREE.RGBAFormat
 })

 # render
 renderer.render(scene, camera, rtTexture, true)

 # read render texture into buffer
 gl = renderer.getContext()

 # create a pixel buffer of the correct size
 pixels = new Uint8Array(4 * width * height)

 # read back in the pixel buffer
 gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)

 # lines are vertically flipped in the FBO / need to unflip them
 for j in [0...height]
    for i in [0...width]
        k = j * width + i
        r = pixels[4*k]
        g = pixels[4*k + 1]
        b = pixels[4*k + 2]
        a = pixels[4*k + 3]

        m = (height - j + 1) * width + i
        png.data[4*m]     = r
        png.data[4*m + 1] = g
        png.data[4*m + 2] = b
        png.data[4*m + 3] = a

 # Now write the png to disk
 stream = fs.createWriteStream(path)
 png.pack().pipe stream

 stream.on 'close', () ->
    # We're done !!
    console.log("Image written: #{ path }")
diff --git a/package.json b/package.json
 {
  "name": "offscreen-sample",
  "version": "1.0.0",

  "scripts": {
    "start": "coffee offscreen_sample.coffee",
    "compile": "coffee -c -b offscreen_sample.coffee && cat offscreen_sample.js"
  },

  "dependencies": {
    "three": "latest",
    "pngjs": "latest", 
    "gl": "latest"
  },

  "devDependencies": {
    "coffee-script": "latest"
  }
 }

	# The required node modules
	THREE = require('three')
	PNG = require('pngjs').PNG
	gl = require("gl")()
	fs = require('fs')

	# Parameters (the missing one is the camera position, see below)
	width = 600
	height = 400
	path = 'out.png'
	png = new PNG({ width: width, height: height })

	# THREE.js business starts here
	scene = new THREE.Scene()

	# camera attributes
	VIEW_ANGLE = 45
	ASPECT = width / height
	NEAR = 0.1
	FAR = 100

	# set up camera
	camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR)

	scene.add(camera)
	camera.position.set(0, 2, 2)
	camera.lookAt(scene.position)

	# mock object, not used in our test case, might be problematic for some workflow
	canvas = new Object()

	# The width / height we set here doesn't matter
	renderer = new THREE.WebGLRenderer({
	antialias: true,
	width: 0,
	height: 0,
	canvas: canvas, # This parameter is usually not specified
	context: gl # Use the headless-gl context for drawing offscreen
	})

	# add some geometry
	geometry = new THREE.BoxGeometry( 1, 1, 1 )

	# add a material; it has to be a ShaderMaterial with custom shaders for now
	# this is a work in progress, some related link / issues / discussions
	#
	# https://github.com/stackgl/headless-gl/issues/26
	# https://github.com/mrdoob/three.js/pull/7136
	# https://github.com/mrdoob/three.js/issues/7085
	material = new THREE.ShaderMaterial()
	vec4 = new THREE.Vector4( 1.0, 0.0, 0.0, 1.0 ) # red

	material.vertexShader = '''
	void main() {
	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
	'''
	material.fragmentShader = '''
	uniform vec4 solidColor;

	void main() {
	gl_FragColor = solidColor;
	}
	'''
	material.uniforms = { solidColor: { type: "v4", value: vec4 } }

	# Create the mesh and add it to the scene
	cube = new THREE.Mesh(geometry, material)
	scene.add(cube)

	# Let's create a render target object where we'll be rendering
	rtTexture = new THREE.WebGLRenderTarget(
	width, height, {
	minFilter: THREE.LinearFilter,
	magFilter: THREE.NearestFilter,
	format: THREE.RGBAFormat
	})

	# render
	renderer.render(scene, camera, rtTexture, true)

	# read render texture into buffer
	gl = renderer.getContext()

	# create a pixel buffer of the correct size
	pixels = new Uint8Array(4 * width * height)

	# read back in the pixel buffer
	gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels)

	# lines are vertically flipped in the FBO / need to unflip them
	for j in [0...height]
	for i in [0...width]
	k = j * width + i
	r = pixels[4*k]
	g = pixels[4*k + 1]
	b = pixels[4*k + 2]
	a = pixels[4*k + 3]

	m = (height - j + 1) * width + i
	png.data[4*m] = r
	png.data[4*m + 1] = g
	png.data[4*m + 2] = b
	png.data[4*m + 3] = a

	# Now write the png to disk
	stream = fs.createWriteStream(path)
	png.pack().pipe stream

	stream.on 'close', () ->
	# We're done !!
	console.log("Image written: #{ path }")
	{
	"name": "offscreen-sample",
	"version": "1.0.0",

	"scripts": {
	"start": "coffee offscreen_sample.coffee",
	"compile": "coffee -c -b offscreen_sample.coffee && cat offscreen_sample.js"
	},

	"dependencies": {
	"three": "latest",
	"pngjs": "latest",
	"gl": "latest"
	},

	"devDependencies": {
	"coffee-script": "latest"
	}
	}