Combine THREE.WebGLRenderer and Kinetic.js Layers

Question

He Guys,

I'm trying to combine THREE.js and Kinetic.js in my web-application. I'm having problems doing this with the THREE.WebGLRenderer. How can I setup my view that I have a 3D-Layer that is rendered by the THREE.WebGLRenderer and a seperate Layer on top of that for 2D-Elements, like e.g. Labels etc., using Kinetic.js?

I've tried to give the WebGLRenderer the canvas element of an instance of a Kinetic.Layer Element. But it does not work.

this.renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true, canvas: this.layer3D.getCanvas()._canvas });

Until now I only found examples that do this with the THREE.CanvasRenderer.

Ideas somebody? Thanks a lot.

Answer 1

A canvas can have either a 2D context or a 3D context, not both as they are considered incompatible. When you pass the Canvas from kinetic layer, it already has a 2D context bound to it.

However you can have another HTML element (ex, DIV) on top of the GL rendered canvas.

Answer 2

Hello I just want to say this may not be possible. As far as I know KineticJS is based on Canvas. So what you wan to do is only possible using Canvas Renderer.

The workaround I can think of is, if the browser supports WebGL, you might be able to place the webGL element on top of your KineticJS element.