Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Nasimi The Shader Guru

MackeyK24

By MackeyK24,
in Questions & Answers

 Share

Recommended Posts

MackeyK24 Newbie

MackeyK24

Posted
Posted

Yo @NasimiAsl ... You still around ??? I need your expertise bro... I still can get Texture Atlas at the shader level... Whenever I try use GLSL fract() to tile into the texture is leaves edge seems... You tried to help once with some custom 4 tapping code... but never really worked ... especially from far away ...

Anyways... I am ready to release the 3.1 beta but I CANNOT with the terrain builder like it it... Terrains will play a big part in your "Unity-Like" development using the BabylonJS Toolkit... So please bro... if you got time... I need you to help me fix that shader part... I can send you the whole project so you have the code to work with.

I actually have a small list of things I need to get working... but I can at least release the toolkit if I can just fix the texture atlas problem for my terrain builder :)

 

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

 


Some of the CYOS examples dont come up anymore... not sure why.

Make sure your textures you are using are in fact "tileable" and it should work!

also, Im not sure if this is the one I had working or not but:

  

BABYLON.Effect.ShadersStore["teriableBasicVertexShader"]= "precision highp float;\r\n"+

                "// Attributes\r\n"+
                "attribute vec3 position;\r\n"+
                "attribute vec3 normal;\r\n"+
                "attribute vec2 uv;\r\n"+

                "// Uniforms\r\n"+
                "uniform mat4 world;\r\n"+
                "uniform mat4 worldViewProjection;\r\n"+

                "// Varying\r\n"+
                "varying vec3 vPositionW;\r\n"+
                "varying vec3 vNormalW;\r\n"+
                "varying vec2 vUV;\r\n"+

                "void main(void) {\r\n"+
                "    vec4 outPosition = worldViewProjection * vec4(position, 1.0);\r\n"+
                "    gl_Position = outPosition;\r\n"+
                "    \r\n"+
                "    vPositionW = vec3(world * vec4(position, 1.0));\r\n"+
                "    vNormalW = normalize(vec3(world * vec4(normal, 0.0)));\r\n"+
                "    \r\n"+
                "    vUV = uv;\r\n"+
                "}\r\n";
				
				BABYLON.Effect.ShadersStore["teriableBasicFragmentShader"]=                         "precision highp float;\r\n"+

                "// Lights\r\n"+
                "varying vec3 vPositionW;\r\n"+
                "varying vec3 vNormalW;\r\n"+
                "varying vec2 vUV;\r\n"+

                "// Refs\r\n"+
                "uniform sampler2D textureBank;\r\n"+
                "const vec3 up = vec3(0.0,1.0,0.0);\r\n"+

                "float rangeV(float v, float x, float y){\r\n"+
                "    return 1.0-max(0.0 , min(1.0 , (v - y)/(y - x)));\r\n"+
                "}\r\n"+
                "//http://stackoverflow.com/questions/4200224/random-noise-functions-for-glsl\r\n"+
                "float snoise(vec2 co)\r\n"+
                "{\r\n"+
                "    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\r\n"+
                "}\r\n"+

                "void main(void) {\r\n"+
                "   vec2 r[4];//RANGES\r\n"+
                "   r[0] = vec2(-50.0,-30.0);\r\n"+
                "   r[1] = vec2(-30.0,10.0);\r\n"+
                "   r[2] = vec2(10.0,45.0);\r\n"+
                "   r[3] = vec2(45.0,50.0);\r\n"+
                "   vec2 aR[4];\r\n"+
                "   aR[0] = vec2(0.0,0.35);\r\n"+
                "   aR[1] = vec2(0.35,0.5);\r\n"+
                "   aR[2] = vec2(0.5,0.98);\r\n"+
                "   aR[3] = vec2(0.98,1.0);\r\n"+
                "   \r\n"+
                "   float angle = max(0., dot(vNormalW, up));//ANGLE 0:1\r\n"+
                "   float el = vPositionW.y; //ELEVATION\r\n"+
                "   /*vec3 color;\r\n"+
                "   if(angle >= 0.0 && angle <= 0.35 ){\r\n"+
                "     color = vec3(angle,1.,1.); //BASE COLOR\r\n"+
                "   }else if(angle > 0.35 && angle <= 0.5 ){\r\n"+
                "      color = vec3(1.0,angle,1.); //BASE COLOR\r\n"+
                "   }else if(angle == 1.0){\r\n"+
                "      color = vec3(0.0,0.0,0.0); //BASE COLOR\r\n"+
                "   }else{\r\n"+
                "      color = vec3(1.0,1.0,angle); //BASE COLOR\r\n"+
                "   }*/\r\n"+
                "   vec3 color = vec3(1.0,1.0,1.0); //BASE COLOR\r\n"+
                "   vec3 rc[4];  //RANGE COLORS\r\n"+
                "   rc[0] = vec3(0.4,0.4,0.2);\r\n"+
                "   rc[1] = vec3(0.8,0.8,0.3);\r\n"+
                "   rc[2] = vec3(0.4,0.8,0.4);\r\n"+
                "   rc[3] = vec3(0.8,0.8,0.9);\r\n"+
                "   vec3 ac[16];  //ANGLE COLORS\r\n"+
                "   //ZONE 1:\r\n"+
                "   ac[0] = vec3(0.2,0.2,0.0);\r\n"+
                "   ac[1] = vec3(0.4,0.4,0.2);\r\n"+
                "   ac[2] = vec3(0.5,0.5,0.2);\r\n"+
                "   ac[3] = vec3(-0.8,-0.8,-0.6);\r\n"+
                "   //ZONE 2:\r\n"+
                "   ac[4] = vec3(0.0,0.4,0.4);\r\n"+
                "   ac[5] = vec3(0.6,0.6,0.6);\r\n"+
                "   ac[6] = vec3(-0.3,0.0,0.3);\r\n"+
                "   ac[7] = vec3(-0.2,-0.2,0.0);\r\n"+
                "   //ZONE 3:\r\n"+
                "   ac[8] = vec3(0.0,0.4,0.0);\r\n"+
                "   ac[9] = vec3(-0.2,-0.2,0.0);\r\n"+
                "   ac[10] = vec3(0.0,0.6,0.6);\r\n"+
                "   ac[11] = vec3(0.0,-0.8,0.0);\r\n"+
                "   //ZONE 4:\r\n"+
                "   ac[12] = vec3(-0.5,-0.5,-0.5);\r\n"+
                "   ac[13] = vec3(-1.0,0.6,0.0);\r\n"+
                "   ac[14] = vec3(-1.0,0.0,0.0);\r\n"+
                "   ac[15] = vec3(0.2,-0.6,-0.6);\r\n"+
                "   \r\n"+
                "   float ap[4]; //Angle Blend PERCENTAGE\r\n"+
                "    ap[0] = rangeV(angle, aR[0].x, aR[0].y);\r\n"+
                "    ap[1] = rangeV(angle, aR[1].x, aR[1].y);\r\n"+
                "    ap[2] = rangeV(angle, aR[2].x, aR[2].y);\r\n"+
                "    ap[3] = rangeV(angle, aR[3].x, aR[3].y);\r\n"+
                "    \r\n"+
                "    //Mix into BaseColor for Zones;\r\n"+
                "    //Zone 1:\r\n"+
                "    rc[0] = normalize(rc[0]-(ac[0]*(ap[0]*0.5)));\r\n"+
                "    rc[0] = normalize(rc[0]-(ac[1]*(ap[1]*0.5)));\r\n"+
                "    rc[0] = normalize(rc[0]-(ac[2]*(ap[2]*0.5)));\r\n"+
                "    rc[0] = normalize( rc[0]-(ac[3]*(ap[3]*0.5)));\r\n"+
                "    //Zone 2:\r\n"+
                "    rc[1] = normalize(rc[1]-(ac[4]*(ap[0]*0.5)));\r\n"+
                "    rc[1] = normalize(rc[1]-(ac[5]*(ap[1]*0.5)));\r\n"+
                "    rc[1] = normalize(rc[1]-(ac[6]*(ap[2]*0.5)));\r\n"+
                "    rc[1] = normalize( rc[1]-(ac[7]*(ap[3]*0.5)));\r\n"+
                "    //Zone 3:\r\n"+
                "    rc[2] = normalize(rc[2]-(ac[8]*(ap[0]*0.5)));\r\n"+
                "    rc[2] = normalize(rc[2]-(ac[9]*(ap[1]*0.5)));\r\n"+
                "    rc[2] = normalize(rc[2]-(ac[10]*(ap[2]*0.5)));\r\n"+
                "    rc[2] = normalize( rc[2]-(ac[11]*(ap[3]*0.5)));\r\n"+
                "    //Zone 4:\r\n"+
                "    rc[3] = normalize(rc[3]-(ac[12]*(ap[0]*0.5)));\r\n"+
                "    rc[3] = normalize(rc[3]-(ac[13]*(ap[1]*0.5)));\r\n"+
                "    rc[3] = normalize(rc[3]-(ac[14]*(ap[2]*0.5)));\r\n"+
                "    rc[3] = normalize( rc[3]-(ac[15]*(ap[3]*0.5)));\r\n"+
                "   \r\n"+
                "    float rp[4]; //RANGE BLEND PERCENTAGE\r\n"+
                "    rp[0] = rangeV(el, r[0].x, r[0].y);\r\n"+
                "    rp[1] = rangeV(el, r[1].x, r[1].y);\r\n"+
                "    rp[2] = rangeV(el, r[2].x, r[2].y);\r\n"+
                "    rp[3] = rangeV(el, r[3].x, r[3].y);\r\n"+
                "   \r\n"+
                "   //Slight Blending nouse... this could be better...\r\n"+
                "   if(rp[0]<=0.25){\r\n"+
                "        rp[0]*=snoise(vPositionW.xz);\r\n"+
                "    }\r\n"+
                "    if(rp[1]<=0.25){\r\n"+
                "        rp[1]*=snoise(vPositionW.xz);\r\n"+
                "    }\r\n"+
                "    if(rp[2]<=0.25){\r\n"+
                "        rp[2]*=snoise(vPositionW.xz);\r\n"+
                "    }\r\n"+
                "    if(rp[3]<=0.25){\r\n"+
                "        rp[3]*=snoise(vPositionW.xz);\r\n"+
                "    }\r\n"+
                "    \r\n"+
                "    \r\n"+
                "    //RANGE COLOR MIX\r\n"+
                "    color = mix(color, rc[3], rp[3]);\r\n"+
                "    color = mix(color, rc[2], rp[2]);\r\n"+
                "    color = mix(color, rc[1], rp[1]);\r\n"+
                "    color = mix(color, rc[0], rp[0]);\r\n"+
                "    \r\n"+
                "    vec3 vLightPosition = vec3(-2,100,5);\r\n"+
                "    // Light\r\n"+
                "    vec3 lightVectorW = normalize(vLightPosition - vPositionW);\r\n"+
                "    // diffuse\r\n"+
                "    float ndl = max(0., dot(vNormalW, lightVectorW));\r\n"+
                "    color*=ndl;\r\n"+
                "    \r\n"+
                "    gl_FragColor = vec4(color, 1.);\r\n"+
                "}\r\n";
				
				var textureBank = new Array();
				var textureLocations = [
				//ZONE 1:
					"./textures/Beach_Rocks.jpg",//BASE
					"./textures/Sand_2.jpg",//Angle Zone 1
					"./textures/Sand_2.jpg",//Angle Zone 2
					"./textures/Sand_1.jpg",//Angle Zone 3
					"./textures/Rocks_2.jpg",//Angle Zone 4
				];
				
				$.each(textureLocations, function(i,e){
					textureBank.push(new BABYLON.Texture(e, scene));
					textureBank[i].wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
					textureBank[i].wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;
					});
					
					
				teriableBasic = new BABYLON.ShaderMaterial("teriableBasic", scene, {
                    vertex: "teriableBasic",
                    fragment: "teriableBasic",
                	},
                    {
                        attributes: ["position", "normal", "uv"],
                        uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
                    });
				
				teriableBasic.setTexture("textureBank", textureBank);

