addEventListener( "load", function( e ) {
	let canvas = document.getElementById( "shadeTest" );
	let onresizex = function( e ) {
		let w = canvas.parentNode.getBoundingClientRect().width;
		canvas.width = w;
	}
	addEventListener( "resize", onresizex );
	onresizex();
	
	app = new App( canvas );
	app.exec();
	
}, false );

function App( canvas ) {
	
	this.cc = canvas.getContext( "2d" );
}//App

/*
	流れ：
	1.	<script src=..>により、javascript化されたFBXが読み込まれる。
	2.	app.exec()にて、そのjs化FBXから必要なデータを抽出し使いやすいように変換する。
	3.	setIntervalでframe()が呼ばれ、draw()が呼ばれる。
	4.	draw()では、3D計算が行われ、2D画面へ描画される。
*/

App.prototype.exec = function() {

	//2. app.exec()にて、そのFBXから必要なデータを抽出し使いやすいように変換する。
	
	this.models 	= new Object();
	this.kougen 	= new Object();
	this.kougen.pos	= this.xyz( 100, 100, 0 );
	
	//---anagrif
	
	this.anagrif = {
		strokeStyle	:	null,
		dist		:	5,
	}


	if( 0 ) {	//1:立方体、0:ドラゴン

		//説明のためのデータ「立方体」
		
		//3DCGのデータは基本的には、
		this.models[ "cube" ] = {
			name				: "cube",
			//頂点x,y,zがたくさんあって、
			tens				: [
				[ -1, 1, -1 ],	//0: 手前　左上
				[ 1, 1, -1 ],	//1: 手前　右上
				[ 1, -1, -1 ],	//2: 手前　右下
				[ -1, -1, -1 ],	//3: 手前　左下
				[ -1, 1, 1 ],	//4: 奥　左上
				[ 1, 1, 1 ],	//5: 奥　右上
				[ 1, -1, 1 ],	//6: 奥　右下
				[ -1, -1, 1 ],	//7: 奥　左下
			],
			//どの頂点をつないで面にするかというデータがあるだけです。
			mens				: [
				[ 0, 1, 2, 3 ],	//正面
				[ 5, 4, 7, 6 ],	//背面
				[ 1, 0, 4, 5 ],	//天面
				[ 2, 6, 7, 3 ],	//底面
				[ 0, 3, 7, 4 ],	//側面左
				[ 5, 6, 2, 1 ],	//側面右
			],
			baseColor			: { r : 128, g : 255, b : 128 },	//拡散反射色
			scale				: 100,								//tensの値をどれくらい拡大するか
		};
		
	} else {
		
		//上記立方体と同様のデータを FBX から取り出す
		
		//オブジェクト fbx に記載されたデータを解析　（ドラゴンのモデル）
		
		//準備１：　nodeType別にFBXオブジェクトを参照できるようにする。
		let fbxIDs = {
			Geometries	: new Object(),	//nodeTypeがGeometryであるオブジェクトをここにまとめる。
			Materials	: new Object(),	//nodeTypeがMaterialであるオブジェクトをここにまとめる。
			Models		: new Object(),	//nodeTypeがModelであるオブジェクトをここにまとめる。
		};	
			//FBXオブジェクトを振り分け
			for( let i = 0; i < fbx.Objects.length; i++ ) {
				let fbxObject	= fbx.Objects[ i ];
				let id 			= fbxObject._properties[ 0 ];
				switch( fbxObject._nodeType ) {
					case "Material"	:	fbxIDs.Materials[ id ]	= fbxObject;	break;
					case "Geometry"	:	fbxIDs.Geometries[ id ]	= fbxObject;	break;
					case "Model"	:	fbxIDs.Models[ id ]		= fbxObject;	break;
				}
			}//for i
		
		//準備２：　FBXのデータ同士のひもづけ情報
		this.connections = new Object();
		for( let i = 0; i < fbx.Connections.length; i++ ) {
			let connection	= fbx.Connections[ i ];
			let childID 	= connection[ 1 ];
			let parentID 	= connection[ 2 ];
			this.connections[ childID ] = parentID;
		}
		
		//変換開始
		
		//FBXのモデル情報 -> js光源情報　へ
		for( let ModelID in fbxIDs.Models ) {
			let Model = fbxIDs.Models[ ModelID ];
			console.log( "model", Model._properties[ 1 ] );
			/*
				パートによる階層に対応するならここで、情報取得して始める。
			*/
			
			if( Model._properties[ 2 ] == "Light" ) {
				let fbxLightProperties = Model.Properties70;
				let x, y, z;
				for( let j = 0; j < fbxLightProperties.length; j++ ) {
					let fbxLightProperty = fbxLightProperties[ j ];
					if( fbxLightProperty[ 0 ] == "Lcl Translation" ) {
						this.kougen.pos.x = fbxLightProperty[ 4 ];
						this.kougen.pos.y = fbxLightProperty[ 5 ];
						this.kougen.pos.z = fbxLightProperty[ 6 ] * -1;
					}
				}//for
			}//if
		}//for
		
		//FBXの形状情報 -> js形状情報　へ
		for( let GeometryID in fbxIDs.Geometries ) {

			let Geometry = fbxIDs.Geometries[ GeometryID ];
			let ModelID = this.connections[ GeometryID ];
			
			console.log( "geo", Geometry._properties[ 1 ] );
			
			let model = {
				name				: Geometry._properties[ 1 ],
				tens				: new Array(),
				mens				: new Array(),
				baseColor			: { r : 255, g : 255, b : 255 },	//拡散反射色
				scale				: 1,
			};

			//FBXの形状情報.頂点情報 -> model.tens　へ
			let fbxVertices = Geometry.Vertices.a;
			for( let j = 0; j < fbxVertices.length; j++ ) {
				let x = fbxVertices[ j * 3 ];
				let y = fbxVertices[ j * 3 + 1 ];
				let z = fbxVertices[ j * 3 + 2 ];
				model.tens.push( [ x, y, -z ] );
			}//for j

			//FBXの形状情報.面頂点インデックス 	-> model.mens　へ

			let fbxVertexIndex		= Geometry.PolygonVertexIndex.a;
			let menVertexIndex 		= new Array();
			for( let j = 0; j < fbxVertexIndex.length; j++ ) {
				let vertexNumber = fbxVertexIndex[ j ];
				//check.　データ区切り検知　１つの面取得終了
				if( vertexNumber < 0 ) {
					menVertexIndex.push( vertexNumber * -1 - 1 );	//データであると同時に区切りでもある。その復号
					model.mens.push( menVertexIndex.reverse() );
					menVertexIndex	= new Array();
				} else {
					menVertexIndex.push( vertexNumber );
				}
			}//for j


			this.models[ ModelID ] =  model;
		}//for GeometryID
		
		//FBXの材質情報 -> jsの色情報　へ
		for( let materialID in fbxIDs.Materials ) {
			let material	= fbxIDs.Materials[ materialID ];
			let modelID		= this.connections[ materialID ];
			let model		= this.models[ modelID ];
			
			for( let i = 0; i < material.Properties70.length; i++ ) {
				let materialProperty = material.Properties70[ i ];
				switch( materialProperty[ 0 ] ) {
					case "DiffuseColor":	//拡散反射色
						model.baseColor.r = 255 * materialProperty[ 4 ];
						model.baseColor.g = 255 * materialProperty[ 5 ];
						model.baseColor.b = 255 * materialProperty[ 6 ];
						break;
				}
			}//for i
		}//for materialID
		
		//この時点でFBXデータの変換完了

	}//if

	//---カメラ設定
	
	this.posX = 0;
	this.posY = 0;
	this.posZ = 800;
	
	//---回転アニメーション

	this.stroke = false;
	this.fill = true;

	this.rotationX = 0;
	this.rotationY = 0;
	this.rotationCX = 0;	//回転の中心座標X,Y,Z
	this.rotationCY = 0;
	this.rotationCZ = 0;


//---スクロール停止対応２　ここから

		//どの要素を対象にしますか
		this.target = this.cc.canvas;

		//要素が何%見えたらアクティブにしますか
		this.targetPer = 0.5;

		this.isActive = false;
		addEventListener( "scroll", this.onscrollx.bind( this ) );

	this.onscrollx();

//---スクロール停止対応２　ここまで
	
	this.bg = new Image();
	this.bg.src = "20180203-3DCG/20180203-FBXをJSで読む/20200525-JSのみで作り直し/indexJS/Sheet1.png";
	
	
	//loading..表示の消去
	document.getElementById( "spacer" ).innerHTML = "";
	
}//exec

