예제 #1
0
        // new three broke it?
        // http://www.clicktorelease.com/code/perlin/explosion.html
        // http://www.webgl.com/2013/01/webgl-tutorial-vertex-displacement-with-a-noise-function-aka-fiery-explosion/


        /// <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(IDefault page = null)
        {
            // http://inear.se/fireshader/




            // http://stackoverflow.com/questions/16765120/ashima-perlin-noise-shader-not-working-with-recent-versions-of-three-js

            //var container, renderer,  camera, mesh;
            var start = IDate.Now;
            var fov = 30;


            #region container
            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;
            var container = new IHTMLDiv();

            container.AttachToDocument();
            container.style.backgroundColor = "#000000";
            container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);
            #endregion


            var scene = new THREE.Scene();
            var bkgScene = new THREE.Scene();

            var camera = new THREE.PerspectiveCamera(fov, Native.window.aspect, 1, 10000);
            camera.position.z = 100;
            //camera.target = new THREE.Vector3(0, 0, 0);

            scene.add(camera);

            var bkgCamera = new THREE.OrthographicCamera(
                Native.window.Width / -2,
                Native.window.Width / 2,
                Native.window.Height / 2,
                Native.window.Height / -2,
                -10000,
                10000
            );

            bkgScene.add(bkgCamera);

            var bkgShader = new THREE.ShaderMaterial(
                new 
                {
                    uniforms = new 
                    {
                        tDiffuse = new 
                        {
                            type = "t",
                            value = THREE.ImageUtils.loadTexture(
                                new HTML.Images.FromAssets.bkg().src
                            )
                        },

                        resolution = new  { type = "v2", value = new THREE.Vector2(Native.window.Width, Native.window.Height) }
                    },

                    vertexShader = new Shaders.ExplosionVertexShader().ToString(),
                    //        fragmentShader: document.getElementById( 'fs_Gradient' ).textContent,
                    //fragmentShader = new Shaders.GradientFragmentShader().ToString(),
                    fragmentShader = new Shaders.ExplosionFragmentShader().ToString(),

                    depthWrite = false,
                    depthTest = false,
                    transparent = true
                }
            );

            var quad = new THREE.Mesh(new THREE.PlaneGeometry(Native.window.Width, Native.window.Height), bkgShader);
            quad.position.z = -100;
            quad.rotation.x = (float)Math.PI / 2;
            bkgScene.add(quad);


            var material = new THREE.ShaderMaterial(

                new 
                {
                    uniforms = new // material_uniforms
                    {
                        tExplosion = new  //uniforms_item
                        {
                            type = "t",
                            value =  THREE.ImageUtils.loadTexture(
                                new HTML.Images.FromAssets.explosion().src
                            )
                        },
                        time = new { type = "f", value = 0.0 },
                        weight = new { type = "f", value = 8.0 },
                    },

                    vertexShader = new Shaders.ExplosionVertexShader().ToString(),
                    fragmentShader = new Shaders.ExplosionFragmentShader().ToString(),
                    depthWrite = false,
                    depthTest = false,
                    transparent = true
                }
            );


            var mesh = new THREE.Mesh(new THREE.SphereGeometry(20, 200, 200), material);
            scene.add(mesh);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.autoClear = false;

            container.appendChild(renderer.domElement);

          
            var lon = 0.0;
            var phi = 0.0;
            var theta = 0.0;
            var lat = 15.0;
            var isUserInteracting = false;


            var scale = 0.0;

            #region render

            Native.window.onframe += delegate
            {

                ((material_uniforms)material.uniforms).time.value = .00025 * (IDate.Now - start);

                scale += .005;
                scale %= 2;

                lat = Math.Max(-85, Math.Min(85, lat));
                phi = (90 - lat) * Math.PI / 180;
                theta = lon * Math.PI / 180;

                camera.position.x = (float)(100 * Math.Sin(phi) * Math.Cos(theta));
                camera.position.y = (float)(100 * Math.Cos(phi));
                camera.position.z = (float)(100 * Math.Sin(phi) * Math.Sin(theta));

                //mesh.rotation.x += .012;
                //mesh.rotation.y += .01;
                camera.lookAt(scene.position);

                //    //renderer.render( bkgScene, bkgCamera );
                renderer.render(scene, camera);

                //    stats.update();

            };


            #endregion



            #region IsDisposed

            Dispose = delegate
            {
                if (IsDisposed)
                    return;

                IsDisposed = true;


                container.Orphanize();
            };
            #endregion






            #region AtResize
            Action AtResize = delegate
            {
                container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);


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

                camera.projectionMatrix.makePerspective(fov, Native.window.aspect, 1, 1100);

                //camera.aspect = Native.Window.Width / Native.Window.Height;
                //camera.updateProjectionMatrix();
            };

            Native.window.onresize +=
                delegate
                {
                    AtResize();
                };

            AtResize();
            #endregion



            var ze = new ZeProperties();

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

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



        }