Now that I look at that though, I think that's the basic color one...  Ill have to go dig up the one that uses the texture atlas.  @MackeyK24, I get off early today like around 130ish send me a message or something to remind me to dig the real one up I'm a space cadet.

Link to comment
Share on other sites
MackeyK24 Newbie

MackeyK24

Posted
  • Author
Posted
6 hours ago, Pryme8 said:

Now that I look at that though, I think that's the basic color one...  Ill have to go dig up the one that uses the texture atlas.  @MackeyK24, I get off early today like around 130ish send me a message or something to remind me to dig the real one up I'm a space cadet.

Yo @Pryme8 ... Just checking to see if you can DIG-UP the texture atlas code... PLEASE :)

 

Link to comment
Share on other sites
Pryme8 Newbie

Pryme8

Posted
Posted

I think this was close to a working version:  
Sorry Im having trouble finding some of my older files.

I cant find the one with the textures on the same image, but ill keep digging for that one.
  

BABYLON.Effect.ShadersStore["teriableBasicVertexShader"]= "precision highp float;\r\n"+



"// Attributes\r\n"+

"attribute vec3 position;\r\n"+

"attribute vec3 normal;\r\n"+

"attribute vec2 uv;\r\n"+



"// Uniforms\r\n"+

"uniform mat4 world;\r\n"+

