lesson_041/test_gltf.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.downloader.js"></script>
		<script src="fungiApp.js"></script>

		<script src="fungi.gltf.js"></script>
		<script src="fungi.armature.js"></script>
		<script>
			var gModel;

			window.addEventListener("load",function(){
				var p = Downloader.start([
					{name:"Test",type:"gltf",file:"Pirate Girl_upload.gltf"} //RiggedSimple Pirate Girl_upload vive_controller
				]).then(function(){
					console.log("Downloader Complete");
					setTimeout(onInit,50); //Push it out into own thread, else errors in onInit will show up in the promise catch.
				}).catch(function(error){
					console.log("error",error);
				});
			});

			function onInit(){
				FungiApp.startup();

				//.......................................................
				//Create Shaders and Materials
				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.TRIANGLES;

				Fungi.Shaders.New("PhongShader","vertex_phong","fragment_phong")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);

				mat = Fungi.Shaders.Material.create("MatPhongShader","PhongShader");
				//mat.drawMode = Fungi.gl.TRIANGLES;

				/*
				Fungi.Shaders.New("SkinningShader","vertex_skinning","fragment_skinning")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4","uBones","mat4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);

				Fungi.Shaders.New("SkeletonShader","vertex_skeleton","fragment_skeleton")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);

				mat = Fungi.Shaders.Material.create("MatSkinningShader","SkinningShader");
				mat.useCulling = false;

				mat = Fungi.Shaders.Material.create("MatSkeletonShader","SkeletonShader");
				mat.useDepthTest = false;
				*/

				Fungi.Shaders.New("QSkinningShader","qvertex_skinning","qfragment_skinning")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4","uBones","mat2x4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);

				Fungi.Shaders.New("QSkeletonShader","qvertex_skeleton","qfragment_skeleton")
					.prepareUniforms(Fungi.UNI_MODEL_MAT_NAME,"mat4")
					.prepareUniformBlocks(FungiApp.uboTransform,0);

				mat = Fungi.Shaders.Material.create("QMatSkinningShader","QSkinningShader");
				mat = Fungi.Shaders.Material.create("QMatSkeletonShader","QSkeletonShader");
				mat.useDepthTest = false;
				//.......................................................
				//Prepare our Renderables
				
				/*Inline triangle
				var loader = new GLTFLoader().loadFromDom("gltf_tri",true);
				var m = loader.meshes[0];
				var vao = Fungi.Shaders.VAO.standardMesh("tri",m.vertices.compLen,m.vertices.data,null,null,m.indices.data,false);
				var gModel = new Fungi.Renderable(vao,"MatDomShader");
				FungiApp.scene.push(gModel);
				*/

				/*Vive Controller 
				var loader = new GLTFLoader().load(Downloader.Complete[0].dl,true);
				var m = loader.meshes[4];
				var vao = Fungi.Shaders.VAO.standardMesh("tri",m.vertices.compLen,m.vertices.data,null,null,m.indices.data,false);
				var gModel = new Fungi.Renderable(vao,"MatPhongShader");
				gModel.scale.set(4,4,4);
				gModel.rotation.rx(Math.PI);
				gModel.position.set(0,1,0);
				FungiApp.scene.push(gModel);
				*/

				/* RiggedSimple
				var loader = new GLTFLoader().load(Downloader.Complete[0].dl,true);
				var m = loader.meshes[0];
				var s = loader.skeletons[0];
				console.log(loader);
				*/

				/* Pirate Girl*/
				var loader = new GLTFLoader().load(Downloader.Complete[0].dl,true);
				var m = loader.meshes[1];
				var s = loader.skeletons[0];

				//.......................................
				var skeleton = new QSkeleton();
				for(var i=0; i < s.length; i++){
					skeleton.addBone(s[i].name,s[i].rotation,s[i].position,s[i].parent,s[i].jointNum);
				}
				skeleton.setBindPose();

				/* RiggedSimple
				skeleton.bones[1].rotation.rx(45 * Math.PI/180);
				*/

				/*Pirate Girl*/
				skeleton.bones[71].rotation.rx(45 * Math.PI/180);
				skeleton.bones[22].rotation.rx(45 * Math.PI/180);
				
				skeleton.update();


				//.......................................
				/**/
				var skelMesh = new QSkeletonMesh(skeleton,"QMatSkeletonShader",0.4);

				var gModel = new SkinnedMesh(m,"QMatSkinningShader"); //
				gModel.skeleton = skeleton;
				FungiApp.scene.push(gModel);
				FungiApp.scene.push(skelMesh);//Want this rendering ontop of Mesh
				

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


			function onRender(dt){
				FungiApp.update();
				Fungi.Render(FungiApp.scene);
			}
		</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 = 10.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_phong" type="x-shader/x-vertex">#version 300 es
		layout(location=0) in vec3 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 vec3 vWorldPos;
		out vec3 vCameraPos;

		void main(void){
			vCameraPos	= (inverse(matCameraView) * vec4(posCamera,1.0)).xyz; //Need to pass Camera pos turned to WorldSpace avoid inverse 

            vec4 pos = uModalMatrix * vec4(a_position,1.0);
            gl_Position =  matProjection * matCameraView * pos;
            vWorldPos = pos.xyz;

			vUV = a_uv;
		}
	</script>
	<script id="fragment_phong" type="x-shader/x-fragment">#version 300 es
		precision mediump float;
		in highp vec2 vUV;

		in vec3 vWorldPos;
		in vec3 vCameraPos;

		out vec4 outColor;

		const vec3 uLightPos			= vec3(4.0,2.0,1.0);
		const vec3 uBaseColor			= vec3(0.9,0.9,0.9);//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

		void main(void){
			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), 1.0);
		}
	</script>


	<script id="qvertex_skinning" 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;

		layout(location=3) in vec4 a_boneIdx;
		layout(location=4) in vec4 a_boneWeight;

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

		uniform mat4 uModalMatrix;
		uniform mat3 uNormalMatrix;
		uniform mat2x4[76] uBones;
		//uniform mat4[3] uBones;

		out highp vec2 vUV;

		out vec3 vWorldPos;
		out vec3 vCameraPos;

		vec3 dqBoneTransform(){
			float t = 1.0 / (a_boneWeight.x+a_boneWeight.y+a_boneWeight.z+a_boneWeight.w);
			float bw0 = a_boneWeight[0] * t;
			float bw1 = a_boneWeight[1] * t;
			float bw2 = a_boneWeight[2] * t;
			float bw3 = a_boneWeight[3] * t;
  
			mat2x4 mBone =	uBones[int(a_boneIdx[0])] * bw0 +
                			uBones[int(a_boneIdx[1])] * bw1 +
                			uBones[int(a_boneIdx[2])] * bw2 +
                			uBones[int(a_boneIdx[3])] * bw3;
          /*
			mat2x4 mBone =	uBones[int(a_boneIdx[0])] * a_boneWeight[0] +
                			uBones[int(a_boneIdx[1])] * a_boneWeight[1] +
                			uBones[int(a_boneIdx[2])] * a_boneWeight[2] +
                			uBones[int(a_boneIdx[3])] * a_boneWeight[3];
			*/

			vec3 v = a_position.xyz;
			vec4 Qr = mBone[0].xyzw; //real (rot)
			vec4 Qd = mBone[1].xyzw; //dual (trans)

			vec3 pos = v + cross(2.0 * Qr.xyz, cross(Qr.xyz, v) + Qr.w * v);			//Rotate Vector
			vec3 tran = 2.0 * (Qr.w * Qd.xyz - Qd.w * Qr.xyz + cross(Qr.xyz, Qd.xyz));	//Pull out Translation from DQ
			return pos + tran;
		}

		void main(void){
			//gl_PointSize = 8.0;// + (5.0 * a_boneIdx.y);
			vCameraPos	= (inverse(matCameraView) * vec4(posCamera,1.0)).xyz; //Need to pass Camera pos turned to WorldSpace avoid inverse 

            vWorldPos = dqBoneTransform();
            gl_Position =  matProjection * matCameraView * uModalMatrix * vec4(vWorldPos, 1.0);

			vUV = a_uv;
		}
	</script>
	<script id="qfragment_skinning" type="x-shader/x-fragment">#version 300 es
		precision mediump float;
		in highp vec2 vUV;

		in vec3 vWorldPos;
		in vec3 vCameraPos;

		out vec4 outColor;

		const vec3 uLightPos			= vec3(4.0,2.0,1.0);
		const vec3 uBaseColor			= vec3(0.9,0.9,0.9);//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

		void main(void){
			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), 1.0);
		}
	</script>