App.prototype.frame = function() {
	let kakudoPerSec = 10;
	this.rotationY += Math.PI / 180 * kakudoPerSec / this.fps;
	
	this.paint( this.cc );
}

App.prototype.paint = function( cc ) {
	cc.clearRect( 0, 0, cc.canvas.width, cc.canvas.height );
	cc.lineWidth = 1;
	
//	let gx = ( cc.canvas.width - this.bg.width ) / 2;
//	let gy = ( cc.canvas.height - this.bg.height ) / 2;
	cc.drawImage( this.bg, 0, 0 );
	
//	cc.font = "64px ''";
//	cc.fillStyle = "cyan";
//	let m = cc.measureText( message );
//	cc.fillText( message, ( cc.canvas.width - m.width ) / 2, 20 );
	
	//red
//	this.anagrif.strokeStyle = "RGBA(140,0,0, .4)";
	this.anagrif.strokeStyle = "RGBA(192,0,0, .5)";
	this.posX = -this.anagrif.dist;
	this.draw( cc );

	//blue
//	this.anagrif.strokeStyle = "RGBA(0,0,190, .4)";
	this.anagrif.strokeStyle = "RGBA(0,0,255, .5)";
	this.posX = this.anagrif.dist;
	this.draw( cc );


}
App.prototype.draw = function( cc ) {

	cc.save();
	
		//画面の中央を原点とし、上下反転する。
		cc.translate( cc.canvas.width / 2, cc.canvas.height / 2 );
		cc.scale( 1, -1 );
	
	
	//4. drawでは、3D計算が行われ、2D画面へ描画される。
	
	//---カメラ設定
	let s = 50;			//焦点距離
	let zoom = 17.81;	//この拡大率でshadeの画面と一致
	let posX = this.posX;
	let posY = this.posY;
	let posZ = this.posZ;
	
	let allmens	= new Array();	//すべての面を集めた配列
	
	//全頂点の位置を計算
	for( let modelID in this.models ) {
		let model = this.models[ modelID ];
		
		let tensC = new Array();	//Cはcalc（"計算した"）のC。
		let tens = model.tens;
		for( let i = 0; i < tens.length; i++ ) {
			let x = tens[ i ][ 0 ];
			let y = tens[ i ][ 1 ];
			let z = tens[ i ][ 2 ];
			let r;	//回転関数の返値受け取り用

			//scale倍
			x *= model.scale;
			y *= model.scale;
			z *= model.scale;

			//Y軸回転
			r = this.kaitenC( this.rotationCX, this.rotationCZ, x, z, this.rotationY );
			x = r.X;
			z = r.Y;

			//X軸回転
			r = this.kaitenC( this.rotationCZ, this.rotationCY, z, y, this.rotationX );
			z = r.X;
			y = r.Y;

			//位置へ移動
			x += posX;
			y += posY;
			z += posZ;

			//3Dの座標を2Dの座標に変換する
			let h = x * ( s / z );
			let v = y * ( s / z );

			//画面を引き延ばし
			h *= zoom;
			v *= zoom;

			//値を保管
			let tenC = new Object();
				tenC.x = x;
				tenC.y = y;
				tenC.z = z;
				tenC.h = h;
				tenC.v = v;
			tensC.push( tenC );
			
		}//for tens
		model.tensC = tensC;
		
		
		//すべての面を集めた配列 allmens を作成する
		let mens = model.mens;
		for( let j = 0; j < mens.length; j++ ) {
			let men = mens[ j ];

			let jusin;	//陰面消去１と陰面消去２で使用する値
			let housen;	//陰面消去２と陰影処理で使用する値

				//check.	面が視点のほうを向いていないなら、その面は除去
				let tmpTens = new Array();
					for( let i = 0; i < men.length; i++ )
						tmpTens.push( model.tensC[ men[ i ] ] );

					jusin 	= this.getJusin( tmpTens );
					housen 	= this.getHousen( tmpTens );

					//check.	面が視点のほうを向いていないなら、その面は除去
					//（陰面消去２　「法線ベクトル法」）
					if( ! this.checkVisibility( housen, jusin ) ) continue;

			//面を構成する点を順にたどる
			let sumZ = 0;
			for( let k = 0; k < men.length; k++ ) {
				let tenIDX	= men[ k ];
				let ten		= model.tensC[ tenIDX ];
				sumZ		+= ten.z;
			}

			//allmensへ追加する
			let theMen			= new Object();
				theMen.idx		= j;
				theMen.men		= men;
				theMen.avgZ		= sumZ / men.length;
				theMen.jusin	= jusin;
				theMen.housen	= housen;
				theMen.model 	= model;
			allmens.push( theMen );

		}//for mens
	}//for models
	
	//この時点で全頂点の位置を計算済み


	//すべての面を奥から手前の順にソート
	//（陰面消去１　「画家のアルゴリズム」）
	allmens.sort( function( a, b ) {
		if( a.avgZ > b.avgZ ) return -1;
		else if( a.avgZ < b.avgZ ) return 1;
		else return 0;
	} );


	//2D画面へ描画
	for( let i = 0; i < allmens.length; i++ ) {
		let theMen	= allmens[ i ];
		let men 	= theMen.men;
		let housen	= theMen.housen;
		let jusin	= theMen.jusin;
		let model	= theMen.model;
		
		//面を構成する点を順にたどる
			cc.beginPath();
				for( let j = 0; j < men.length; j++ ) {
					let tenIDX	= men[ j ];
					let ten		= model.tensC[ tenIDX ];

					let h = ten.h;
					let v = ten.v;

					//最初の点はmoveTo、続く点はlineTo
					if( j == 0 )
						cc.moveTo( h, v );
					else
						cc.lineTo( h, v );
					
				}//for men
			cc.closePath();
			
		//面の中を塗る
		//陰影処理（ランバート反射）を加える
		
			let kougenP	= this.xyz(	this.kougen.pos.x - jusin.x,
									this.kougen.pos.y - jusin.y,
									this.kougen.pos.z - jusin.z );
					//this.kougen.posは原点から見た位置ですが、
					//陰影処理のために、これを面から見た位置に直し、kougenPとします。
									
			let RGB = this.lambelt(	this.toNorm( kougenP ),
												housen,
												model.baseColor );
			if( this.anagrif ) {
				cc.fillStyle = "white";
//				cc.fill();
				cc.strokeStyle = this.anagrif.strokeStyle;
				cc.stroke();
			} else if( this.fill && this.stroke ) {
				//塗り＋線
				cc.fillStyle = this.rgb2str( RGB );
				cc.fill();
				cc.strokeStyle = "black";
				cc.stroke();
			} else if( this.fill && ! this.stroke ) {
				//塗り
				cc.fillStyle = this.rgb2str( RGB );
				cc.fill();
				cc.strokeStyle = this.rgb2str( RGB );
				cc.stroke();
			} else if( ! this.fill && this.stroke ) {
				//線
				cc.strokeStyle = this.rgb2str( RGB );
				cc.stroke();
			} else {
				//塗りなし＋線なし
				cc.fillStyle = "RGBA(" + RGB.r + "," + RGB.g + "," + RGB.b + ", 0.5)";
				cc.fill();
			}
			

	}//for allmens
	
	cc.restore();	//画面情報を元に戻す
	
}//draw

