solved triplanar material issues

[nittrus]

So I can either use Triplanar Material or have shadows it seems..

I get the following when I try to use ground.receiveShadows=true;

babylon.js:3 BJS - [16:18:56]: Unable to compile effect with current defines. Trying next fallback.t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Unable to compile effect with current defines. Trying next fallback.t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Unable to compile effect with current defines. Trying next fallback.t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Unable to compile effect: t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Vertex shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Fragment shader:triplanart._ErrorEnabled @ babylon.js:3t._dumpShadersName @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Defines: #define DIFFUSEX
#define DIFFUSEY
#define DIFFUSEZ
#define BUMPX
#define BUMPY
#define BUMPZ

#define SPECULARTERM
#define NORMAL
#define NUM_BONE_INFLUENCERS 0
#define BonesPerMesh 0
#define LIGHT0
#define DIRLIGHT0

#define DIRLIGHT1

#define DIRLIGHT2

#define SHADOWS

#define SHADOWFULLFLOAT
t._ErrorEnabled @ babylon.js:3t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15t._prepareEffect @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadFragmentShader @ babylon.js:15(anonymous function) @ babylon.js:15t._processIncludes @ babylon.js:15(anonymous function) @ babylon.js:15t._loadVertexShader @ babylon.js:15t @ babylon.js:15s.createEffect @ babylon.js:5t.isReady @ babylon.triPlanarMaterial.min.js:1r.render @ babylon.js:13t.render @ babylon.js:13t.renderUnsorted @ babylon.js:10t.render @ babylon.js:10t.render @ babylon.js:10i._renderForCamera @ babylon.js:12i._processSubCameras @ babylon.js:12i.render @ babylon.js:12(anonymous function) @ index.html:1374s._renderLoop @ babylon.js:4
babylon.js:3 BJS - [16:18:56]: Error: ERROR: 0:83: '{' : unexpected token 
ERROR: 0:83: 'syntax error' : invalid expression 
ERROR: 0:83: '{' : unexpected token after conditional expression 
ERROR: 0:163: '{' : unexpected token 
ERROR: 0:163: 'syntax error' : invalid expression 
ERROR: 0:163: '{' : unexpected token after conditional expression 

 

It's fine up until I enable receiveShadows on the ground mesh..
I can not reproduce this in PG, so not sure how to explain it in much further details than the above.
I am using Babylon 2.5-beta which the PG also is using.

Perhaps there is another extension I need to have enabled or something? It really didn't look complex at all, so not sure why I am getting this behaviour!

[GameMonetize]

Ping @Luaacro

[julien-moreau]

Thanks for the ping @Deltakosh

@nittrus, looks like you don't have the latest version of the material from the materials library. Can you get the latest version and re-gulp it ?

I ask this before because the error is the same than another post where there were a problem with SHADOWFULLFLOAT

Thanks !

[nittrus]

Just now, Luaacro said:

Thanks for the ping @Deltakosh

@nittrus, looks like you don't have the latest version of the material from the materials library. Can you get the latest version and re-gulp it ?

I ask this before because the error is the same than another post where there were a problem with SHADOWFULLFLOAT

Thanks !

OK I downloaded it from the library, I didn't know there was multiple versions there, I'll dig around and see if I can find it, thanks!

[julien-moreau]

In fact, there are multiple versions to stay up-to-date with the shader includes (shared between all the shaders of Babylon.js). The updates are almost only fixes

[nittrus]

OK This is the one I find and am using already:

https://github.com/BabylonJS/Babylon.js/blob/master/materialsLibrary/dist/babylon.triPlanarMaterial.min.js

I assume this is latest?

[nittrus]

Also I noticed that the tutorial page doesn't have a link or explanation that one has to include anything, so people may assume it's built into Babylon, I knew otherwise and went to the GitHub to find it. So a little blurb at the top of this page http://doc.babylonjs.com/extensions/Tri_Planar_Mapping pointing to the place to get it would be helpful.

Cheers!

[julien-moreau]

In fact, the main title of this page is "extensions" so it is not addressing the core of Babylon.js

But you are right, I'll update the doc tell that the materials can be found in the materials library on github

Thanks for your feedback !

[nittrus]

3 hours ago, Luaacro said:

In fact, the main title of this page is "extensions" so it is not addressing the core of Babylon.js

But you are right, I'll update the doc tell that the materials can be found in the materials library on github

Thanks for your feedback !

Cool, thanks!

[nittrus]

This issue persists in Babylon v2.5

When setting receiveShadows to true I get all the errors above, if I set to false I do not.

Also, when receiveShadows is set to false on my terrain tiles tri-planar material looks like this for some reason..

Keep in mind each tile is using the same material and same exact setup in general, it either has 0 height or what ever the vertices are set to is the only difference between tiles.
Notice how many of the tiles are black, these are all negative X and Z coordinates, that is the only thing the black ones have in common, so it seems tri-planar mapping doesn't apply to any mesh that has a negative position.. What's going on here? LOL

I would love to use tri-planar mapping as it would solve UV stretching but it simply doesn't work yet, unless I'm doing something wrong.. I see no restrictions or anything I should be doing different in documentation over the regular material.

[nittrus]