예제 #2
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)
        {

            // this is of little help for now/
            // this one is loading dds?

            var mouseX = 0;
            var mouseY = 0;

            var camera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 2000);
            camera.position.z = 100;


            var scene = new THREE.Scene();

            var ambient = new THREE.AmbientLight(0x101030);
            scene.add(ambient);

            var directionalLight = new THREE.DirectionalLight(0xffeedd);
            directionalLight.position.set(0, 0, 1).normalize();
            scene.add(directionalLight);

            // model

            // THREE.ImageUtils.loadCompressedTexture has been removed.Use THREE.DDSLoader instead.

            var loader = new THREE.OBJMTLLoader();


            //            ImageUtils.parseDDS(): Invalid magic number in DDS header view-source:76325
            //256
            //WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled. 192.168.1.88/:1
            //WebGL: too many errors, no more errors will be reported to the console for this context. 


            // Request URL:http://192.168.1.88:30122/assets/WebGLMTLExperiment/01_-_Default1noCulling.dds

            { var ref0 = "assets/WebGLMTLExperiment/01_-_Default1noCulling.dds"; }
            { var ref0 = "assets/WebGLMTLExperiment/male-02-1noCulling.dds"; }
            { var ref0 = "assets/WebGLMTLExperiment/orig_02_-_Defaul1noCulling.dds"; }



            loader.load(
                "assets/WebGLMTLExperiment/male02.obj",
                "assets/WebGLMTLExperiment/male02_dds.mtl",

                                new Action<THREE.Object3D>(
                    o =>
                    {

                        //o.scale = new THREE.Vector3(40, 40, 40);

                        o.position.y = -80;
                        scene.add(o);
                        //oo.Add(o);

                    }
            ),


                   new Action<object>(
                    o =>
                    {
                        Console.WriteLine("progress " + new { o });
                    }
                ),

                 new Action<object>(
                    o =>
                    {
                        Console.WriteLine("error " + new { o });
                    }
                 )
            );






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

            // why are we getting offset?
            renderer.setSize(Native.window.Width, Native.window.Height);

            //Native.document.body.Clear();


            renderer.domElement.AttachToDocument();
            //renderer.domElement.AttachTo(Native.document.documentElement);

            //window.addEventListener( 'resize', onWindowResize, false );

            //}

            //function onWindowResize() {

            //    windowHalfX = window.innerWidth / 2;
            //    windowHalfY = window.innerHeight / 2;

            //    camera.aspect = window.innerWidth / window.innerHeight;
            //    camera.updateProjectionMatrix();

            //    renderer.setSize( window.innerWidth, window.innerHeight );

            //}

            var controls = new THREE.OrbitControls(camera, renderer.domElement);


            ////

            //function animate() {

            //    requestAnimationFrame( animate );
            //    render();

            //}

            Native.window.onframe +=
                delegate
                {


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

                    renderer.render(scene, camera);

                };



            #region ZeProperties
            var ze = new ZeProperties();

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

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


        }
예제 #3
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;

        }