<!--
http://donw.io/post/dual-quaternion-skinning/
final vec transform when DQ converted to Q,V
float3 QuatRotateVector(float4 Qr, float3 v)
{
    return v + 2 * cross(Qr.w * v + cross(v, Qr.xyz), Qr.xyz);
}
-->
	<script id="qvertex_skeleton" 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;

		layout(location=8) in vec4 a_QR; //Rotation
		layout(location=9) in vec4 a_QD; //Position

		layout(location=10) in vec4 a_offsetrot;
		layout(location=11) in vec3 a_offsetpos;

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

		uniform mat4 uModalMatrix;
		uniform mat3 uNormalMatrix;

		out highp vec2 vUV;
		out lowp vec3 color;

		//https://github.com/robertsdionne/animus/blob/master/src/animus.htm
		//https://www.cs.utah.edu/~ladislav/dq/dqs.cg
		//http://donw.io/post/dual-quaternion-skinning/
		vec3 dqTransform(vec4 Qr, vec4 Qd, vec3 v){
			//Normalize - For my data I dont really need it but keep the src incase I do.
			//float len = 1.0 / length(Qr);
			//Qr *= len;
			//Qd *= len;

			//dqsFast example from dqs.cg has v + 2.0 * cross which allows rotation to work but translation fails
			//but thanks to a shader written by robertsdionne, he changed it to v + cross(2.0 *
			//Moving the 2.0 multiplication into the first cross makes it works correctly in webgl - SketchpunkLabs
			vec3 pos = v + cross(2.0 * Qr.xyz, cross(Qr.xyz, v) + Qr.w * v);			//Rotate Vector
			vec3 tran = 2.0 * (Qr.w * Qd.xyz - Qd.w * Qr.xyz + cross(Qr.xyz, Qd.xyz));	//Pull out Translation from DQ
			return pos + tran;
		}

		void main(void){
			gl_PointSize = 8.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 if(a_position.w == 2.0) color = vec3(0.0,0.0,1.0);
			else if(a_position.w == 3.0) color = vec3(0.0,0.0,0.0);
			else if(a_position.w == 9.0) color = vec3(1.0,0.5,0.5);
			else color = vec3(0.6,0.6,0.6);

        	vec3 pos = dqTransform(a_QR,a_QD,a_position.xyz);
			gl_Position = matProjection * matCameraView * uModalMatrix * vec4(pos, 1.0);

			vUV = a_uv;
		}
	</script>
	<script id="qfragment_skeleton" 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_skinning" 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;

		layout(location=3) in vec4 a_boneIdx;
		layout(location=4) in vec4 a_boneWeight;

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

		uniform mat4 uModalMatrix;
		uniform mat3 uNormalMatrix;
		uniform mat4[76] uBones;

		out highp vec2 vUV;
		out lowp vec3 color;

		void main(void){
			gl_PointSize = 8.0;// + (5.0 * a_boneIdx.y);
			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 if(a_position.w == 2.0) color = vec3(0.0,0.0,1.0);
			else if(a_position.w == 9.0) color = vec3(1.0,0.5,0.5);
			else color = vec3(0.6,0.6,0.6);

			//int bIdx = int(a_boneIdx.x);
			//mat4 bMat = uBones[bIdx];

			float t = 1.0 / (a_boneWeight[0]+a_boneWeight[1]+a_boneWeight[2]+a_boneWeight[3]);
			float bw0 = a_boneWeight[0] * t;
			float bw1 = a_boneWeight[1] * t;
			float bw2 = a_boneWeight[2] * t;
			float bw3 = a_boneWeight[3] * t;

			/* 
			mat4 m4Bone = uBones[int(a_boneIdx[0])] * a_boneWeight[0] +
                			uBones[int(a_boneIdx[1])] * a_boneWeight[1] +
                			uBones[int(a_boneIdx[2])] * a_boneWeight[2] +
                			uBones[int(a_boneIdx[3])] * a_boneWeight[3];
            gl_Position =  matProjection * matCameraView * uModalMatrix * m4Bone * vec4(a_position.xyz, 1.0);
			*/

			/*vec4 pos = uBones[int(a_boneIdx[0])] * vec4(a_position.xyz,1.0) * bw0 +
                		uBones[int(a_boneIdx[1])] * vec4(a_position.xyz,1.0) * bw1 +
                		uBones[int(a_boneIdx[2])] * vec4(a_position.xyz,1.0) * bw2 +
                		uBones[int(a_boneIdx[3])] * vec4(a_position.xyz,1.0) * bw3;
			*/

			vec4 pos =  bw0 * uBones[int(a_boneIdx[0])] * vec4(a_position.xyz,1.0) +
                		bw1 * uBones[int(a_boneIdx[1])] * vec4(a_position.xyz,1.0) +
                		bw2 * uBones[int(a_boneIdx[2])] * vec4(a_position.xyz,1.0) +
                		bw3 * uBones[int(a_boneIdx[3])] * vec4(a_position.xyz,1.0);

			/*
			vec4 pos = uBones[int(a_boneIdx[0])] * vec4(a_position.xyz,1.0) * a_boneWeight[0] +
                		uBones[int(a_boneIdx[1])] * vec4(a_position.xyz,1.0) * a_boneWeight[1] +
                		uBones[int(a_boneIdx[2])] * vec4(a_position.xyz,1.0) * a_boneWeight[2] +
                		uBones[int(a_boneIdx[3])] * vec4(a_position.xyz,1.0) * a_boneWeight[3];
			*/

			gl_Position =  matProjection * matCameraView * uModalMatrix * vec4(pos.xyz, 1.0);
			

			vUV = a_uv;
			//gl_Position =  matProjection * matCameraView * uModalMatrix * vec4(a_position.xyz, 1.0);
		}
	</script>
	<script id="fragment_skinning" 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_skeleton" 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;
		layout(location=10) in mat4 a_offset;

		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 = 8.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 if(a_position.w == 2.0) color = vec3(0.0,0.0,1.0);
			else if(a_position.w == 3.0) color = vec3(0.0,0.0,0.0);
			else if(a_position.w == 9.0) color = vec3(1.0,0.5,0.5);
			else color = vec3(0.6,0.6,0.6);

			vUV = a_uv;
			gl_Position = matProjection * matCameraView * uModalMatrix * a_offset * vec4(a_position.xyz, 1.0);
		}
	</script>
	<script id="fragment_skeleton" 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="gltf_tri" type="model/gltf+json">
{
  "scenes" : [  { "nodes" : [ 0 ] }  ],
  
  "nodes" : [  { "mesh" : 0 }  ],
  
  "meshes" : [  
  		{ "primitives" : [ { "attributes" : { "POSITION" : 1 }, "indices" : 0 } ] } 
  ],

  "buffers" : [  { "uri" : "data:application/octet-stream;base64,AAABAAIAAAAAAAAAAAAAAAAAAAAAAIA/AAAAAAAAAAAAAAAAAACAPwAAAAA=", "byteLength" : 44 }  ],

  "bufferViews" : [
    { "buffer" : 0, "byteOffset" : 0, "byteLength" : 6, "target" : 34963 },
    { "buffer" : 0, "byteOffset" : 8, "byteLength" : 36, "target" : 34962 }
  ],

  "accessors" : [
    { "bufferView" : 0, "byteOffset" : 0, "componentType" : 5123, "count" : 3, "type" : "SCALAR", "max" : [ 2 ], "min" : [ 0 ] },
    { "bufferView" : 1, "byteOffset" : 0, "componentType" : 5126, "count" : 3, "type" : "VEC3", "max" : [ 1.0, 1.0, 0.0 ], "min" : [ 0.0, 0.0, 0.0 ] }
  ],
  
  "asset" : { "version" : "2.0" }
}
</script>

</body>
</html>