"uniform mat4 worldViewProjection;\r\n"+



"// Varying\r\n"+

"varying vec3 vPositionW;\r\n"+

"varying vec3 vNormalW;\r\n"+

"varying vec2 vUV;\r\n"+



"void main(void) {\r\n"+

" vec4 outPosition = worldViewProjection * vec4(position, 1.0);\r\n"+

" gl_Position = outPosition;\r\n"+

" \r\n"+

" vPositionW = vec3(world * vec4(position, 1.0));\r\n"+

" vNormalW = normalize(vec3(world * vec4(normal, 0.0)));\r\n"+

" \r\n"+

" vUV = uv;\r\n"+

"}\r\n";



BABYLON.Effect.ShadersStore["teriableBasicFragmentShader"]=

"precision highp float;\r\n"+



"// Lights\r\n"+

"varying vec3 vPositionW;\r\n"+

"varying vec3 vNormalW;\r\n"+

"varying vec2 vUV;\r\n"+



"// Refs\r\n"+

"uniform sampler2D z1b[3];\r\n"+

"uniform sampler2D z1a0[3];\r\n"+

"uniform sampler2D z1a1[3];\r\n"+

"uniform sampler2D z1a2[3];\r\n"+

"uniform sampler2D z1a3[3];\r\n"+





