lesson_035/test.html

<!DOCTYPE html>
<html>
	<head>
		<style>
			html,body{margin:0px; padding:0px; width:100%; height:100%;}
			body{background-color:#404040;}
			canvas{border:0px solid black;}
			div{display:flex; width:100%; height:100%; align-items:center; justify-content:center;}
			#lblFPS{position:absolute; top:0px; left:0px; background:gray; color:white; font-weight:bold; padding:5px 5px; width:40px; text-align:center; font-family:arial; font-size:13px;}
		</style>

		<script src="fungi.core.js"></script>
		<script src="fungi.primatives.js"></script>
		<script src="fungi.KBMCtrl.js"></script>
		<script src="fungi.Debug.js"></script>
		<script src="fungi.ext.js"></script>
		<script src="fungiApp.js"></script>

		<script>
			var gModel,gModel2;

			window.addEventListener("load",function(){
				FungiApp.startup();

				//.......................................................
				//Create Shaders and Materials
				var mat;
				Fungi.Shaders.New("DomShader","vertex_shader","fragment_shader")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);

				mat = Fungi.Shaders.Material.create("MatDomShader","DomShader");
				mat.drawMode = Fungi.gl.TRIANGLE_STRIP; //Fungi.gl.POINTS; //Fungi.gl.TRIANGLE_STRIP;
				mat.useCulling = true;

				Fungi.Shaders.New("LowPoly","vertex_lowpoly","fragment_lowpoly")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);
				mat = Fungi.Shaders.Material.create("MatLowPoly","LowPoly");
				mat.useCulling = true;
				mat.drawMode = Fungi.gl.TRIANGLE_STRIP; //Fungi.gl.TRIANGLE_STRIP;


				//Fungi.Shaders.New("WireFrame","vertex_wireframe","fragment_wireframe")
				//	.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
				//	.prepareUniformBlocks(FungiApp.uboTransform,0);
				//mat = Fungi.Shaders.Material.create("MatWireFrame","WireFrame");
				//mat.useCulling = false;
				//mat.useSampleAlphaCoverage = true;
				//mat.drawMode = Fungi.gl.TRIANGLES; //Fungi.gl.TRIANGLE_STRIP;

				//.......................................................
				//Prepare our Renderables
				//var model;
				var sphere = Fungi.Primatives.PolarSphere(10,10,2);
				gModel = new Fungi.Renderable(sphere,"MatLowPoly");//MatLowPoly MatDomShader
				//gModel.position.y = 2;
				gModel.rotation.rz(90 * Math.PI/180);
				gModel.scale.set(0.5,0.5,0.5);
				FungiApp.scene.push(gModel);

				gModel2 = roadModel();
				//model.rotation.z = 90;
				//model.position.y = 1;
				//model.rotation.rz(90 * Math.PI/180);
				//FungiApp.scene.push(model2);
				gModel2.parent = gModel;

				//.......................................................
				//Start Render Loop
				FungiApp.renderLoop.start();
			});

			function onRender(dt){
				FungiApp.update();
				gModel.rotation.rz(45 * dt * Math.PI/180);
				gModel2.rotation.rz(60 * dt * Math.PI/180);

				Fungi.Render(FungiApp.scene);
			}

			function roadModel(){
				var model = new FungiExt.DynamicMesh(1,1,"MatLowPoly");
				model.drawMode = Fungi.gl.TRIANGLE_STRIP;

				var path = [], inc = 6;
				road(path);
				FungiExt.Mesh.vertexOffset(path,[0,2.3,0]);
				FungiExt.Mesh.lathe(path,inc,"x",model.verts.data);
				FungiExt.Mesh.triangleStrip(inc,path.length/3,model.index.data,true,true);
				model.update();

				return model;
			}

			function road(ary){
				var outWidth = 2,
					outHeight = 0.4,
					inWidth = 1.6;
					inHeight = 0.3;

				var owh = outWidth * 0.5,
					ohh = outHeight * 0.5,
					iwh = inWidth * 0.5,
					ihh = inHeight * 0.5;

				ary.push(-owh,-ohh,0.0); //left out lower
				ary.push(-owh,ohh,0.0); //left out upper
				ary.push(-iwh,ohh,0.0); //left in upper
				ary.push(-iwh,ohh-ihh,0.0); //Left in lower

				for(var i=ary.length-3; i >= 0; i-=3) ary.push(-ary[i], ary[i+1], ary[i+2]);
			}
		</script>
	</head>
