Texture Projection

Hi, community!

I was curious about how to project a texture, for example, on a plane, like a video projector does.
As usual, I’ve invented my own bicycle from the scratch with THREE.ShaderMaterial() and 5 vertices. (Robot Bender.jpg) :smile:

http://jsfiddle.net/prisoner849/461bvhoc/

VideoTextureProjection

This is a very rought concept, but it’s working as expected. Maybe somebody has/knows about a better approach. If so, I’d like to look at it (if it’s not classified top-secret :wink: )

From my point of view, this solution can be used in these forum threads:
https://discourse.threejs.org/t/projector-the-video/2900/10?u=prisoner849
https://discourse.threejs.org/t/interactive-projection-mapping-calculator/3212?u=prisoner849

4 Likes

Related: https://github.com/mrdoob/three.js/pull/13057

1 Like

@Mugen87

Thanks for the link, Michael.
During creation of the fiddle, I have a thought, that it would be cool to have a type of a light source (a separated one or extension of an existing one), which works like a real video projector, using a texture.

Thats very good, i’ve been waiting for more projector like features to become available, definitely a step in the right direction.

Reworked Example

I’ve updated the original example to use projector’s pre-computed viewMatrix and projectionMatrix. It might help people understand what’s happening inside the shader without having to understand each step of the projection.

It’s also 30% more performant on my machine.

2 Likes