Here is source code of what I am doing..

	//Setup TriPlanarMaterial for terrain
	trimat = new BABYLON.TriPlanarMaterial("trimat", scene);
    trimat.diffuseTextureX = new BABYLON.Texture("img/rock.png", scene);
    trimat.diffuseTextureY = new BABYLON.Texture("img/grass.png", scene);
    trimat.diffuseTextureZ = new BABYLON.Texture("img/floor.png", scene);
    trimat.normalTextureX = new BABYLON.Texture("img/rockn.png", scene);
    trimat.normalTextureY = new BABYLON.Texture("img/grassn.png", scene);
    trimat.normalTextureZ = new BABYLON.Texture("img/rockn.png", scene);
    trimat.specularPower = 64;
    trimat.tileSize = 2;

	// Add Tile
	var addtile = function(tileZ,tileX,fog){
			if(!fog){var sd=32;} else {var sd = 2;}
		var mesh2 = BABYLON.Mesh.CreateGround(tileZ+'z'+tileX+'x', terrasize, terrasize, sd, scene);
		mesh2.material = trimat;
			//Set default level
			var ind = mesh2.getIndices();
			var posi = mesh2.getVerticesData(BABYLON.VertexBuffer.PositionKind);
				for(var i=0; i < ind.length; i++){
				var ind0 = ind[i*3];
				var ind1 = ind[i*3+1];
				var ind2 = ind[i*3+2];
					posi[ind0*3+1]=posi[ind1*3+1]=posi[ind2*3+1]=dheight;
				}
			mesh2.setVerticesData(BABYLON.VertexBuffer.PositionKind, posi);
		mesh2.position = new BABYLON.Vector3(tileX,0,tileZ);
			if(wireframemode && !fog){mesh2.material.wireframe = true;}
			if(!fog){
			mesh2.id = mesh2.name = tileZ+'z'+tileX+'x'; //ID based off of coordinates
			BABYLON.Tags.AddTagsTo(mesh2, "terra");
			mesh2.setPhysicsState(BABYLON.PhysicsEngine.HeightmapImpostor, { mass: 0, friction: 1000 });
				if(tshadows){terrain_sg.getShadowMap().renderList.push(mesh2);}
			loadtile(mesh2.id);
			}
		mesh2.receiveShadows = true;
		mesh2.isBlocker = true;
		mesh2.renderingGroupId=2;
	}

 

[nittrus]

I found that this issues is the same for trying to receive shadows on the built in watermaterial, so maybe it is related?

waterMesh.receiveShadows=true
true
babylon.2.5.js:3 BJS - [17:26:31]: Unable to compile effect: t._ErrorEnabled @ babylon.2.5.js:3t._prepareEffect @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._processIncludes @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._loadFragmentShader @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._processIncludes @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._loadVertexShader @ babylon.2.5.js:15t @ babylon.2.5.js:15s.createEffect @ babylon.2.5.js:5n.isReady @ water.min.js:1r.render @ babylon.2.5.js:13t.render @ babylon.2.5.js:14t.renderUnsorted @ babylon.2.5.js:11t.render @ babylon.2.5.js:11t.render @ babylon.2.5.js:10i._renderForCamera @ babylon.2.5.js:12i._processSubCameras @ babylon.2.5.js:12i.render @ babylon.2.5.js:12dorender @ index.html:410(anonymous function) @ index.html:334s._renderLoop @ babylon.2.5.js:4
babylon.2.5.js:3 BJS - [17:26:31]: Defines: #define BUMP
#define REFLECTION
#define FOG
#define NORMAL
#define UV1
#define NUM_BONE_INFLUENCERS 0
#define BonesPerMesh 0
#define SPECULARTERM
#define LIGHT0
#define DIRLIGHT0
#define LIGHT1
#define DIRLIGHT1
#define LIGHT2
#define DIRLIGHT2
#define SHADOW0
#define SHADOWS
#define SHADOWPCF0
#define SHADOW1
#define SHADOWPCF1
#define SHADOWFULLFLOAT
t._ErrorEnabled @ babylon.2.5.js:3t._prepareEffect @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._processIncludes @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._loadFragmentShader @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._processIncludes @ babylon.2.5.js:15(anonymous function) @ babylon.2.5.js:15t._loadVertexShader @ babylon.2.5.js:15t @ babylon.2.5.js:15s.createEffect @ babylon.2.5.js:5n.isReady @ water.min.js:1r.render @ babylon.2.5.js:13t.render @ babylon.2.5.js:14t.renderUnsorted @ babylon.2.5.js:11t.render @ babylon.2.5.js:11t.render @ babylon.2.5.js:10i._renderForCamera @ babylon.2.5.js:12i._processSubCameras @ babylon.2.5.js:12i.render @ babylon.2.5.js:12dorender @ index.html:410(anonymous function) @ index.html:334s._renderLoop @ babylon.2.5.js:4
babylon.2.5.js:3 BJS - [17:26:31]: Error: ERROR: 0:81: '{' : unexpected token 
ERROR: 0:81: 'syntax error' : invalid expression 
ERROR: 0:81: '{' : unexpected token after conditional expression 
ERROR: 0:163: '{' : unexpected token 
ERROR: 0:163: 'syntax error' : invalid expression 
ERROR: 0:163: '{' : unexpected token after conditional expression 
 

[nittrus]

Just a follow up, I had to set the terrain tri-planar mapping material needDepthPrePass to true.

trimaterial.needDepthPrePass=true;

This resolves the issue, just in case anyone needs to know.

[Guest]

Thanks for getting back to us

Flagging this topic as solved.