App.prototype.rgb2str = function( RGB ) {
	/*
	便利目的の関数
	*/
	return "RGB(" + RGB.r + "," + RGB.g + "," + RGB.b + ")";
}

App.prototype.objCpy = function( obj ) {
	/*
	便利目的の関数
	*/
	let res = new Object();
	for( let name in obj ) {
		res[ name ] = obj[ name ];
	}
	return res;
}

App.prototype.checkVisibility = function( housen, jusin ) {
	//視点の方向（eye）
	let sisen = this.objCpy( jusin );
		sisen.x *= -1;
		sisen.y *= -1;
		sisen.z *= -1;

	//法線と視点方向の内積（※cosθ）
	let a = this.naiseki( housen, sisen );

	return a > 0;
}

App.prototype.xyz = function( x, y, z ) {
	/*
	便利目的の関数
	*/
	return { x : x, y : y, z : z };
}

App.prototype.naiseki = function( v1, v2 ) {
	/*
	数学分野の汎用関数
	内積を得る
	*/
	let a = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z;
	return a;
}

App.prototype.getJusin = function( p ) {
	/*
	数学分野の汎用関数
	面を構成する各頂点の、x,y,z各成分の平均値を得る（重心）
	*/
	let res = this.xyz( 0, 0, 0 );
	for( let i = 0; i < p.length; i++ ) {
		res.x += p[ i ].x;
		res.y += p[ i ].y;
		res.z += p[ i ].z;
	}
	res.x /= p.length;
	res.y /= p.length;
	res.z /= p.length;
	return res;
}

