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

		<script type="module">
			import Fungi		from "/fungi/Fungi.js";
			import App			from "/fungi/App.js";
			import Api			from "/fungi/Api.js";

			import Quad			from "/fungi/primitives/Quad.js";
			import { LoadInlineShader } from "/fungi/Shader.js";


			window.addEventListener("load",function(){
				App.launch(onRender, [
					{ type:"shader", file:"/fungi/shaders/VecWColor.txt" },
				])	.then( ()=>App.loadScene() )
					.then( ()=>{
						LoadInlineShader("inline_shader");
						onInit(); 
					}).catch( err=>console.log("err", err) );
			});

			function onRender(dt, ss){ Fungi.ecs.updateSystems(); }
			function onInit(){
				//........................				
				Fungi.camera.com.Transform.setPosition(0,2,5).setDegrees(-20,"x");

				//........................
				var eQuad = Quad("MatShader");

				//........................
				Fungi.loop.start();
			}
		</script>
	</head>
<body>
	<div><canvas id="FungiCanvas"></canvas></div>
	<span id="lblFPS">0</div>

<script id="inline_shader" type="plain/text">
	<shader>{ 
		"name"		: "Shader",
		"ubo"		: [ "UBOTransform", "UBOModel" ],
		"options"	: { "modelMatrix":true, "normalMatrix":false },
		"uniforms"	: []
	}<\shader>
	/*
		{ "name":"u_", "type":"sampler2D" },
		{ "name":"u_", "type":"vec3" },
		{ "name":"u_", "type":"float" },
	*/
	<materials> [ { 
		"name"		: "MatShader",
		"options"	: { "blend":false,"sampleAlphaCoverage":false, "depthTest":true },
		"uniforms"	: [ ]
	} ] <\materials>
	/*
		{ "name":"u_", "type":"tex", "value":"tex01"},
		{ "name":"u_", "value":[5,1,0] },
		{ "name":"u_", "type":"rgb", "value":"#ffffff"},
	*/		
	<vertex>
		#version 300 es
		layout(location=0) in vec3 a_position;
		layout(location=2) in vec2 a_uv;

		uniform UBOTransform{
			mat4 	projViewMatrix;
			vec3	cameraPos;
			float	globalTime;
			vec2	screenSize;
		};

		uniform UBOModel{
			mat4 	modelMatrix;
			mat3	normalMatrix;
		};

		out vec2 v_uv;

		void main(void){
			v_uv = a_uv;
			gl_Position = projViewMatrix * modelMatrix * vec4(a_position.xyz, 1.0);
		}
	<\vertex>

	<fragment>
		#version 300 es
		precision mediump float;

		in vec2 v_uv;

		out vec4 oFragColor;

		void main(void){
			oFragColor = vec4(v_uv, 0.0, 1.0);
		}
	<\fragment>
</script>

</body>
</html>