Inheritance: Object3D
Example #1
0
        static void btnTest_click(HtmlDomEventArgs e)
        {
	        // set the scene size
	        float WIDTH = 400;
	        float HEIGHT = 300;

	        // set some camera attributes
	        float VIEW_ANGLE = 45;
	        float ASPECT = WIDTH / HEIGHT;
	        float NEAR = 0.1f;
	        float FAR = 10000;

	        // get the DOM element to attach to
	        // - assume we've got jQuery to hand
	        jQuery container = J("#container");

	        // create a WebGL renderer, camera
	        // and a scene
            WebGLRenderer renderer = new WebGLRenderer();
	        Camera camera = new PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR  );
	        Scene scene= new Scene();

	        // the camera starts at 0,0,0 so pull it back
	        camera.position.z = 300;

	        // start the renderer
	        renderer.setSize(WIDTH, HEIGHT);

	        // attach the render-supplied DOM element
	        container.append(renderer.domElement);

	        // create the sphere's material
            MeshLambertMaterial sphereMaterial = new MeshLambertMaterial(new MeshLambertMaterialOptions { color = 0xcc0000 });

            // set up the sphere vars
            int radius = 50, segments = 16, rings = 16;

            // create a new mesh with sphere geometry -
            // we will cover the sphereMaterial next!
            Mesh sphere = new Mesh(new SphereGeometry(radius, segments, rings), sphereMaterial);

            // add the sphere to the scene
            scene.add(sphere);

            // create a point light
            var pointLight = new PointLight(0xFFFFFF);

            // set its position
            pointLight.position.x = 10;
            pointLight.position.y = 50;
            pointLight.position.z = 130;

            // add to the scene
            scene.add(pointLight);

            // draw!
            renderer.render(scene, camera);

        }
Example #2
0
 public void attach(Mesh mesh)
 {
     throw new NotImplementedException();
 }
Example #3
0
 public static void merge(Geometry geometry1, Mesh object2) { }
 public WireframeHelper(Mesh obj, Color color)
 {
     throw new NotImplementedException();
 }
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLDraggableCubes\WebGLDraggableCubes\Application.cs
            // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLDraggableCubes\WebGLDraggableCubes\Design\AppCode.js

            var camera = new PerspectiveCamera(70, Native.window.aspect, 1, 10000);
            camera.position.set(0, 300, 500);

            var scene = new Scene();

            var geometry = new BoxGeometry(100, 100, 100);

            var random = new Random();

            objects = new THREE.Mesh[10];
            for (var i = 0; i < 10; i++)
            {
                var rgb = (int)(random.NextDouble() * 0xffffff);
                Console.WriteLine(new { i, rgb });

                var obj = new THREE.Mesh(geometry,
                    new THREE.MeshBasicMaterial(new { color = new THREE.Color(rgb) })
                    );


                obj.position.x = random.NextDouble() * 800 - 400;
                obj.position.y = random.NextDouble() * 800 - 400;
                obj.position.z = random.NextDouble() * 800 - 400;

                obj.scale.x = random.NextDouble() * 2 + 1;
                obj.scale.y = random.NextDouble() * 2 + 1;
                obj.scale.z = random.NextDouble() * 2 + 1;

                obj.rotation.x = random.NextDouble() * 2 * Math.PI;
                obj.rotation.y = random.NextDouble() * 2 * Math.PI;
                obj.rotation.z = random.NextDouble() * 2 * Math.PI;

                scene.add(obj);

                objects[i] = obj;

            }


            // THREE.Projector has been moved to /examples/js/renderers/Projector.js.
            var projector = new THREE.Projector();

            // ?
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(new THREE.Color(0xf0f0f0));
            //renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.setSize();

            this.canvas = (IHTMLCanvas)renderer.domElement;
            //renderer.domElement.AttachToDocument();
            this.canvas.AttachToDocument();
            this.canvas.style.SetLocation(0, 0);
            this.canvas.css.style.cursor = IStyle.CursorEnum.pointer;
            this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;

            canvas.onresize += delegate
            {
                camera.aspect = Native.window.aspect;
                camera.updateProjectionMatrix();

                //renderer.setSize(Native.window.Width, Native.window.Height);
                renderer.setSize();
            };

            canvas.onmousedown += (
                e =>
                {

                    e.preventDefault();

                    var px = (e.CursorX / (double)Native.window.Width);
                    var py = (e.CursorY / (double)Native.window.Height);

                    var vx = px * 2 - 1;
                    var vy = -py * 2 + 1;

                    Console.WriteLine(
                        new { e.CursorX, e.CursorY, px, py, vx, vy }
                        );

                    //var vector = new THREE.Vector3(
                    //  vx,
                    //  vy,
                    //  0.5);

                    var vector = new THREE.Vector3(
                  (e.CursorX / (double)Native.window.Width) * 2 - 1,
                 vy,
                 0.5);

                    //var vector = new THREE.Vector3(e.CursorX , e.CursorY, 1);

                    projector.unprojectVector(vector, camera);

                    //var raycaster = new THREE.Raycaster();
                    //raycaster.set(camera.position, vector.sub(camera.position).normalize());

                    // 
                    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
                    //var raycaster = projector.pickingRay(vector.sub(camera.position).normalize(), camera);

                    //var intersects = raycaster.intersectObjects(objects, true);
                    var intersects = raycaster.intersectObjects(objects);

                    Console.WriteLine("Intersects len " + intersects.Length);

                    if (intersects.Length > 0)
                    {
                        var holder = ((THREE.Mesh)intersects[0].@object);

                        var forthSmallestInnerCilinder = new THREE.Mesh(
                              new THREE.CylinderGeometry(10, 10, 10, 32),
                              new THREE.MeshPhongMaterial(
                                      new
                                      {
                                          specular = new THREE.Color(0xa0a0a0)
                                      })
                          );
                        forthSmallestInnerCilinder.position.y = ((THREE.Raycaster_intersectObject)intersects[0]).point.y;
                        forthSmallestInnerCilinder.position.x = ((THREE.Raycaster_intersectObject)intersects[0]).point.x;
                        forthSmallestInnerCilinder.position.z = ((THREE.Raycaster_intersectObject)intersects[0]).point.z;
                        scene.add(forthSmallestInnerCilinder);

                        // Console.WriteLine(holder.visible);
                        //intersects[0].material.color.setHex(random.NextDouble()*0xffffff);
                        Console.WriteLine("" + ((THREE.Raycaster_intersectObject)intersects[0]).point.x);
                        holder.material.color = new THREE.Color(0xf000ff);
                        foreach (var i in objects)
                        {
                            if (i == holder)
                            {
                                Console.WriteLine("Equals true");
                                i.material.color.setRGB(200, 0, 0);
                            }
                        }
                    }

                });

            var radius = 600;
            double theta = 0;



            Native.window.onframe += (e =>
            {
                if (this.canvas.parentNode == null)
                    return;

                theta += 0.1;

                camera.position.x = radius * Math.Sin(THREE.Math.degToRad(theta));
                camera.position.y = radius * Math.Sin(THREE.Math.degToRad(theta));
                camera.position.z = radius * Math.Cos(THREE.Math.degToRad(theta));
                camera.lookAt(scene.position);

                renderer.render(scene, camera);



            });

            var ze = new ZeProperties();

            ze.Show();
            ze.treeView1.Nodes.Clear();

            ze.Add(() => renderer);
            //ze.Add(() => controls);
            ze.Add(() => scene);
            ze.Left = 0;

        }