"int getIndex(float v) {\r\n"+

"if( v>=0.0 && v < 0.35){\r\n"+

"return 0;\r\n"+

"}else if( v>=0.35 && v < 0.65 ){\r\n"+

"return 1;\r\n"+

"}else{\r\n"+

"return 2;\r\n"+

"}\r\n"+

"}\r\n"+



"float rangeV(float v, float x, float y){\r\n"+

" return 1.0-max(0.0 , min(1.0 , (v - y)/(y - x)));\r\n"+

"}\r\n"+







"//http://stackoverflow.com/questions/4200224/random-noise-functions-for-glsl\r\n"+

"float snoise(vec2 co)\r\n"+

"{\r\n"+

" return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);\r\n"+

"}\r\n"+



"vec3 setBaseColor(int i, sampler2D tex[3]){\r\n"+

"if(i == 0){\r\n"+

"return texture2D(tex[0], vUV*60.0).rgb;\r\n"+

"}else if(i == 2){\r\n"+

"return texture2D(tex[1], vUV*60.0).rgb;\r\n"+

"}else{\r\n"+

"return texture2D(tex[2], vUV*60.0).rgb;\r\n"+

"}\r\n"+

"}\r\n"+



"vec3 mixAngles(vec3 color, sampler2D a0[3],sampler2D a1[3],sampler2D a2[3],sampler2D a3[3], float ap[4], int tid){\r\n"+

"if(tid == 0){\r\n"+

"color = mix(color, texture2D(a3[0], vUV*60.0).rgb, ap[3]);\r\n"+

"color = mix(color, texture2D(a2[0], vUV*60.0).rgb, ap[2]);\r\n"+

"color = mix(color, texture2D(a1[0], vUV*60.0).rgb, ap[1]);\r\n"+

"color = mix(color, texture2D(a0[0], vUV*60.0).rgb, ap[0]);\r\n"+

"return color;\r\n"+

"}else if(tid == 2){\r\n"+

"color = mix(color, texture2D(a3[1], vUV*60.0).rgb, ap[3]);\r\n"+

"color = mix(color, texture2D(a2[1], vUV*60.0).rgb, ap[2]);\r\n"+

"color = mix(color, texture2D(a1[1], vUV*60.0).rgb, ap[1]);\r\n"+

"color = mix(color, texture2D(a0[1], vUV*60.0).rgb, ap[0]);\r\n"+

"return color;\r\n"+

"}else{\r\n"+

"color = mix(color, texture2D(a3[2], vUV*60.0).rgb, ap[3]);\r\n"+

"color = mix(color, texture2D(a2[2], vUV*60.0).rgb, ap[2]);\r\n"+

"color = mix(color, texture2D(a1[2], vUV*60.0).rgb, ap[1]);\r\n"+

"color = mix(color, texture2D(a0[2], vUV*60.0).rgb, ap[0]);\r\n"+

"return color;\r\n"+

"}\r\n"+

"}\r\n"+





"void main(void) {\r\n"+

" vec2 r[4];//RANGES\r\n"+

" r[0] = vec2(0.0,10.0);\r\n"+