App.prototype.getHousen = function( p ) {
	/*
	数学分野の汎用関数
	法線を得る
	*/
	let x1 = p[ 0 ].x, y1 = p[ 0 ].y, z1 = p[ 0 ].z;
	let x2 = p[ 1 ].x, y2 = p[ 1 ].y, z2 = p[ 1 ].z;
	let x3 = p[ 2 ].x, y3 = p[ 2 ].y, z3 = p[ 2 ].z;

	//法線
	// http://www.myu.ac.jp/~makanae/CG/cg1_14.htm で学んだ。
	let res		= new Object();
	res.x	= (y2-y1)*(z3-z2)-(z2-z1)*(y3-y2);
	res.y	= (z2-z1)*(x3-x2)-(x2-x1)*(z3-z2);
	res.z	= (x2-x1)*(y3-y2)-(y2-y1)*(x3-x2);
	res = this.toNorm( res );

	return res;
}

App.prototype.toNorm = function( p ) {
	/*
	数学分野の汎用関数
	原点から座標pまでの距離を１にした座標を返す（単位ベクトル化）
	（※陰面消去２では本当は必要ないがランバート反射で必要になったので用意した）
	*/
	let len = Math.sqrt( p.x * p.x + p.y * p.y + p.z * p.z );
	let res = new Object();
	res.x = p.x / len;
	res.y = p.y / len;
	res.z = p.z / len;
	return res;
}

