Adding triplanar mapping

[Fyrestar]

This would be a useful feature to have by default, besides terrains, when sculpting shapes or using primitives to construct a scene. It currently requires to generate a geometry with proper UV coordinates.

I'd suggest local and global mapping, since organic textures work fine for mixed axes and will then seamlessly mix with intersecting objects.

I've implemented it with a mapping property on the material which is by default THREE.UVMapping, in setProgram i set a modelScale uniform for local mapping.

https://mevedia.com/img/triplanar.mp4

[mrdoob]

Sounds good to me. Should it be THREE.TriplanarMapping?

[mrdoob]

Actually, it may be tricky to implement in the current material/texture API design, but maybe it's easier in the node material design?

/ping @sunag

[sunag]

but maybe it's easier in the node material design?

Certainly is more easier creating a node for this... and follow the code bellow TriplanarMapping is not only a UV change it should be liked to texture for the blending:

https://github.com/keijiro/StandardTriplanar/blob/33544a08761f8f028f5e76785c697ad3df7370e4/Assets/Triplanar/Shaders/StandardTriplanar.shader#L65-L76

[sunag]

Maybe something like:

var tex = new THREE.TriplanarTextureNode( texture, uv );

[sunag]

I've implemented it with a mapping property on the material which is by default THREE.UVMapping, in setProgram i set a modelScale uniform for local mapping.

The approach of the video would be something like:?

var uvModelScale = new THREE.OperatorNode(
	new THREE.UVNode(),
	new THREE.Vector3Node( model.scale ),
	THREE.OperatorNode.MUL
);

[Fyrestar]

I've implemented it in the THREE shader chunks (the video), for every map type there is just simple #ifdef either using texture2D or textureTriplanar. It's also required to either pass the worldPosition or localPosition ( position * modelScale ). The normal used for blending also needs to be passed in the right space either object or world.

This technique uses the planes of all axes and a texture sample per axis and blends them by the normal. All core changes it required where in the WebGLRenderer.js setProgram for the model scale uniform if the material uses triplanar mapping and in WebGLProgram.js setting the mapping constant of the material in the fragment header.

[Mugen87]

Since there is a node example demonstrating triplanar mapping, this issue can be closed. This approach will also be possible with the new material system.

[ghost]

@Mugen87 Hi Michael, I could not see the triplanar example you are talking about,

Could you please clarify?

Thanks

[Mugen87]

The mentioned example is not available anymore since it depended on the "old" node material which was removed with r138. Over time there will be a new example that shows how to do this with the "new" node system.