예제 #4
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)
        {
            // .obj nolonger works?


            // http://forums.newtek.com/showthread.php?139633-how-to-convert-sketchup-files-into-OBJ-without-the-PRO-version

            // http://www.gameartmarket.com/details?id=ag9zfmRhZGEtM2RtYXJrZXRyMgsSBFVzZXIiE3BpZXJ6YWtAcGllcnphay5jb20MCxIKVXNlclVwbG9hZBjc_5ik8ycM
            // http://www.gameartmarket.com/details?id=ag9zfmRhZGEtM2RtYXJrZXRyMgsSBFVzZXIiE3BpZXJ6YWtAcGllcnphay5jb20MCxIKVXNlclVwbG9hZBjXwOHe-icM
            // http://scfreak.0catch.com/dlindex.html
            // https://sites.google.com/a/jsc-solutions.net/backlog/knowledge-base/2013/201311/20131109-gold
            // view-source:file:///X:/opensource/github/three.js/examples/webgl_loader_obj.html

            var oo = new List<THREE.Object3D>();

            #region scene
            var window = Native.window;

            var camera = new THREE.PerspectiveCamera(
                45,
                window.aspect,
                1,
                2000
                );
            camera.position.z = 400;

            // scene

            var scene = new Scene();

            new AmbientLight(0x101030).AttachTo(scene);

            var directionalLight = new THREE.DirectionalLight(0xffeedd);
            directionalLight.position.set(0, 0, 1);
            scene.add(directionalLight);

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.Width, window.Height);

            renderer.domElement.AttachToDocument();
            renderer.domElement.style.SetLocation(0, 0);



            var controls = new THREE.OrbitControls(camera, renderer.domElement);

            var st = Stopwatch.StartNew();

            Native.window.onframe +=
                delegate
                {

                    oo.WithEach(
                        x =>
                            x.rotation.y = st.ElapsedMilliseconds * 0.001
                    );


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

                    renderer.render(scene, camera);


                };

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

                    renderer.setSize(window.Width, window.Height);

                };
            #endregion








            new THREE_OBJAsset(
                 new HTML.Images.FromAssets.texture_palm(),
                   "assets/WebGLOBJExperiment/palm.obj"
            ).Source.Task.ContinueWithResult(
                palm =>
                {
                    palm.position.y = -80;
                    //scene.add(palm);
                    palm.AttachTo(scene);

                    oo.Add(palm);

                    palm.position.x = -200;
                    palm.scale = new THREE.Vector3(5, 5, 5);
                }
            );

            new THREE_OBJAsset(
                  new HTML.Images.FromAssets.texture_palm(),
                    "assets/WebGLOBJExperiment/palm.obj"
             ).Source.Task.ContinueWithResult(
                 palm2 =>
                 {
                     palm2.position.y = -80;
                     palm2.AttachTo(scene);
                     oo.Add(palm2);

                     palm2.position.x = 200;
                     palm2.scale = new THREE.Vector3(5, 5, 5);
                 }
             );

            new THREE_OBJAsset(
                 new HTML.Images.FromAssets.Fence_texture3(),
                   "assets/WebGLOBJExperiment/fence.obj"
            ).Source.Task.ContinueWithResult(
                fence =>
                {
                    fence.position.y = -80;
                    fence.AttachTo(scene);
                    //scene.add(fence);
                    oo.Add(fence);

                    fence.position.x = -100;
                    fence.scale = new THREE.Vector3(0.2, 0.2, 0.2);
                }
            );

            new sack_of_gold2().Source.Task.ContinueWithResult(
               sack_of_gold2 =>
               {
                   sack_of_gold2.position.y = -80;
                   sack_of_gold2.AttachTo(scene);
                   oo.Add(sack_of_gold2);

                   sack_of_gold2.position.x = 70;
                   sack_of_gold2.position.z = 100;
                   sack_of_gold2.scale = new THREE.Vector3(0.5, 0.5, 0.5);
               }
           );

            new sack_of_gold2().Source.Task.ContinueWithResult(
          o =>
          {
              o.position.y = -80;
              scene.add(o);
              oo.Add(o);

              o.position.x = -70;
              o.position.z = 100;
              o.scale = new THREE.Vector3(0.5, 0.5, 0.5);
          }
      );

            new THREE_OBJAsset(
              new HTML.Images.FromAssets.ash_uvgrid01(),
                   "assets/WebGLOBJExperiment/male02.obj"
            ).Source.Task.ContinueWithResult(
                o =>
                {
                    o.position.y = -80;
                    scene.add(o);
                    oo.Add(o);

                    o.position.x = 50;
                    //o.scale = new THREE.Vector3(5, 5, 5);
                }
            );


            var ze = new ZeProperties
            {
                //() => renderer
            };

            ze.Show();

            ze.treeView1.Nodes.Clear();

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

            ze.Left = 0;
        }
예제 #5
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;

		}