Example #6
0
 public EdgesHelper(Mesh obj, Color color)
 {
     throw new NotImplementedException();
 }
		// inspired by http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html
		// http://alteredqualia.com/three/examples/webgl_morphtargets_md2_control.html

		// Invalid version number in manifest: 40. Please make sure the newly uploaded package has a larger version in file manifest.json than the published package: 40.

		public Application(IDefault page = null)
		{
			// http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/

			// vr view, isometric view
			// http://skycraft.io/
			// http://www.mark-lundin.com/box/inception/

			// running as android tab
			//            I / chromium(25513): [INFO: CONSOLE(88580)] "THREE.WebGLRenderer", source: http://192.168.43.7:25796/view-source (88580)
			//I/chromium(25513): [INFO: CONSOLE(88791)] "Error creating WebGL context.", source: http://192.168.43.7:25796/view-source (88791)
			//I/chromium(25513): [INFO: CONSOLE(88795)] "Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null", source: http://192.168.43.7:25796/view-source (88795)

			// X:\opensource\github\three.js
			// WEBGL_compressed_texture_pvrtc extension not supported.

			// http://stackoverflow.com/questions/21673278/three-js-error-when-applying-texture

			#region += Launched chrome.app.window
            // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
            dynamic self = Native.self;
            dynamic self_chrome = self.chrome;

            // I/chromium(18051): [INFO:CONSOLE(36608)] "Uncaught TypeError: Cannot read property 'socket' of undefined", source: http://192.168.43.7:24445/view-source (36608)

            if ((object)self_chrome != null)
            {
                object self_chrome_socket = self_chrome.socket;

                if (self_chrome_socket != null)
                {
                    // could we change the color of the window?

                    // https://developer.chrome.com/apps/manifest/icons
                    chrome.Notification.DefaultIconUrl = new WebGLHZBlendCharacter.HTML.Images.FromAssets.x128().src;

                    Console.WriteLine("invoke TheServerWithAppWindow.Invoke");
                    ChromeTCPServer.TheServerWithAppWindow.Invoke(WebGLTiltShift.HTML.Pages.DefaultSource.Text);

                    return;
                }

            }
			#endregion

			Native.document.body.style.margin = "0px";
			Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
			Native.document.body.Clear();



			//			I / chromium(7069): [INFO: CONSOLE(91150)] "THREE.WebGLRenderer", source: http://192.168.1.212:24430/view-source (91150)
			//I/chromium( 7069): [INFO: CONSOLE(91361)] "Error creating WebGL context.", source: http://192.168.1.212:24430/view-source (91361)


			#region svg cursor
			new IXMLHttpRequest(ScriptCoreLib.Shared.HTTPMethodEnum.GET,
				 new HeatZeekerRTS.HTML.Images.FromAssets.MyCursor().src,
				 r =>
				 {
					 // public static XElement AsXElement(this IElement e);
					 var svg = (ISVGSVGElement)(IElement)(r.responseXML.documentElement);


					 var cursor1 = svg.AsXElement();




					 cursor1
						 .Elements("g")
						 .Elements("path")
						 .Where(x => x.Attribute("id").Value == "path2985")
						 .WithEach(
							 path =>
								 path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#ffff00;", "fill:#00ff00;")
						 );

					 cursor1
						 .Elements("g")
						 .Elements("path")
						 .Where(x => x.Attribute("id").Value == "path2985-1")
						 .WithEach(
							 path =>
								 path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#d9d900;", "fill:#00df00;")
						 );

					 //.AttachToDocument();

					 Native.css.style.cursorImage = svg;


					 // this wont work no more?
					 new IStyle(Native.css[IHTMLElement.HTMLElementEnum.div].hover)
					 {
						 // last change was abut adding pointer
						 // jsc jit could atleast let us know how it looks like
						 //cursor = IStyle.CursorEnum.pointer

						 //cursorImage = new MyCursor()
					 };

					 //Native.document.documentElement.style.cursorImage = svg;
					 //Native.document.documentElement.style.cursorImage = cursor1;
					 //Native.document.documentElement.style.cursorElement = cursor1;
					 //Native.document.documentElement.style.cursorElement = cursor1.AsHTMLElement();

					 //public static IHTMLElement AttachToDocument(this XElement e);

					 //.AttachToHead();
				 }
			);
			#endregion


			//#region playmusic
			//new { }.With(
			//    async delegate
			//    {
			//        do
			//        {
			//            var music = new HeatZeekerRTS.HTML.Audio.FromAssets.crickets
			//            {
			//                volume = 0.1

			//                //loop = true,
			//                //controls = true
			//            }.AttachToHead();

			//            music.play();

			//            await music.async.onended;

			//            music.Orphanize();
			//        }
			//        while (true);
			//    }
			//);

			//#endregion


			double SCREEN_WIDTH = Native.window.Width;
			double SCREEN_HEIGHT = Native.window.Height;

			var clock = new THREE.Clock();

			var sceneRenderTarget = new THREE.Scene();

			var cameraOrtho = new THREE.OrthographicCamera(
				(int)SCREEN_WIDTH / -2,
				(int)SCREEN_WIDTH / 2,
				(int)SCREEN_HEIGHT / 2,
				(int)SCREEN_HEIGHT / -2,
				-100000,
				100000
			);

			cameraOrtho.position.z = 100;
			sceneRenderTarget.add(cameraOrtho);

			var scene = new THREE.Scene();
			var camera = new THREE.PerspectiveCamera(

				//40,
				20,
				//10,

				Native.window.aspect, 2,

				// how far out do we want to zoom?
				200000
				//9000
				);
			camera.position.set(-1200, 800, 1200);

			scene.add(camera);
			//scene.add(new THREE.AmbientLight(0x212121));

			//var spotLight = new THREE.SpotLight(0xffffff, 1.15);
			//spotLight.position.set(500, 2000, 0);
			//spotLight.castShadow = true;
			//scene.add(spotLight);

			//var pointLight = new THREE.PointLight(0xff4400, 1.5);
			//pointLight.position.set(0, 0, 0);
			//scene.add(pointLight);


			//scene.add(new THREE.AmbientLight(0xaaaaaa));
			new THREE.AmbientLight(0x101030).AttachTo(scene);


			//var light = new THREE.DirectionalLight(0xffffff, 1.0);
			#region light
			var light = new THREE.DirectionalLight(0xffffff, 1.5);
			//var light = new THREE.DirectionalLight(0xffffff, 2.5);
			//var light = new THREE.DirectionalLight(0xffffff, 1.5);
			//var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
			var lightOffset = new THREE.Vector3(
				2000,
				700,

				// lower makes longer shadows 
				700.0
				);
			light.position.copy(lightOffset);
			light.castShadow = true;

			var xlight = light as dynamic;
			xlight.shadowMapWidth = 4096;
			xlight.shadowMapHeight = 2048;

			xlight.shadowDarkness = 0.1;
			//xlight.shadowDarkness = 0.5;

			xlight.shadowCameraNear = 10;
			xlight.shadowCameraFar = 10000;
			xlight.shadowBias = 0.00001;
			xlight.shadowCameraRight = 4000;
			xlight.shadowCameraLeft = -4000;
			xlight.shadowCameraTop = 4000;
			xlight.shadowCameraBottom = -4000;

			xlight.shadowCameraVisible = true;

			scene.add(light);
			#endregion



			var renderer = new THREE.WebGLRenderer(
				new
				{

					// http://stackoverflow.com/questions/20495302/transparent-background-with-three-js
					alpha = true,
					preserveDrawingBuffer = true,
					antialias = true
				}

				);
			renderer.setSize(Native.window.Width, Native.window.Height);
			renderer.domElement.AttachToDocument();
			renderer.shadowMapEnabled = true;
			renderer.shadowMapType = THREE.PCFSoftShadowMap;


			#region create field

			// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.

			// could we get some film grain?
			var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
			var plane = new THREE.Mesh(planeGeometry,
					new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })

				);
			//plane.castShadow = false;
			plane.receiveShadow = true;


			{

				var parent = new THREE.Object3D();
				parent.add(plane);
				parent.rotation.x = -Math.PI / 2;
				parent.scale.set(10, 10, 10);

				scene.add(parent);
			}

			var random = new Random();
			var meshArray = new List<THREE.Mesh>();
			var geometry = new THREE.CubeGeometry(1, 1, 1);
			var sw = Stopwatch.StartNew();

			for (var i = 3; i < 9; i++)
			{

				//THREE.MeshPhongMaterial
				var ii = new THREE.Mesh(geometry,


					new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })

					//new THREE.MeshLambertMaterial(
					//new
					//{
					//    color = (Convert.ToInt32(0xffffff * random.NextDouble())),
					//    specular = 0xffaaaa,
					//    ambient= 0x050505, 
					//})

					);
				ii.position.x = i % 7 * 200 - 2.5f;

				// raise it up
				ii.position.y = .5f * 100;
				ii.position.z = -1 * i * 100;
				ii.castShadow = true;
				ii.receiveShadow = true;
				//ii.scale.set(100, 100, 100 * i);
				ii.scale.set(100, 100 * i, 100);


				meshArray.Add(ii);

				scene.add(ii);

				#region SpeedBlendCharacter
				var _i = i;
				{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }

				var blendMesh = new THREE.SpeedBlendCharacter();
				blendMesh.load(
					new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
					new Action(
						delegate
						{
							// buildScene
							//blendMesh.rotation.y = Math.PI * -135 / 180;
							blendMesh.castShadow = true;
							// we cannot scale down we want our shadows
							//blendMesh.scale.set(0.1, 0.1, 0.1);

							blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;

							// raise it up
							//blendMesh.position.y = .5f * 100;
							blendMesh.position.z = -1 * _i * 100;


							var xtrue = true;
							// run
							blendMesh.setSpeed(1.0);

							// will in turn call THREE.AnimationHandler.play( this );
							//blendMesh.run.play();
							// this wont help. bokah does not see the animation it seems.
							//blendMesh.run.update(1);

							blendMesh.showSkeleton(!xtrue);

							scene.add(blendMesh);


							Native.window.onframe +=
							 delegate
							 {

								 blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;



								 ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;

							 };

						}
					)
				);
				#endregion


			}
			#endregion




			// "X:\opensource\github\three.js\examples\js\shaders\VerticalTiltShiftShader.js"
			// http://stackoverflow.com/questions/20899326/how-do-i-stop-effectcomposer-from-destroying-my-transparent-background

			var renderTarget = new THREE.WebGLRenderTarget(
						Native.window.Width, Native.window.Height,
				new
				{
					minFilter = THREE.LinearFilter,
					magFilter = THREE.LinearFilter,
					format = THREE.RGBAFormat,
					stencilBufer = false
				}
			);

			var composer = new THREE.EffectComposer(renderer, renderTarget);
			var renderModel = new THREE.RenderPass(scene, camera);
			composer.addPass(renderModel);

			#region vblur
			var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
			var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);

			//var bluriness = 6.0;
			var bluriness = 4.0;

			// Show Details	Severity	Code	Description	Project	File	Line
			//Error CS0656  Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs  183

			(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
			(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;

			(hblur.uniforms as dynamic).r.value = 0.5;
			(vblur.uniforms as dynamic).r.value = 0.5;
			vblur.renderToScreen = true;

			composer.addPass(hblur);
			composer.addPass(vblur);
			#endregion


			#region WebGLRah66Comanche
			// why isnt it being found?
			new global::WebGLRah66Comanche.Comanche(
			).Source.Task.ContinueWithResult(
				dae =>
				{

					//dae.position.y = -40;
					//dae.position.z = 280;
					scene.add(dae);
					//oo.Add(dae);

					// wont do it
					//dae.castShadow = true;

					dae.children[0].children[0].children.WithEach(x => x.castShadow = true);


					// the rotors?
					dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);


					dae.scale.set(0.5, 0.5, 0.5);
					dae.position.x = -900;
					dae.position.z = +900;

					// raise it up
					dae.position.y = 400;

					//var sw = Stopwatch.StartNew();

					//Native.window.onframe += delegate
					//{
					//    //dae.children[0].children[0].children.Last().al
					//    //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
					//    //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
					//    dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
					//};
				}
			);
			#endregion



			#region tree
			// X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs

			var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
			var tloader = new THREE.JSONLoader();

			// http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
			// https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
			//System.Runtime.CompilerServices.DynamicAttribute

			tloader.load(

				new WebGLGodRay.Models.tree().Content.src,

				new Action<THREE.Geometry>(
				xgeometry =>
				{

					var treeMesh = new THREE.Mesh(xgeometry, materialScene);
					treeMesh.position.set(0, -150, -150);
					treeMesh.position.x = -900;
					treeMesh.position.z = -900;

					treeMesh.position.y = 25;

					var tsc = 400;
					treeMesh.scale.set(tsc, tsc, tsc);

					treeMesh.matrixAutoUpdate = false;
					treeMesh.updateMatrix();


					treeMesh.AttachTo(scene);

				}
				)
				);
			#endregion


			#region HZCannon
			new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
				async cube =>
				{
					// https://github.com/mrdoob/three.js/issues/1285
					//cube.children.WithEach(c => c.castShadow = true);

					//cube.traverse(
					//    new Action<THREE.Object3D>(
					//        child =>
					//        {
					//            // does it work? do we need it?
					//            //if (child is THREE.Mesh)

					//            child.castShadow = true;
					//            //child.receiveShadow = true;

					//        }
					//    )
					//);

					// um can edit and continue insert code going back in time?
					cube.scale.x = 10.0;
					cube.scale.y = 10.0;
					cube.scale.z = 10.0;



					//cube.castShadow = true;
					//dae.receiveShadow = true;

					//cube.position.x = -100;

					////cube.position.y = (cube.scale.y * 50) / 2;
					//cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;



					// if i want to rotate, how do I do it?
					//cube.rotation.z = random() + Math.PI;
					//cube.rotation.x = random() + Math.PI;
					var sw2 = Stopwatch.StartNew();



					scene.add(cube);
					//interactiveObjects.Add(cube);

					// offset is wrong
					//while (true)
					//{
					//    await Native.window.async.onframe;

					//    cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;

					//}
				}
			);
			#endregion

			#region HZBunker
			new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
					 cube =>
					 {
						 // https://github.com/mrdoob/three.js/issues/1285
						 //cube.children.WithEach(c => c.castShadow = true);
						 cube.castShadow = true;

						 //cube.traverse(
						 //    new Action<THREE.Object3D>(
						 //        child =>
						 //             {
						 //                 // does it work? do we need it?
						 //                 //if (child is THREE.Mesh)
						 //                 child.castShadow = true;
						 //                 //child.receiveShadow = true;

						 //             }
						 //    )
						 //);

						 // um can edit and continue insert code going back in time?
						 cube.scale.x = 10.0;
						 cube.scale.y = 10.0;
						 cube.scale.z = 10.0;

						 //cube.castShadow = true;
						 //dae.receiveShadow = true;

						 cube.position.x = -1000;
						 //cube.position.y = (cube.scale.y * 50) / 2;
						 cube.position.z = 0;

						 scene.add(cube);
					 }
				 );
			#endregion



			#region YomotsuTPS

			var material = new THREE.MeshPhongMaterial(
						  new
						  {
							  map = THREE.ImageUtils.loadTexture(
								  new WebGLYomotsuTPS.HTML.Images.FromAssets._1().src
							  ),
							  ambient = 0x999999,
							  color = 0xffffff,
							  specular = 0xffffff,
							  shininess = 25,
							  morphTargets = true
						  }
					  );




			var loader = new THREE.JSONLoader();

			// Severity	Code	Description	Project	File	Line
			//Error CS0122  'Application.md2frames' is inaccessible due to its protection level WebGLTiltShift  X:\jsc.svn\examples\javascript\WebGL\WebGLTiltShift\WebGLTiltShift\Application.cs   661
			// wtf?
			var md2frames = new WebGLYomotsuTPS.Application.md2frames();

			var moveState_moving = false;
			var moveState_front = false;
			var moveState_Backwards = false;
			var moveState_left = false;
			var moveState_right = false;
			var moveState_speed = 4.0;
			var moveState_angle = 0.0;



			var player_motion = default(WebGLYomotsuTPS.Application.motion);
			loader.load(
				new global::WebGLYomotsuTPS.Design.droid().Content.src,
					IFunction.OfDelegate(
						new Action<object>(
							xgeometry =>
							{
								var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material);

								// raise it up
								md2meshBody.position.y = 100;

								md2meshBody.rotation.y = (float)(-Math.PI / 2);
								//md2meshBody.scale.set(.02, .02, .02);
								md2meshBody.scale.set(4, 4, 4);
								md2meshBody.castShadow = true;
								//md2meshBody.receiveShadow = false;

								#region player_motion
								Action<WebGLYomotsuTPS.Application.motion> player_changeMotion = motion =>
								{
									//Console.WriteLine(
									//    new { motion, md2frames.run, md2frames.stand });

									player_motion = motion;

									//    player.state = md2frames[motion][3].state;

									var animMin = motion.min;
									var animMax = motion.max;
									var animFps = motion.fps;

									md2meshBody.time = 0;
									md2meshBody.duration = (int)(
										1000 * ((animMax - animMin) / (double)animFps)
									);
									Native.document.title = new { animMin, animMax }.ToString();

									md2meshBody.setFrameRange(animMin, animMax);
								};

								player_changeMotion(md2frames.stand);
								#endregion


								#region move
								Action move = delegate
								{
									//            if(player.model.motion !== 'run' && player.model.state === 'stand'){

									//    changeMotion('run');

									//}

									//if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){

									//    changeMotion('crwalk');

									//}

									var speed = moveState_speed;

									//if(player.model.state === 'crstand'){speed *= .5;}

									//if(player.model.state === 'freeze') {speed *= 0;}



									var direction = moveState_angle;

									if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right) { direction += 0; }
									if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 45; }
									if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right) { direction += 90; }
									if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right) { direction += 135; }
									if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right) { direction += 180; }
									if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right) { direction += 225; }
									if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 270; }
									if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right) { direction += 315; }



									md2meshBody.rotation.y = (float)((direction - 90) * Math.PI / 180);

									md2meshBody.position.x -= (float)(Math.Sin(direction * Math.PI / 180.0) * speed * 10);
									md2meshBody.position.z -= (float)(Math.Cos(direction * Math.PI / 180.0) * speed * 10);

								};
								#endregion


								//scene.add(player_model_objects);
								//player_model_objects.add(md2meshBody);
								scene.add(md2meshBody);

								#region onkeydown
								Native.document.onkeydown +=
									e =>
									{
										if (e.KeyCode == 67)
										{
											if (player_motion == md2frames.stand)
												player_changeMotion(md2frames.crstand);
											else if (player_motion == md2frames.crstand)
												player_changeMotion(md2frames.stand);

										}
										else if (e.KeyCode == 87)
										{
											moveState_front = true;
											moveState_Backwards = false;
										}
										else if (e.KeyCode == 83)
										{
											moveState_front = false;
											moveState_Backwards = true;
										}
										else if (e.KeyCode == 65)
										{
											moveState_left = true;
											moveState_right = false;
										}
										else if (e.KeyCode == 68)
										{
											moveState_left = false;
											moveState_right = true;
										}

										var isStand = player_motion == md2frames.stand;
										Console.WriteLine(
											new { e.KeyCode, moveState_front, moveState_Backwards, isStand }
											);

										if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
											if (player_motion == md2frames.stand)
												player_changeMotion(md2frames.run);
											else if (player_motion == md2frames.crstand)
												player_changeMotion(md2frames.crwalk);
									};
								#endregion

								#region onkeyup
								Native.document.onkeyup +=
									e =>
									{
										if (e.KeyCode == 87)
										{
											moveState_front = false;
										}
										else if (e.KeyCode == 83)
										{
											moveState_Backwards = false;
										}
										else if (e.KeyCode == 65)
										{
											moveState_left = false;
										}
										else if (e.KeyCode == 68)
										{
											moveState_right = false;
										}

									};
								#endregion




								#region loop

								var yclock = Stopwatch.StartNew();

								Native.window.onframe += delegate
								{
									if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
									{
										move();
									}
									else
										if (player_motion == md2frames.run)
										player_changeMotion(md2frames.stand);
									else if (player_motion == md2frames.crwalk)
										player_changeMotion(md2frames.crstand);



									//player_model_objects.position.x = player_position_x;
									//player_model_objects.position.y = player_position_y;
									//player_model_objects.position.z = player_position_z;


									#region model animation

									var delta = yclock.ElapsedMilliseconds * 0.001;
									yclock.Restart();

									var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe);
									var isAction = player_motion.action;

									var x = (isAction && !isEndFleame);

									if (!isAction || x)
									{
										md2meshBody.updateAnimation(1000 * delta);
									}
									else if (player_motion.state == "freeze")
									{
										//dead...
									}
									else
									{
										player_changeMotion(player_motion);
									}
									#endregion

									//renderer.render(scene, camera);


								};

								#endregion
							}
						)));


			#endregion




			#region virtual webview.requestFullscreen
			Console.WriteLine("? awaiting to go fullscreen");

			Action requestFullscreen = Native.document.body.requestFullscreen;
			// X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs

			// webview virtual dispatch
			Native.window.onmessage +=
				e =>
				{
					//await contentWindow.postMessageAsync("virtual webview.requestFullscreen");
					// X:\jsc.svn\examples\javascript\chrome\apps\ChromeWebviewFullscreen\ChromeWebviewFullscreen\Application.cs

					if (e.data == "virtual webview.requestFullscreen")
					{
						requestFullscreen = delegate
						{
							Console.WriteLine("requestFullscreen");
							//e.ports.

							//e.ports.WithEach
							e.postMessage("requestFullscreen");
						};

						return;
					}

					// ???
					Native.document.body.innerText = new { e.data }.ToString();

					//await contentWindow.postMessageAsync("virtual webview.requestFullscreen");
				};
			#endregion



			#region onkeyup
			Native.document.onkeyup +=
				e =>
				{
					if (e.KeyCode == (int)System.Windows.Forms.Keys.F)
					{
						requestFullscreen();
					}

				};
			#endregion



			var controls = new THREE.OrbitControls(camera);

			Native.window.onframe +=
				delegate
				{
					////var delta = clock.getDelta();




					var scale = 1.0;
					var delta = clock.getDelta();
					var stepSize = delta * scale;

					if (stepSize > 0)
					{
						//characterController.update(stepSize, scale);
						//gui.setSpeed(blendMesh.speed);

						THREE.AnimationHandler.update(stepSize);
					}

					controls.update();
					camera.position = controls.center.clone();

					composer.render(0.1);
				};



			#region onresize
			new { }.With(
				async delegate
				{
					//while (true)
					do
					{
						// wont really work yet?
						renderer.setSize(Native.window.Width, Native.window.Height);
						renderTarget.setSize(Native.window.Width, Native.window.Height);
						composer.setSize(Native.window.Width, Native.window.Height);

						(hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
						(vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;


						camera.aspect = Native.window.aspect;
						camera.updateProjectionMatrix();

						// convert to bool?
					} while (await Native.window.async.onresize);
					//} while (await Native.window.async.onresize != null);

				}
			);
			#endregion



			var ze = new ZeProperties();

			ze.Show();

			ze.treeView1.Nodes.Clear();

			ze.Add(() => renderer);
			ze.Add(() => controls);
			ze.Add(() => scene);
			ze.Left = 0;

		}
Example #8
0
        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IApp page)
        {
            // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLDraggableCubes\WebGLDraggableCubes\Application.cs
            // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLDraggableCubes\WebGLDraggableCubes\Design\AppCode.js

            var camera = new PerspectiveCamera(70, Native.window.aspect, 1, 10000);

            camera.position.set(0, 300, 500);

            var scene = new Scene();

            var geometry = new BoxGeometry(100, 100, 100);

            var random = new Random();

            objects = new THREE.Mesh[10];
            for (var i = 0; i < 10; i++)
            {
                var rgb = (int)(random.NextDouble() * 0xffffff);
                Console.WriteLine(new { i, rgb });

                var obj = new THREE.Mesh(geometry,
                                         new THREE.MeshBasicMaterial(new { color = new THREE.Color(rgb) })
                                         );


                obj.position.x = random.NextDouble() * 800 - 400;
                obj.position.y = random.NextDouble() * 800 - 400;
                obj.position.z = random.NextDouble() * 800 - 400;

                obj.scale.x = random.NextDouble() * 2 + 1;
                obj.scale.y = random.NextDouble() * 2 + 1;
                obj.scale.z = random.NextDouble() * 2 + 1;

                obj.rotation.x = random.NextDouble() * 2 * Math.PI;
                obj.rotation.y = random.NextDouble() * 2 * Math.PI;
                obj.rotation.z = random.NextDouble() * 2 * Math.PI;

                scene.add(obj);

                objects[i] = obj;
            }


            // THREE.Projector has been moved to /examples/js/renderers/Projector.js.
            var projector = new THREE.Projector();

            // ?
            var renderer = new THREE.WebGLRenderer();

            renderer.setClearColor(new THREE.Color(0xf0f0f0));
            //renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.setSize();

            this.canvas = (IHTMLCanvas)renderer.domElement;
            //renderer.domElement.AttachToDocument();
            this.canvas.AttachToDocument();
            this.canvas.style.SetLocation(0, 0);
            this.canvas.css.style.cursor        = IStyle.CursorEnum.pointer;
            this.canvas.css.active.style.cursor = IStyle.CursorEnum.move;

            canvas.onresize += delegate
            {
                camera.aspect = Native.window.aspect;
                camera.updateProjectionMatrix();

                //renderer.setSize(Native.window.Width, Native.window.Height);
                renderer.setSize();
            };

            canvas.onmousedown += (
                e =>
            {
                e.preventDefault();

                var px = (e.CursorX / (double)Native.window.Width);
                var py = (e.CursorY / (double)Native.window.Height);

                var vx = px * 2 - 1;
                var vy = -py * 2 + 1;

                Console.WriteLine(
                    new { e.CursorX, e.CursorY, px, py, vx, vy }
                    );

                //var vector = new THREE.Vector3(
                //  vx,
                //  vy,
                //  0.5);

                var vector = new THREE.Vector3(
                    (e.CursorX / (double)Native.window.Width) * 2 - 1,
                    vy,
                    0.5);

                //var vector = new THREE.Vector3(e.CursorX , e.CursorY, 1);

                projector.unprojectVector(vector, camera);

                //var raycaster = new THREE.Raycaster();
                //raycaster.set(camera.position, vector.sub(camera.position).normalize());

                //
                var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
                //var raycaster = projector.pickingRay(vector.sub(camera.position).normalize(), camera);

                //var intersects = raycaster.intersectObjects(objects, true);
                var intersects = raycaster.intersectObjects(objects);

                Console.WriteLine("Intersects len " + intersects.Length);

                if (intersects.Length > 0)
                {
                    var holder = ((THREE.Mesh)intersects[0].@object);

                    var forthSmallestInnerCilinder = new THREE.Mesh(
                        new THREE.CylinderGeometry(10, 10, 10, 32),
                        new THREE.MeshPhongMaterial(
                            new
                    {
                        specular = new THREE.Color(0xa0a0a0)
                    })
                        );
                    forthSmallestInnerCilinder.position.y = ((THREE.Raycaster_intersectObject)intersects[0]).point.y;
                    forthSmallestInnerCilinder.position.x = ((THREE.Raycaster_intersectObject)intersects[0]).point.x;
                    forthSmallestInnerCilinder.position.z = ((THREE.Raycaster_intersectObject)intersects[0]).point.z;
                    scene.add(forthSmallestInnerCilinder);

                    // Console.WriteLine(holder.visible);
                    //intersects[0].material.color.setHex(random.NextDouble()*0xffffff);
                    Console.WriteLine("" + ((THREE.Raycaster_intersectObject)intersects[0]).point.x);
                    holder.material.color = new THREE.Color(0xf000ff);
                    foreach (var i in objects)
                    {
                        if (i == holder)
                        {
                            Console.WriteLine("Equals true");
                            i.material.color.setRGB(200, 0, 0);
                        }
                    }
                }
            });

            var    radius = 600;
            double theta  = 0;



            Native.window.onframe += (e =>
            {
                if (this.canvas.parentNode == null)
                {
                    return;
                }

                theta += 0.1;

                camera.position.x = radius * Math.Sin(THREE.Math.degToRad(theta));
                camera.position.y = radius * Math.Sin(THREE.Math.degToRad(theta));
                camera.position.z = radius * Math.Cos(THREE.Math.degToRad(theta));
                camera.lookAt(scene.position);

                renderer.render(scene, camera);
            });

            var ze = new ZeProperties();

            ze.Show();
            ze.treeView1.Nodes.Clear();

            ze.Add(() => renderer);
            //ze.Add(() => controls);
            ze.Add(() => scene);
            ze.Left = 0;
        }