App.prototype.lambelt = function( housen, kougen, RGB ) {
	let cosTheta	= this.naiseki( housen, kougen );
	let directPer	= 0.5;				//直接光の割合
	let ambientPer	= 1 - directPer;	//環境光の割合

	//色成分をさらに直接光と環境光の割合で分割、直接光についてはcosTheta（0～1）でさらにしぼる
	let dirR	= RGB.r * directPer * cosTheta;
	let ambR	= RGB.r * ambientPer;
	let dirG	= RGB.g * directPer * cosTheta;
	let ambG	= RGB.g * ambientPer;
	let dirB	= RGB.b * directPer * cosTheta;
	let ambB	= RGB.b * ambientPer;

	//分割したものを再度合体（直接光分にcosThetaを掛けたかっただけ）
	let res		= new Object();
	res.r	= Math.round( dirR + ambR );
	res.g	= Math.round( dirG + ambG );
	res.b	= Math.round( dirB + ambB );

	return res;
}

App.prototype.kaiten = function( x, y, theta2 ) {
	let theta1 = Math.atan2( y, x );
	let hankei = Math.sqrt( x * x + y * y );
	return { 	X : Math.cos( theta1 + theta2 ) * hankei,
				Y : Math.sin( theta1 + theta2 ) * hankei };
}

App.prototype.kaitenC = function( cx, cy, x, y, theta2 ) {
	x -= cx;
	y -= cy;
	let theta1 = Math.atan2( y, x );
	let hankei = Math.sqrt( x * x + y * y );
	return { 	X : Math.cos( theta1 + theta2 ) * hankei + cx,
				Y : Math.sin( theta1 + theta2 ) * hankei + cy };
}


//---スクロール停止対応　ここから

App.prototype.start = function() {
	//3. setIntervalでframe()が呼ばれ、draw()が呼ばれる。
	
	this.fps = 2;
	this.timerMS = Math.floor( 1000 / this.fps );
	this.timerID = setInterval( this.frame.bind( this ), this.timerMS );
}
App.prototype.stop = function() {
	clearInterval( this.timerID );
}
App.prototype.onscrollx = function( e ) {
	var rect 			= this.target.getBoundingClientRect();
	var targetTopP		= ( rect.top ) + ( rect.height * this.targetPer );
	var targetBottomP 	= ( rect.top + rect.height ) - ( rect.height * this.targetPer );
	var windowTop		= 0;
	var windowBottom 	= window.innerHeight;
	var overTheTop 		= targetBottomP < windowTop;	//ウィンドウ上方へ隠れた
	var overTheBottom	= targetTopP > windowBottom;	//ウィンドウ下方へ隠れた
	var isVisible		= ! overTheTop && ! overTheBottom;
	if( ! this.isActive && isVisible ) {
		this.isActive = true;
		this.start();
	} else if( this.isActive && ! isVisible ) {
		this.isActive = false;
		this.stop();
	}
}

//---スクロール停止対応　ここまで