Image Processing with Three.js With Effect Composer

javascript three.js webgl post-processing
user985030 picture user985030 · May 5, 2014 · Viewed 8.7k times · Source

Looking at the example here: http://threejs.org/examples/#webgl_postprocessing

I'm curious if there is a way to perform this post-processing business on a copy of the original data set. In other words, I want to display the original rendering of my scene in one container, and then would like to display the post-processed scene in another container. How is this done?

Thanks!

Answer

Abstract Algorithm picture Abstract Algorithm · May 5, 2014

You can take a look at this example: https://threejs.org/examples/#webgl_postprocessing_advanced

Generally, you render to a offscreen texture (not to the actual screen) and then use that as input texture for any other effect/primitive/whatever that you need to.

Related questions

How to stop a requestAnimationFrame recursion/loop?

I'm using Three.js with the WebGL renderer to make a game which fullscreens when a play link is clicked. For animation, I use requestAnimationFrame. I initiate it like this: self.animate = function() { self.camera.lookAt(self.scene.position); self.…

Read More
How to detect collision in three.js?

I am using three.js. I have two mesh geometries in my scene. If these geometries are intersected (or would intersect if translated) I want to detect this as a collision. How do I go about performing collision detection with …

Read More
Three.js - Change Material on Runtime

I have some .js files exported from Blender and load them with THREE.JSONLoader(); my callback: var callback = function( geometry ) { createMesh(geometry); my loading: loader.load( "Models/sculp.js", callback ); my create method: function createMesh(geometry){ inArr[id] = new THREE.…

Read More