예제 #6
0
        // no animation no more?

        /// <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 = null)
        {
            // 20150527  i see a red blob. broken?

            var sw = Stopwatch.StartNew();

            // X:\jsc.svn\examples\javascript\synergy\webgl\WebGLMD2MorphtargetExample\WebGLMD2MorphtargetExample\Application.cs

            Console.WriteLine("before three");

            // fails with gallery? why?
            //Action Toggle = DiagnosticsConsole.ApplicationContent.BindKeyboardToDiagnosticsConsole();


            Console.WriteLine("InitializeContent");
            // http://oos.moxiecode.com/js_webgl/md5_test/


            var oldTime = 0L;

            var cameraTarget = new THREE.Vector3 { x = 0, y = 300, z = 0 };

            var positionVector = new THREE.Vector3();
            var lookVector = new THREE.Vector3();

            var lastframe = 0;

            var scene = new THREE.Scene();
            scene.fog = new THREE.Fog(0x000000, 1000, 5000);

            var camera = new THREE.PerspectiveCamera(50, Native.window.aspect, 1, 10000);
            camera.position.z = 800;
            camera.position.y = 100;

            camera.lookAt(scene.position);
            scene.add(camera);

            // floor
            var plane = new THREE.PlaneGeometry(10000, 10000, 50, 50);
            var floorMaterial = new THREE.MeshBasicMaterial(new { wireframe = true, color = 0x333333 });
            var floor = new THREE.Mesh(plane, floorMaterial);
            floor.rotation.x = -Math.PI / 2;
            scene.add(floor);

            // renderer
            var renderer = new THREE.WebGLRenderer(new { antialias = true });
            //renderer.setClearColorHex(0x000000);

            renderer.domElement.AttachToDocument();


            //           0200001f WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2
            //           script: error JSC1000: unsupported flow detected, try to simplify.
            //Assembly V:\WebGLBossHarvesterByOutsideOfSociety.Application.exe
            //DeclaringType WebGLBossHarvesterByOutsideOfSociety.Application +<> c__DisplayClass2,
            //OwnerMethod <.ctor > b__5
            //Offset 005b
            // did the problem just dissapear?


            var controls = new THREE.OrbitControls(camera, renderer.domElement);


            #region harvester_md5mesh
            new THREE.JSONLoader().load(
                new WebGLBossHarvesterByOutsideOfSociety.Models.harvester_md5mesh().Content.src,
                (Action<dynamic>)
                    (geometry =>
                    {
                        Console.WriteLine("geometry ready!");

                        //console.log("Number of bones: "+geometry.bones.length);

                        var material = new THREE.MeshBasicMaterial(new
                        {
                            color = 0xffffff,
                            wireframe = true,
                            opacity = 0.25,
                            transparent = true,
                            skinning = true
                        });

                        object geometry_object = geometry;
                        var skin = new THREE.SkinnedMesh(geometry_object, material);
                        scene.add(skin);


                        object geometry_animation = geometry.animation;
                        //THREE.AnimationHandler.add(geometry_animation);

                        //var animation = new THREE.Animation(skin, "walk1");
                        //animation.play();

                        skin.rotation.x = -Math.PI / 2;
                        skin.rotation.z = -Math.PI / 2;

                        // view-source:http://threejs.org/examples/webgl_animation_skinning_morph.html
                        var boneArray = new Dictionary<int, THREE.Mesh>();


                        var boneContainer = new THREE.Object3D();

                        boneContainer.rotation.x = -Math.PI / 2;
                        boneContainer.rotation.z = -Math.PI / 2;

                        scene.add(boneContainer);

                        var index = 0;
                        var pmaterial = new THREE.MeshPhongMaterial(new { color = 0xff0000 });

                        //for (var b = 1; b != skin.bones.Length; b++)
                        //{

                        //    var bone = skin.bones[b];

                        //    var nc = bone.children.Length;

                        //    for (var c = 0; c != nc; c++)
                        //    {
                        //        var child = bone.children[c];

                        //        var size = Math.Min(child.position.length() * 0.05, 8);

                        //        var cylinder = new THREE.CylinderGeometry(size, 0.1, child.position.length(), 6);

                        //        // ERROR: Matrix's .makeRotationFromEuler() now expects a Euler rotation rather than a Vector3 and order.  Please update your code.
                        //        cylinder.applyMatrix(
                        //            new THREE.Matrix4().makeRotationFromEuler(
                        //               new THREE.Euler(Math.PI / 2, 0, 0)
                        //            )
                        //        );

                        //        cylinder.applyMatrix(new THREE.Matrix4().setPosition(new THREE.Vector3(0, 0, 0.5 * child.position.length())));
                        //        var mesh = new THREE.Mesh(cylinder, pmaterial);

                        //        boneArray[child.id] = mesh;
                        //        boneContainer.add(mesh);
                        //    }

                        //}




                        #region render


                        Native.window.onframe += delegate
                        {
                            Func<long> Date_now = () => (long)new IFunction("return Date.now();").apply(null);

                            var time = Date_now();
                            double delta = time - oldTime;


                            if (oldTime == 0)
                            {
                                delta = 1000 / 60.0;
                            }

                            oldTime = time;




                            THREE.AnimationHandler.update(delta / 1000.0);



                            // does not exist?
                            //for (var b = 1; b != skin.bones.Length; b++)
                            //{

                            //    var bone = skin.bones[b];
                            //    var nc = bone.children.Length;

                            //    for (var c = 0; c != nc; c++)
                            //    {

                            //        var child = bone.children[c];
                            //        var child_bone = (THREE.Bone)(object)child;
                            //        var id = child.id;
                            //        var mesh = boneArray[id];

                            //        positionVector.getPositionFromMatrix(child_bone.skinMatrix);
                            //        mesh.position.copy(positionVector);

                            //        var child_parent_bone = (THREE.Bone)(object)child.parent;
                            //        lookVector.getPositionFromMatrix(child_parent_bone.skinMatrix);
                            //        mesh.lookAt(lookVector);

                            //    }

                            //}


                            boneContainer.position.z = skin.position.z;

                            //var frame = (int)Math.Floor(animation.currentTime * 24.0);
                            var frame = (int)Math.Floor(sw.ElapsedMilliseconds * 24.0);

                            if (frame >= 0 && lastframe > frame)
                            {
                                skin.position.z += 304.799987793; // got that from the root bone, total movement of one walk cycle
                            }
                            lastframe = frame;

                            var speed = delta * 0.131;

                            cameraTarget.z += speed;

                            if (skin.position.z > floor.position.z + 1000.0)
                            {
                                floor.position.z += 1000.0;
                            };


                            //camera.position.x = 800.0 * Math.Sin(time / 3000.0);
                            //camera.position.z = cameraTarget.z + 800.0 * Math.Cos(time / 3000.0);

                            //camera.lookAt(cameraTarget);

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



                            renderer.render(scene, camera);

                        };
                        #endregion

                    }
               )
           );
            #endregion

            //var harvester_src = new WebGLBossHarvesterByOutsideOfSociety.Models.harvester().Content.src;

            //Console.WriteLine("before harvester " + new { harvester_src });
            //loader.load(harvester_src, harvesterLoaded);

            // lights
            var pointLight = new THREE.PointLight(0xffffff, 1.0, 0);


            pointLight.AttachTo(camera);



            #region AtResize
            Action AtResize = delegate
            {
                camera.aspect = Native.window.aspect;
                camera.updateProjectionMatrix();

                renderer.setSize(Native.window.Width, Native.window.Height);
            };
            Native.window.onresize +=
              delegate
            {
                AtResize();
            };

            AtResize();
            #endregion

            Console.WriteLine("renderer ready!");


            //#region onmousedown
            //Native.document.onmousedown +=
            //     e =>
            //     {
            //         if (e.MouseButton == IEvent.MouseButtonEnum.Middle)
            //         {
            //             if (Native.document.pointerLockElement == Native.document.body)
            //             {
            //                 // cant requestFullscreen while pointerLockElement
            //                 Console.WriteLine("exitPointerLock");
            //                 Native.document.exitPointerLock();
            //                 //Native.document.exitFullscreen();
            //                 return;
            //             }

            //             Console.WriteLine("requestFullscreen");
            //             //Native.document.body.requestFullscreen();
            //             Native.document.body.requestPointerLock();
            //             return;
            //         }
            //     };
            //#endregion


            #region ZeProperties
            var ze = new ZeProperties();

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

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



        }