" r[1] = vec2(10.0,15.0);\r\n"+

" r[2] = vec2(15.0,45.0);\r\n"+

" r[3] = vec2(45.0,50.0);\r\n"+

" vec2 aR[4];\r\n"+

" aR[0] = vec2(0.0,0.2);\r\n"+

" aR[1] = vec2(0.2,0.45);\r\n"+

" aR[2] = vec2(0.45,0.75);\r\n"+

" aR[3] = vec2(0.75,1.0);\r\n"+

" \r\n"+



"const vec3 up = vec3(0.0,1.0,0.0);\r\n"+

" float angle = max(0., dot(vNormalW, up));//ANGLE 0:1\r\n"+

" float el = vPositionW.y; //ELEVATION\r\n"+

"vec2 pos = floor(vUV*60.0);\r\n"+

"int index = getIndex(snoise(pos));\r\n"+







"vec3 z1bc = setBaseColor(index, z1b);\r\n"+





" float ap[4]; //Angle Blend PERCENTAGE\r\n"+

" ap[0] = rangeV(angle, aR[0].x, aR[0].y);\r\n"+

" ap[1] = rangeV(angle, aR[1].x, aR[1].y);\r\n"+

" ap[2] = rangeV(angle, aR[2].x, aR[2].y);\r\n"+

" ap[3] = rangeV(angle, aR[3].x, aR[3].y);\r\n"+

" \r\n"+



"vec3 z1xc = mixAngles(z1bc, z1a0, z1a1, z1a2, z1a3, ap, index);\r\n"+









" gl_FragColor = vec4(z1xc, 1.0);\r\n"+

"}\r\n";





var textureBank = new Array();

var textureLocations = [

//ZONE 1:

"./textures/Beach_Rocks_A.jpg",//Zone 1 BASE A

"./textures/Beach_Rocks_B.jpg",//Zone 1 BASE B

"./textures/Beach_Rocks_C.jpg",//Zone 1 BASE C

"./textures/Beach_Rocks2_A.jpg",//Zone 1 Angle 0 Zone A

"./textures/Beach_Rocks2_B.jpg",//Zone 1 Angle 0 Zone B

"./textures/Beach_Rocks2_C.jpg",//Zone 1 Angle 0 Zone C

"./textures/Beach_Rocks3_A.jpg",//Zone 1 Angle 1 Zone A

"./textures/Beach_Rocks3_B.jpg",//Zone 1 Angle 1 Zone B

"./textures/Beach_Rocks3_C.jpg",//Zone 1 Angle 1 Zone C

"./textures/Beach_Sand2_A.jpg",//Zone 1 Angle 2 Zone A

"./textures/Beach_Sand2_B.jpg",//Zone 1 Angle 2 Zone B

"./textures/Beach_Sand2_C.jpg",//Zone 1 Angle 2 Zone C

"./textures/Beach_Sand_A.jpg",//Zone 1 Angle 3 Zone A

"./textures/Beach_Sand_B.jpg",//Zone 1 Angle 3 Zone B

"./textures/Beach_Sand_C.jpg",//Zone 1 Angle 3 Zone C

];



$.each(textureLocations, function(i,e){

textureBank.push(new BABYLON.Texture(e, scene));

});





teriableBasic = new BABYLON.ShaderMaterial("teriableBasic", scene, {

vertex: "teriableBasic",

fragment: "teriableBasic",

},

{

attributes: ["position", "normal", "uv"],

uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]

});



teriableBasic.setTexture("z1b[0]", textureBank[0]);

teriableBasic.setTexture("z1b[1]", textureBank[1]);

teriableBasic.setTexture("z1b[2]", textureBank[2]);

teriableBasic.setTexture("z1a0[0]", textureBank[3]);

teriableBasic.setTexture("z1a0[1]", textureBank[4]);

teriableBasic.setTexture("z1a0[2]", textureBank[5]);

teriableBasic.setTexture("z1a1[0]", textureBank[6]);

teriableBasic.setTexture("z1a1[1]", textureBank[7]);

teriableBasic.setTexture("z1a1[2]", textureBank[8]);

teriableBasic.setTexture("z1a2[0]", textureBank[9]);

teriableBasic.setTexture("z1a2[1]", textureBank[10]);

teriableBasic.setTexture("z1a2[2]", textureBank[11]);

teriableBasic.setTexture("z1a3[0]", textureBank[12]);

teriableBasic.setTexture("z1a3[1]", textureBank[13]);

teriableBasic.setTexture("z1a3[2]", textureBank[14]);

 

show.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...