Example #9
0
        // inspired by http://alteredqualia.com/three/examples/webgl_terrain_dynamic.html
        // http://alteredqualia.com/three/examples/webgl_morphtargets_md2_control.html

        // Invalid version number in manifest: 40. Please make sure the newly uploaded package has a larger version in file manifest.json than the published package: 40.

        public Application(IDefault page = null)
        {
            // http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/

            // vr view, isometric view
            // http://skycraft.io/
            // http://www.mark-lundin.com/box/inception/

            // running as android tab
            //            I / chromium(25513): [INFO: CONSOLE(88580)] "THREE.WebGLRenderer", source: http://192.168.43.7:25796/view-source (88580)
            //I/chromium(25513): [INFO: CONSOLE(88791)] "Error creating WebGL context.", source: http://192.168.43.7:25796/view-source (88791)
            //I/chromium(25513): [INFO: CONSOLE(88795)] "Uncaught TypeError: Cannot read property 'getShaderPrecisionFormat' of null", source: http://192.168.43.7:25796/view-source (88795)

            // X:\opensource\github\three.js
            // WEBGL_compressed_texture_pvrtc extension not supported.

            // http://stackoverflow.com/questions/21673278/three-js-error-when-applying-texture

            #region += Launched chrome.app.window
            // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs
            dynamic self        = Native.self;
            dynamic self_chrome = self.chrome;

            // I/chromium(18051): [INFO:CONSOLE(36608)] "Uncaught TypeError: Cannot read property 'socket' of undefined", source: http://192.168.43.7:24445/view-source (36608)

            if ((object)self_chrome != null)
            {
                object self_chrome_socket = self_chrome.socket;

                if (self_chrome_socket != null)
                {
                    // could we change the color of the window?

                    // https://developer.chrome.com/apps/manifest/icons
                    chrome.Notification.DefaultIconUrl = new WebGLHZBlendCharacter.HTML.Images.FromAssets.x128().src;

                    Console.WriteLine("invoke TheServerWithAppWindow.Invoke");
                    ChromeTCPServer.TheServerWithAppWindow.Invoke(WebGLTiltShift.HTML.Pages.DefaultSource.Text);

                    return;
                }
            }
            #endregion

            Native.document.body.style.margin   = "0px";
            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            Native.document.body.Clear();



            //			I / chromium(7069): [INFO: CONSOLE(91150)] "THREE.WebGLRenderer", source: http://192.168.1.212:24430/view-source (91150)
            //I/chromium( 7069): [INFO: CONSOLE(91361)] "Error creating WebGL context.", source: http://192.168.1.212:24430/view-source (91361)


            #region svg cursor
            new IXMLHttpRequest(ScriptCoreLib.Shared.HTTPMethodEnum.GET,
                                new HeatZeekerRTS.HTML.Images.FromAssets.MyCursor().src,
                                r =>
            {
                // public static XElement AsXElement(this IElement e);
                var svg = (ISVGSVGElement)(IElement)(r.responseXML.documentElement);


                var cursor1 = svg.AsXElement();



                cursor1
                .Elements("g")
                .Elements("path")
                .Where(x => x.Attribute("id").Value == "path2985")
                .WithEach(
                    path =>
                    path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#ffff00;", "fill:#00ff00;")
                    );

                cursor1
                .Elements("g")
                .Elements("path")
                .Where(x => x.Attribute("id").Value == "path2985-1")
                .WithEach(
                    path =>
                    path.Attribute("style").Value = path.Attribute("style").Value.Replace("fill:#d9d900;", "fill:#00df00;")
                    );

                //.AttachToDocument();

                Native.css.style.cursorImage = svg;


                // this wont work no more?
                new IStyle(Native.css[IHTMLElement.HTMLElementEnum.div].hover)
                {
                    // last change was abut adding pointer
                    // jsc jit could atleast let us know how it looks like
                    //cursor = IStyle.CursorEnum.pointer

                    //cursorImage = new MyCursor()
                };

                //Native.document.documentElement.style.cursorImage = svg;
                //Native.document.documentElement.style.cursorImage = cursor1;
                //Native.document.documentElement.style.cursorElement = cursor1;
                //Native.document.documentElement.style.cursorElement = cursor1.AsHTMLElement();

                //public static IHTMLElement AttachToDocument(this XElement e);

                //.AttachToHead();
            }
                                );
            #endregion


            //#region playmusic
            //new { }.With(
            //    async delegate
            //    {
            //        do
            //        {
            //            var music = new HeatZeekerRTS.HTML.Audio.FromAssets.crickets
            //            {
            //                volume = 0.1

            //                //loop = true,
            //                //controls = true
            //            }.AttachToHead();

            //            music.play();

            //            await music.async.onended;

            //            music.Orphanize();
            //        }
            //        while (true);
            //    }
            //);

            //#endregion


            double SCREEN_WIDTH  = Native.window.Width;
            double SCREEN_HEIGHT = Native.window.Height;

            var clock = new THREE.Clock();

            var sceneRenderTarget = new THREE.Scene();

            var cameraOrtho = new THREE.OrthographicCamera(
                (int)SCREEN_WIDTH / -2,
                (int)SCREEN_WIDTH / 2,
                (int)SCREEN_HEIGHT / 2,
                (int)SCREEN_HEIGHT / -2,
                -100000,
                100000
                );

            cameraOrtho.position.z = 100;
            sceneRenderTarget.add(cameraOrtho);

            var scene  = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(

                //40,
                20,
                //10,

                Native.window.aspect, 2,

                // how far out do we want to zoom?
                200000
                //9000
                );
            camera.position.set(-1200, 800, 1200);

            scene.add(camera);
            //scene.add(new THREE.AmbientLight(0x212121));

            //var spotLight = new THREE.SpotLight(0xffffff, 1.15);
            //spotLight.position.set(500, 2000, 0);
            //spotLight.castShadow = true;
            //scene.add(spotLight);

            //var pointLight = new THREE.PointLight(0xff4400, 1.5);
            //pointLight.position.set(0, 0, 0);
            //scene.add(pointLight);


            //scene.add(new THREE.AmbientLight(0xaaaaaa));
            new THREE.AmbientLight(0x101030).AttachTo(scene);


            //var light = new THREE.DirectionalLight(0xffffff, 1.0);
            #region light
            var light = new THREE.DirectionalLight(0xffffff, 1.5);
            //var light = new THREE.DirectionalLight(0xffffff, 2.5);
            //var light = new THREE.DirectionalLight(0xffffff, 1.5);
            //var lightOffset = new THREE.Vector3(0, 1000, 2500.0);
            var lightOffset = new THREE.Vector3(
                2000,
                700,

                // lower makes longer shadows
                700.0
                );
            light.position.copy(lightOffset);
            light.castShadow = true;

            var xlight = light as dynamic;
            xlight.shadowMapWidth  = 4096;
            xlight.shadowMapHeight = 2048;

            xlight.shadowDarkness = 0.1;
            //xlight.shadowDarkness = 0.5;

            xlight.shadowCameraNear   = 10;
            xlight.shadowCameraFar    = 10000;
            xlight.shadowBias         = 0.00001;
            xlight.shadowCameraRight  = 4000;
            xlight.shadowCameraLeft   = -4000;
            xlight.shadowCameraTop    = 4000;
            xlight.shadowCameraBottom = -4000;

            xlight.shadowCameraVisible = true;

            scene.add(light);
            #endregion



            var renderer = new THREE.WebGLRenderer(
                new
            {
                // http://stackoverflow.com/questions/20495302/transparent-background-with-three-js
                alpha = true,
                preserveDrawingBuffer = true,
                antialias             = true
            }

                );
            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.domElement.AttachToDocument();
            renderer.shadowMapEnabled = true;
            renderer.shadowMapType    = THREE.PCFSoftShadowMap;


            #region create field

            // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.

            // could we get some film grain?
            var planeGeometry = new THREE.CubeGeometry(512, 512, 1);
            var plane         = new THREE.Mesh(planeGeometry,
                                               new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })

                                               );
            //plane.castShadow = false;
            plane.receiveShadow = true;


            {
                var parent = new THREE.Object3D();
                parent.add(plane);
                parent.rotation.x = -Math.PI / 2;
                parent.scale.set(10, 10, 10);

                scene.add(parent);
            }

            var random    = new Random();
            var meshArray = new List <THREE.Mesh>();
            var geometry  = new THREE.CubeGeometry(1, 1, 1);
            var sw        = Stopwatch.StartNew();

            for (var i = 3; i < 9; i++)
            {
                //THREE.MeshPhongMaterial
                var ii = new THREE.Mesh(geometry,


                                        new THREE.MeshPhongMaterial(new { ambient = 0x000000, color = 0xA06040, specular = 0xA26D41, shininess = 1 })

                                        //new THREE.MeshLambertMaterial(
                                        //new
                                        //{
                                        //    color = (Convert.ToInt32(0xffffff * random.NextDouble())),
                                        //    specular = 0xffaaaa,
                                        //    ambient= 0x050505,
                                        //})

                                        );
                ii.position.x = i % 7 * 200 - 2.5f;

                // raise it up
                ii.position.y    = .5f * 100;
                ii.position.z    = -1 * i * 100;
                ii.castShadow    = true;
                ii.receiveShadow = true;
                //ii.scale.set(100, 100, 100 * i);
                ii.scale.set(100, 100 * i, 100);


                meshArray.Add(ii);

                scene.add(ii);

                #region SpeedBlendCharacter
                var _i = i;
                { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }

                var blendMesh = new THREE.SpeedBlendCharacter();
                blendMesh.load(
                    new WebGLHZBlendCharacter.Models.marine_anims().Content.src,
                    new Action(
                        delegate
                {
                    // buildScene
                    //blendMesh.rotation.y = Math.PI * -135 / 180;
                    blendMesh.castShadow = true;
                    // we cannot scale down we want our shadows
                    //blendMesh.scale.set(0.1, 0.1, 0.1);

                    blendMesh.position.x = (_i + 2) % 7 * 200 - 2.5f;

                    // raise it up
                    //blendMesh.position.y = .5f * 100;
                    blendMesh.position.z = -1 * _i * 100;


                    var xtrue = true;
                    // run
                    blendMesh.setSpeed(1.0);

                    // will in turn call THREE.AnimationHandler.play( this );
                    //blendMesh.run.play();
                    // this wont help. bokah does not see the animation it seems.
                    //blendMesh.run.update(1);

                    blendMesh.showSkeleton(!xtrue);

                    scene.add(blendMesh);


                    Native.window.onframe +=
                        delegate
                    {
                        blendMesh.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;



                        ii.rotation.y = Math.PI * 0.0002 * sw.ElapsedMilliseconds;
                    };
                }
                        )
                    );
                #endregion
            }
            #endregion



            // "X:\opensource\github\three.js\examples\js\shaders\VerticalTiltShiftShader.js"
            // http://stackoverflow.com/questions/20899326/how-do-i-stop-effectcomposer-from-destroying-my-transparent-background

            var renderTarget = new THREE.WebGLRenderTarget(
                Native.window.Width, Native.window.Height,
                new
            {
                minFilter    = THREE.LinearFilter,
                magFilter    = THREE.LinearFilter,
                format       = THREE.RGBAFormat,
                stencilBufer = false
            }
                );

            var composer    = new THREE.EffectComposer(renderer, renderTarget);
            var renderModel = new THREE.RenderPass(scene, camera);
            composer.addPass(renderModel);

            #region vblur
            var hblur = new THREE.ShaderPass(THREE.HorizontalTiltShiftShader);
            var vblur = new THREE.ShaderPass(THREE.VerticalTiltShiftShader);

            //var bluriness = 6.0;
            var bluriness = 4.0;

            // Show Details	Severity	Code	Description	Project	File	Line
            //Error CS0656  Missing compiler required member 'Microsoft.CSharp.RuntimeBinder.CSharpArgumentInfo.Create' WebGLTiltShift Application.cs  183

            (hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
            (vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;

            (hblur.uniforms as dynamic).r.value = 0.5;
            (vblur.uniforms as dynamic).r.value = 0.5;
            vblur.renderToScreen = true;

            composer.addPass(hblur);
            composer.addPass(vblur);
            #endregion


            #region WebGLRah66Comanche
            // why isnt it being found?
            new global::WebGLRah66Comanche.Comanche(
                ).Source.Task.ContinueWithResult(
                dae =>
            {
                //dae.position.y = -40;
                //dae.position.z = 280;
                scene.add(dae);
                //oo.Add(dae);

                // wont do it
                //dae.castShadow = true;

                dae.children[0].children[0].children.WithEach(x => x.castShadow = true);


                // the rotors?
                dae.children[0].children[0].children.Last().children.WithEach(x => x.castShadow = true);


                dae.scale.set(0.5, 0.5, 0.5);
                dae.position.x = -900;
                dae.position.z = +900;

                // raise it up
                dae.position.y = 400;

                //var sw = Stopwatch.StartNew();

                //Native.window.onframe += delegate
                //{
                //    //dae.children[0].children[0].children.Last().al
                //    //dae.children[0].children[0].children.Last().rotation.z = sw.ElapsedMilliseconds * 0.01;
                //    //dae.children[0].children[0].children.Last().rotation.x = sw.ElapsedMilliseconds * 0.01;
                //    dae.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.01;
                //};
            }
                );
            #endregion



            #region tree
            // X:\jsc.svn\examples\javascript\WebGL\WebGLGodRay\WebGLGodRay\Application.cs

            var materialScene = new THREE.MeshBasicMaterial(new { color = 0x000000, shading = THREE.FlatShading });
            var tloader       = new THREE.JSONLoader();

            // http://stackoverflow.com/questions/16539736/do-not-use-system-runtime-compilerservices-dynamicattribute-use-the-dynamic
            // https://msdn.microsoft.com/en-us/library/system.runtime.compilerservices.dynamicattribute%28v=vs.110%29.aspx
            //System.Runtime.CompilerServices.DynamicAttribute

            tloader.load(

                new WebGLGodRay.Models.tree().Content.src,

                new Action <THREE.Geometry>(
                    xgeometry =>
            {
                var treeMesh = new THREE.Mesh(xgeometry, materialScene);
                treeMesh.position.set(0, -150, -150);
                treeMesh.position.x = -900;
                treeMesh.position.z = -900;

                treeMesh.position.y = 25;

                var tsc = 400;
                treeMesh.scale.set(tsc, tsc, tsc);

                treeMesh.matrixAutoUpdate = false;
                treeMesh.updateMatrix();


                treeMesh.AttachTo(scene);
            }
                    )
                );
            #endregion


            #region HZCannon
            new HeatZeekerRTSOrto.HZCannon().Source.Task.ContinueWithResult(
                async cube =>
            {
                // https://github.com/mrdoob/three.js/issues/1285
                //cube.children.WithEach(c => c.castShadow = true);

                //cube.traverse(
                //    new Action<THREE.Object3D>(
                //        child =>
                //        {
                //            // does it work? do we need it?
                //            //if (child is THREE.Mesh)

                //            child.castShadow = true;
                //            //child.receiveShadow = true;

                //        }
                //    )
                //);

                // um can edit and continue insert code going back in time?
                cube.scale.x = 10.0;
                cube.scale.y = 10.0;
                cube.scale.z = 10.0;



                //cube.castShadow = true;
                //dae.receiveShadow = true;

                //cube.position.x = -100;

                ////cube.position.y = (cube.scale.y * 50) / 2;
                //cube.position.z = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;



                // if i want to rotate, how do I do it?
                //cube.rotation.z = random() + Math.PI;
                //cube.rotation.x = random() + Math.PI;
                var sw2 = Stopwatch.StartNew();



                scene.add(cube);
                //interactiveObjects.Add(cube);

                // offset is wrong
                //while (true)
                //{
                //    await Native.window.async.onframe;

                //    cube.rotation.y = Math.PI * 0.0002 * sw2.ElapsedMilliseconds;

                //}
            }
                );
            #endregion

            #region HZBunker
            new HeatZeekerRTSOrto.HZBunker().Source.Task.ContinueWithResult(
                cube =>
            {
                // https://github.com/mrdoob/three.js/issues/1285
                //cube.children.WithEach(c => c.castShadow = true);
                cube.castShadow = true;

                //cube.traverse(
                //    new Action<THREE.Object3D>(
                //        child =>
                //             {
                //                 // does it work? do we need it?
                //                 //if (child is THREE.Mesh)
                //                 child.castShadow = true;
                //                 //child.receiveShadow = true;

                //             }
                //    )
                //);

                // um can edit and continue insert code going back in time?
                cube.scale.x = 10.0;
                cube.scale.y = 10.0;
                cube.scale.z = 10.0;

                //cube.castShadow = true;
                //dae.receiveShadow = true;

                cube.position.x = -1000;
                //cube.position.y = (cube.scale.y * 50) / 2;
                cube.position.z = 0;

                scene.add(cube);
            }
                );
            #endregion



            #region YomotsuTPS

            var material = new THREE.MeshPhongMaterial(
                new
            {
                map = THREE.ImageUtils.loadTexture(
                    new WebGLYomotsuTPS.HTML.Images.FromAssets._1().src
                    ),
                ambient      = 0x999999,
                color        = 0xffffff,
                specular     = 0xffffff,
                shininess    = 25,
                morphTargets = true
            }
                );



            var loader = new THREE.JSONLoader();

            // Severity	Code	Description	Project	File	Line
            //Error CS0122  'Application.md2frames' is inaccessible due to its protection level WebGLTiltShift  X:\jsc.svn\examples\javascript\WebGL\WebGLTiltShift\WebGLTiltShift\Application.cs   661
            // wtf?
            var md2frames = new WebGLYomotsuTPS.Application.md2frames();

            var moveState_moving    = false;
            var moveState_front     = false;
            var moveState_Backwards = false;
            var moveState_left      = false;
            var moveState_right     = false;
            var moveState_speed     = 4.0;
            var moveState_angle     = 0.0;



            var player_motion = default(WebGLYomotsuTPS.Application.motion);
            loader.load(
                new global::WebGLYomotsuTPS.Design.droid().Content.src,
                IFunction.OfDelegate(
                    new Action <object>(
                        xgeometry =>
            {
                var md2meshBody = new THREE.MorphAnimMesh(xgeometry, material);

                // raise it up
                md2meshBody.position.y = 100;

                md2meshBody.rotation.y = (float)(-Math.PI / 2);
                //md2meshBody.scale.set(.02, .02, .02);
                md2meshBody.scale.set(4, 4, 4);
                md2meshBody.castShadow = true;
                //md2meshBody.receiveShadow = false;

                #region player_motion
                Action <WebGLYomotsuTPS.Application.motion> player_changeMotion = motion =>
                {
                    //Console.WriteLine(
                    //    new { motion, md2frames.run, md2frames.stand });

                    player_motion = motion;

                    //    player.state = md2frames[motion][3].state;

                    var animMin = motion.min;
                    var animMax = motion.max;
                    var animFps = motion.fps;

                    md2meshBody.time     = 0;
                    md2meshBody.duration = (int)(
                        1000 * ((animMax - animMin) / (double)animFps)
                        );
                    Native.document.title = new { animMin, animMax }.ToString();

                    md2meshBody.setFrameRange(animMin, animMax);
                };

                player_changeMotion(md2frames.stand);
                #endregion


                #region move
                Action move = delegate
                {
                    //            if(player.model.motion !== 'run' && player.model.state === 'stand'){

                    //    changeMotion('run');

                    //}

                    //if(player.model.motion !== 'crwalk' && player.model.state === 'crstand'){

                    //    changeMotion('crwalk');

                    //}

                    var speed = moveState_speed;

                    //if(player.model.state === 'crstand'){speed *= .5;}

                    //if(player.model.state === 'freeze') {speed *= 0;}



                    var direction = moveState_angle;

                    if (moveState_front && !moveState_left && !moveState_Backwards && !moveState_right)
                    {
                        direction += 0;
                    }
                    if (moveState_front && moveState_left && !moveState_Backwards && !moveState_right)
                    {
                        direction += 45;
                    }
                    if (!moveState_front && moveState_left && !moveState_Backwards && !moveState_right)
                    {
                        direction += 90;
                    }
                    if (!moveState_front && moveState_left && moveState_Backwards && !moveState_right)
                    {
                        direction += 135;
                    }
                    if (!moveState_front && !moveState_left && moveState_Backwards && !moveState_right)
                    {
                        direction += 180;
                    }
                    if (!moveState_front && !moveState_left && moveState_Backwards && moveState_right)
                    {
                        direction += 225;
                    }
                    if (!moveState_front && !moveState_left && !moveState_Backwards && moveState_right)
                    {
                        direction += 270;
                    }
                    if (moveState_front && !moveState_left && !moveState_Backwards && moveState_right)
                    {
                        direction += 315;
                    }



                    md2meshBody.rotation.y = (float)((direction - 90) * Math.PI / 180);

                    md2meshBody.position.x -= (float)(Math.Sin(direction * Math.PI / 180.0) * speed * 10);
                    md2meshBody.position.z -= (float)(Math.Cos(direction * Math.PI / 180.0) * speed * 10);
                };
                #endregion


                //scene.add(player_model_objects);
                //player_model_objects.add(md2meshBody);
                scene.add(md2meshBody);

                #region onkeydown
                Native.document.onkeydown +=
                    e =>
                {
                    if (e.KeyCode == 67)
                    {
                        if (player_motion == md2frames.stand)
                        {
                            player_changeMotion(md2frames.crstand);
                        }
                        else if (player_motion == md2frames.crstand)
                        {
                            player_changeMotion(md2frames.stand);
                        }
                    }
                    else if (e.KeyCode == 87)
                    {
                        moveState_front     = true;
                        moveState_Backwards = false;
                    }
                    else if (e.KeyCode == 83)
                    {
                        moveState_front     = false;
                        moveState_Backwards = true;
                    }
                    else if (e.KeyCode == 65)
                    {
                        moveState_left  = true;
                        moveState_right = false;
                    }
                    else if (e.KeyCode == 68)
                    {
                        moveState_left  = false;
                        moveState_right = true;
                    }

                    var isStand = player_motion == md2frames.stand;
                    Console.WriteLine(
                        new { e.KeyCode, moveState_front, moveState_Backwards, isStand }
                        );

                    if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
                    {
                        if (player_motion == md2frames.stand)
                        {
                            player_changeMotion(md2frames.run);
                        }
                        else if (player_motion == md2frames.crstand)
                        {
                            player_changeMotion(md2frames.crwalk);
                        }
                    }
                };
                #endregion

                #region onkeyup
                Native.document.onkeyup +=
                    e =>
                {
                    if (e.KeyCode == 87)
                    {
                        moveState_front = false;
                    }
                    else if (e.KeyCode == 83)
                    {
                        moveState_Backwards = false;
                    }
                    else if (e.KeyCode == 65)
                    {
                        moveState_left = false;
                    }
                    else if (e.KeyCode == 68)
                    {
                        moveState_right = false;
                    }
                };
                #endregion



                #region loop

                var yclock = Stopwatch.StartNew();

                Native.window.onframe += delegate
                {
                    if (moveState_front || moveState_Backwards || moveState_left || moveState_right)
                    {
                        move();
                    }
                    else
                    if (player_motion == md2frames.run)
                    {
                        player_changeMotion(md2frames.stand);
                    }
                    else if (player_motion == md2frames.crwalk)
                    {
                        player_changeMotion(md2frames.crstand);
                    }



                    //player_model_objects.position.x = player_position_x;
                    //player_model_objects.position.y = player_position_y;
                    //player_model_objects.position.z = player_position_z;


                    #region model animation

                    var delta = yclock.ElapsedMilliseconds * 0.001;
                    yclock.Restart();

                    var isEndFleame = (player_motion.max == md2meshBody.currentKeyframe);
                    var isAction    = player_motion.action;

                    var x = (isAction && !isEndFleame);

                    if (!isAction || x)
                    {
                        md2meshBody.updateAnimation(1000 * delta);
                    }
                    else if (player_motion.state == "freeze")
                    {
                        //dead...
                    }
                    else
                    {
                        player_changeMotion(player_motion);
                    }
                    #endregion

                    //renderer.render(scene, camera);
                };

                #endregion
            }
                        )));


            #endregion



            #region virtual webview.requestFullscreen
            Console.WriteLine("? awaiting to go fullscreen");

            Action requestFullscreen = Native.document.body.requestFullscreen;
            // X:\jsc.svn\examples\javascript\chrome\apps\ChromeTCPServerAppWindow\ChromeTCPServerAppWindow\Application.cs

            // webview virtual dispatch
            Native.window.onmessage +=
                e =>
            {
                //await contentWindow.postMessageAsync("virtual webview.requestFullscreen");
                // X:\jsc.svn\examples\javascript\chrome\apps\ChromeWebviewFullscreen\ChromeWebviewFullscreen\Application.cs

                if (e.data == "virtual webview.requestFullscreen")
                {
                    requestFullscreen = delegate
                    {
                        Console.WriteLine("requestFullscreen");
                        //e.ports.

                        //e.ports.WithEach
                        e.postMessage("requestFullscreen");
                    };

                    return;
                }

                // ???
                Native.document.body.innerText = new { e.data }.ToString();

                //await contentWindow.postMessageAsync("virtual webview.requestFullscreen");
            };
            #endregion



            #region onkeyup
            Native.document.onkeyup +=
                e =>
            {
                if (e.KeyCode == (int)System.Windows.Forms.Keys.F)
                {
                    requestFullscreen();
                }
            };
            #endregion



            var controls = new THREE.OrbitControls(camera);

            Native.window.onframe +=
                delegate
            {
                ////var delta = clock.getDelta();



                var scale    = 1.0;
                var delta    = clock.getDelta();
                var stepSize = delta * scale;

                if (stepSize > 0)
                {
                    //characterController.update(stepSize, scale);
                    //gui.setSpeed(blendMesh.speed);

                    THREE.AnimationHandler.update(stepSize);
                }

                controls.update();
                camera.position = controls.center.clone();

                composer.render(0.1);
            };



            #region onresize
            new { }.With(
                async delegate
            {
                //while (true)
                do
                {
                    // wont really work yet?
                    renderer.setSize(Native.window.Width, Native.window.Height);
                    renderTarget.setSize(Native.window.Width, Native.window.Height);
                    composer.setSize(Native.window.Width, Native.window.Height);

                    (hblur.uniforms as dynamic).h.value = bluriness / Native.window.Width;
                    (vblur.uniforms as dynamic).v.value = bluriness / Native.window.Height;


                    camera.aspect = Native.window.aspect;
                    camera.updateProjectionMatrix();

                    // convert to bool?
                } while (await Native.window.async.onresize);
                //} while (await Native.window.async.onresize != null);
            }
                );
            #endregion



            var ze = new ZeProperties();

            ze.Show();

            ze.treeView1.Nodes.Clear();

            ze.Add(() => renderer);
            ze.Add(() => controls);
            ze.Add(() => scene);
            ze.Left = 0;
        }