<body>
	<div><canvas id="FungiCanvas"></canvas></div>
	<span id="lblFPS">0</div>

	<script id="vertex_shader" type="x-shader/x-vertex">#version 300 es
		layout(location=0) in vec4 a_position;
		layout(location=1) in vec3 a_norm;
		layout(location=2) in vec2 a_uv;

		uniform UBOTransform{
			mat4 matProjection;
			mat4 matCameraView;
			vec3 posCamera;
		};

		uniform mat4 uModalMatrix;
		uniform mat3 uNormalMatrix;

		out highp vec2 vUV;
		out lowp vec3 color;

		void main(void){
			gl_PointSize = 12.0;
			if(a_position.w == 0.0) color = vec3(1.0,0.0,0.0);
			else if(a_position.w == 1.0) color = vec3(0.0,1.0,0.0);
			else color = vec3(0.6,0.6,0.6);

			vUV = a_uv;
			gl_Position =  matProjection * matCameraView * uModalMatrix * vec4(a_position.xyz, 1.0);
		}
	</script>
	<script id="fragment_shader" type="x-shader/x-fragment">#version 300 es
		precision mediump float;
		in highp vec2 vUV;
		in lowp vec3 color;
		out vec4 outColor;

		void main(void){
			outColor = vec4(color,1.0);
		}
	</script>

	<script id="vertex_lowpoly" type="x-shader/x-vertex">#version 300 es
		layout(location=0) in vec4 a_position;
		layout(location=1) in vec3 a_norm;
		layout(location=2) in vec2 a_uv;

		uniform UBOTransform{
			mat4 matProjection;
			mat4 matCameraView;
			vec3 posCamera;
		};

		uniform mat4 uModalMatrix;
		//uniform mat3 uNormalMatrix;

		out vec3 vWorldPos;
		out vec3 vCameraPos;
		out vec2 vLowPoly;

		const float uColumnCnt = 5.0;

		void main(void){
			//Identify Triangles in Quad, If y == 1, Then its the top triangle
			//01 01
			//00 01
			float verID	= float(gl_VertexID);
			float r		= floor(verID / uColumnCnt);
			if(mod(r,2.0) == 0.0) vLowPoly = vec2(0.0,1.0);
			else{
				// i % col == colIndex -> colIndex % 2 = 0-1
				if( mod( mod(verID,uColumnCnt) ,2.0) == 0.0) vLowPoly = vec2(0.0,0.0);
				//if( mod( verID ,2.0) == 0.0) vLowPoly = vec2(0.0,0.0);
				else vLowPoly = vec2(0.0,1.0);
			}

			//Set Out values
			vec4 wpos 	= uModalMatrix * vec4(a_position.xyz,1.0);
			vWorldPos	= wpos.xyz;
			vCameraPos	= (inverse(matCameraView) * vec4(posCamera,1.0)).xyz; //Need to pass Camera pos turned to WorldSpace avoid inverse matrix
			gl_Position	= matProjection * matCameraView * wpos;
		}
	</script>

	<script id="fragment_lowpoly" type="x-shader/x-fragment">#version 300 es
		precision mediump float;
	
		in vec3 vWorldPos;
		in vec3 vCameraPos;
		in vec2 vLowPoly;

		const vec3 uLightPos			= vec3(4.0,2.0,1.0);
		const vec3 uBaseColor			= vec3(1.0,0.5,0.5);
		const vec3 uLightColor			= vec3(1.0,1.0,1.0);

		const float uAmbientStrength	= 0.5;
		const float uDiffuseStrength	= 0.5;
		const float uSpecularStrength	= 0.2f;	//0.15
		const float uSpecularShininess	= 1.0f; //256.0

		out vec4 outColor;

		void main(void){
			float LowPolyFactor = (vLowPoly.y >= 0.9999)? 1.1 : 1.0;	//Determine LowPoly Strength
			vec3 pixelNorm = normalize( cross( dFdx(vWorldPos), dFdy(vWorldPos) ) ); //Calc the Normal of the Rasterizing Pixel

			//Ambient Lighting
			vec3 cAmbient		= uLightColor * uAmbientStrength;
			
			//Diffuse Lighting
			vec3 lightVector	= normalize(uLightPos - vWorldPos); //light direction based on pixel world position
			float diffuseAngle	= max( dot(pixelNorm,lightVector) ,0.0); //Angle between Light Direction and Pixel Direction (1==90d)
			vec3 cDiffuse		= uLightColor * diffuseAngle * uDiffuseStrength;

			//Specular Lighting
			vec3 camVector		= normalize(vCameraPos - vWorldPos); //Camera Direction based on pixel world position
			vec3 reflectVector	= reflect(-lightVector, pixelNorm); //Reflective direction of line from pixel direction as pivot.
			float specular		= pow( max( dot(reflectVector,camVector) ,0.0), uSpecularShininess ); //Angle of reflected light and camera eye
			vec3 cSpecular		= uLightColor * specular * uSpecularStrength;

			//Final Color
			outColor = vec4( uBaseColor * ((cAmbient + cDiffuse + cSpecular) * LowPolyFactor), 1.0);
		}
	</script>

	<script id="vertex_wireframe" type="x-shader/x-vertex">#version 300 es
		layout(location=0) in vec4 a_position;
		//layout(location=1) in vec3 a_norm;
		//layout(location=2) in vec2 a_uv;

		uniform UBOTransform{
			mat4 matProjection;
			mat4 matCameraView;
			vec3 posCamera;
		};

		uniform mat4 uModalMatrix;

		out vec3 vBaryCoord;

		void main(void){
			if(a_position.w == 0.0)			vBaryCoord = vec3(1.0,0.0,0.0);
			else if(a_position.w == 1.0)	vBaryCoord = vec3(0.0,1.0,0.0);
			else 							vBaryCoord = vec3(0.0,0.0,1.0);

			gl_Position =  matProjection * matCameraView * uModalMatrix * vec4(a_position.xyz, 1.0);
		}
	</script>
	<script id="fragment_wireframe" type="x-shader/x-fragment">#version 300 es
		precision mediump float;
		in vec3 vBaryCoord;

		out vec4 outColor;

		float edgeFactor(){
		    vec3 d = fwidth(vBaryCoord);
		    vec3 a3 = smoothstep(vec3(0.0), d*1.5, vBaryCoord);
		    return min(min(a3.x, a3.y), a3.z);
		}

		const float uLineWidth = 0.005;
		const float uFeather = 0.003;
		const vec4 uLineColor = vec4(0.0,0.0,0.0,1.0);
		const vec4 uFaceColor = vec4(0.5,0.5,0.5,0.8);

		void main(void){
			/*Simple idea of how to color the border*/
			if(any(lessThan(vBaryCoord, vec3(0.01)))){
			    outColor = uLineColor;
			}else{
			    outColor = uFaceColor;
			}
			
			//Set line width that always stays the same no matter the zoom.
			//outColor = mix(uLineColor, uFaceColor, edgeFactor());

			//How to set width and feathing, gets bigger/smaller based on zoom.
			//vec3 bcMix = smoothstep(vec3(uLineWidth),vec3(uLineWidth + uFeather),vBaryCoord);
			//float cmix = min(min(bcMix.x, bcMix.y), bcMix.z);
			//outColor = mix(uLineColor, uFaceColor, cmix);
		}
	</script>
</body>
</html>