示例#1
0
        // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150812/cssstereo

        //0001 02000178 ScriptCoreLib::ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProvider
        //script: error JSC1000: Java : Opcode not implemented: stind.i1 at ScriptCoreLib.Shared.BCLImplementation.System.Security.Cryptography.__MD5CryptoServiceProviderByMahmood.CreatePaddedBuffer
        //internal compiler error at method

        //       script: error JSC1000: Java :
        //BCL needs another method, please define it.
        //Cannot call type without script attribute :
        //System.Threading.Monitor for Void Enter(System.Object, Boolean ByRef) used at
        //WebGLVRCreativeLeadership.Activities.ApplicationWebServiceActivity+<>c__DisplayClass24.<CreateServer>b__29 at offset 0018.
        //If the use of this method is intended, an implementation should be provided with the attribute[Script(Implements = typeof(...)] set.You may have mistyped it.

        //		I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)
        //I/chromium(13596): [INFO: CONSOLE(97050)] "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )", source: http://192.168.1.228:23993/view-source (97050)

        public Application(com.abstractatech.apps.vr.HTML.Pages.IApp page)
        {
            #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;
            object  self_chrome_socket = self_chrome.socket;

            if (self_chrome_socket != null)
            {
                ChromeTCPServer.TheServerWithAppWindow.Invoke(com.abstractatech.apps.vr.HTML.Pages.AppSource.Text);

                return;
            }
            #endregion

            // https://play.google.com/store/apps/details?id=com.abstractatech.vr
            // could we display LAN UDP notifications too. like
            // which youtube video is playing?

            Native.body.Clear();
            Native.body.style.margin          = "0px";
            Native.body.style.backgroundColor = "black";

            // https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652

            //          hResolution: 1920,
            //vResolution: 1080,

            // "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln"

            // http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0
            // https://github.com/troffmo5/OculusStreetView

            // http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect
            // http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/

            // http://stemkoski.github.io/Three.js/Sprites.html
            // http://stemkoski.github.io/Three.js/Texture-Animation.html
            // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html

            // http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

            var window = Native.window;

            var fov = 70.0;

            var camera = new THREE.PerspectiveCamera(fov,
                                                     window.aspect, 1, 1100);
            var target = new THREE.Vector3(0, 0, 0);

            //(camera as dynamic).target = target;

            var scene = new THREE.Scene();
            //scene.add(new THREE.AmbientLight(0xffffff));
            //scene.add(new THREE.AmbientLight(0xafafaf));

            // http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/

            // http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect

            scene.add(new THREE.AmbientLight(0x2f2f2f));


            //var light = new THREE.DirectionalLight(0xffffff, 1.0);
            #region light
            var light = new THREE.DirectionalLight(0xffffff, 2.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.3;
            //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 mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40),
                                      new THREE.MeshBasicMaterial(new
            {
                map = THREE.ImageUtils.loadTexture(
                    new _2294472375_24a3b8ef46_o().src
                    //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
                    //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src

                    )
            }));
            mesh.scale.x = -1;
            scene.add(mesh);

            #region sprite2
            var crateTexture = THREE.ImageUtils.loadTexture(
                new ChromeCreativeLeadership.HTML.Images.FromAssets.Mockup().src

                );

            var crateMaterial = new THREE.SpriteMaterial(
                new
            {
                map = crateTexture,
                useScreenCoordinates = false,
                //color = 0xff0000
                color = 0xffffff
            }
                );



            var sprite2 = new THREE.Sprite(crateMaterial);

            //floor
            //sprite2.position.set(0, -200, 0);

            // left
            //sprite2.position.set(200, 50, 0);

            sprite2.position.set(0, 0, 200);

            //sprite2.position.set(-100, 0, 0);
            sprite2.scale.set(
                _2294472375_24a3b8ef46_o.ImageDefaultWidth * 0.08,
                _2294472375_24a3b8ef46_o.ImageDefaultHeight * 0.08,
                //64, 64,
                1.0);                 // imageWidth, imageHeight
            scene.add(sprite2);
            #endregion


            #region ColladaAudiA4
            new ColladaAudiA4().Source.Task.ContinueWithResult(
                dae =>
            {
                // 90deg
                //dae.rotation.x = -Math.Cos(Math.PI);

                //dae.scale.x = 30;
                //dae.scale.y = 30;
                //dae.scale.z = 30;
                //dae.position.z = 65;

                // right
                dae.position.z = -20;
                dae.position.x = -100;
                dae.position.y = -90;


                // jsc, do we have ILObserver available yet?
                dae.scale.x = 1.0;
                dae.scale.y = 1.0;
                dae.scale.z = 1.0;

                //dae.position.y = -80;

                scene.add(dae);
                //oo.Add(dae);
            }
                );
            #endregion



            #region nexus7
            new nexus7().Source.Task.ContinueWithResult(
                dae =>
            {
                // 90deg
                dae.rotation.x = -Math.Cos(Math.PI);

                //dae.scale.x = 30;
                //dae.scale.y = 30;
                //dae.scale.z = 30;
                //dae.position.z = 65;

                // left
                //dae.position.x = 200;

                dae.position.z = -100;
                dae.position.y = -50;

                //dae.position.z = 100;



                // jsc, do we have ILObserver available yet?
                dae.scale.x = 13.5;
                dae.scale.y = 13.5;
                dae.scale.z = 13.5;

                //dae.position.y = -80;

                scene.add(dae);
                //oo.Add(dae);
            }
                );
            #endregion



            //          // DK2
            //          hResolution: 1920,
            //vResolution: 1080,

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(1920, 1080);


            // broken?
            var distortionK       = new double[] { 1.0, 0.22, 0.24, 0.0 };
            var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 };

            var HMD = new OculusRiftEffectOptions
            {
                hResolution = window.Width,
                vResolution = window.Height,

                hScreenSize            = 0.12576,
                vScreenSize            = 0.07074,
                interpupillaryDistance = 0.0635,
                lensSeparationDistance = 0.0635,
                eyeToScreenDistance    = 0.041,

                //  j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0];
                //distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 },
                distortionK = distortionK,

                // j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0];
                //chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }
                chromaAbParameter = chromaAbParameter
            };

            var effect = new THREE.OculusRiftEffect(
                renderer, new
            {
                worldScale = 100,

                //HMD
            }
                );

            effect.setSize(1920, 1080);


            renderer.domElement.AttachToDocument();

            //renderer.domElement.style.position = IStyle.PositionEnum.absolute;
            renderer.domElement.style.SetLocation(0, 0);

            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;

            // x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs


            #region onresize
            new { }.With(
                async delegate
            {
                retry:

                var s = (double)Native.window.Width / 1920.0;


                Native.document.body.style.transform       = "scale(" + s + ")";
                Native.document.body.style.transformOrigin = "0% 0%";

                await Native.window.async.onresize;
                goto retry;
            }
                );
            #endregion



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

            //        renderer.setSize(window.Width, window.Height);
            //        effect.setSize(window.Width, window.Height);
            //    };
            //#endregion


            //Native.document.body.onmousewheel +=
            //    e =>
            //    {
            //        fov -= e.WheelDirection * 5.0;
            //        camera.projectionMatrix.makePerspective(fov,
            //            (double)window.Width / window.Height, 1, 1100);
            //    };

            var lon0 = -45.0;
            var lon1 = 0.0;

            var lon = new sum(
                () => lon0,
                () => lon1
                );

            var lat0 = 0.0;
            var lat1 = 0.0;

            // or could we do it with byref or pointers?
            var lat = new sum(
                () => lat0,
                () => lat1
                );

            var phi   = 0.0;
            var theta = 0.0;

            var camera_rotation_z = 0.0;


            var labove = new NotificationLayout();

            #region sprite2 above
            {
                labove.Message.innerText       = "VR CREATIVE LEADERSHIP";
                labove.layout.style.background = "";

                new { }.With(
                    async delegate
                {
                    retry:

                    // make it blink. gaze cursor is on it?


                    labove.box.style.background = "rgba(255,255,0,0.7)";
                    labove.box.setAttribute("invoke", "onmutation1");
                    await Task.Delay(1500);

                    // is mutation observer noticing it?
                    labove.box.style.background = "rgba(255,255,255,0.7)";
                    labove.box.setAttribute("invoke", "onmutation2");
                    await Task.Delay(1500);


                    goto retry;
                }
                    );



                var c = labove.AsCanvas();

                var xcrateTexture = new THREE.Texture(c);

                // like video texture
                Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; };

                var xcrateMaterial = new THREE.SpriteMaterial(
                    new
                {
                    map = xcrateTexture,
                    useScreenCoordinates = false,
                    //color = 0xff0000
                    color = 0xffffff
                }
                    );



                var xsprite2 = new THREE.Sprite(xcrateMaterial);

                //floor
                //sprite2.position.set(0, -200, 0);

                // left
                xsprite2.position.set(200, 0, 0);

                //sprite2.position.set(0, 0, 200);

                //sprite2.position.set(-100, 0, 0);
                xsprite2.scale.set(
                    c.width * 0.5,
                    c.height * 0.5,
                    //64, 64,
                    1.0);                     // imageWidth, imageHeight
                scene.add(xsprite2);
            }
            #endregion



            //var lineTo = new List<THREE.Vector3>();
            var others = new
            {
                ui     = default(NotificationLayout),
                canvas = default(IHTMLCanvas),

                map = default(THREE.Texture),

                sprite = default(THREE.Sprite)
            }.ToEmptyList();

            #region add
            Action <NotificationLayout> add = ui =>
            {
                ui.layout.style.background = "";

                var canvas = ui.AsCanvas();
                var index  = others.Count;

                //ui.Message  += new { index };
                //ui.Message.innerText += new { index };

                //lbelow0.Message = new { THREE.REVISION }.ToString();

                // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )

                var map = new THREE.Texture(canvas);

                map.minFilter = THREE.LinearFilter;

                // like video texture

                var xcrateMaterial = new THREE.SpriteMaterial(
                    new
                {
                    map,
                    useScreenCoordinates = false,
                    //color = 0xff0000
                    color = 0xffffff
                }
                    );



                var sprite = new THREE.Sprite(xcrateMaterial);

                //floor
                //sprite2.position.set(0, -200, 0);

                // left middle
                //sprite2.position.set(200, 0, 0);
                //sprite.position.set(250, -50, 50);
                //lineTo.Add(sprite.position);



                //sprite2.position.set(0, 0, 200);

                //sprite2.position.set(-100, 0, 0);
                sprite.scale.set(
                    canvas.width * 0.5,
                    canvas.height * 0.5,
                    //64, 64,
                    1.0);                     // imageWidth, imageHeight
                scene.add(sprite);

                others.Add(
                    new
                {
                    ui,
                    canvas,
                    map,
                    sprite
                }
                    );

                var sw = Stopwatch.StartNew();

                Native.window.onframe += delegate
                {
                    // can we get some of the crazy c++ template bitmapbuffer code from the past?
                    map.needsUpdate = true;

                    var offset = Math.PI * 2 * ((double)(index + 1) / others.Count);

                    sprite.position.x = 300;

                    sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
                    sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
                };
            };
            #endregion


            #region NotificationLayout
            add(
                new NotificationLayout
            {
                // keep attributes around?
                // like we do with XElement sync?
                Icon = new _0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With(
                    x =>
                {
                    x.style.width  = "96px";
                    x.style.height = "96px";
                }
                    ),
                Message = "Advanced Mechanics by Portugal Design Lab"
            }
                );

            add(
                new NotificationLayout
            {
                // keep attributes around?
                // like we do with XElement sync?
                Icon = new _42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With(
                    x =>
                {
                    x.style.width  = "96px";
                    x.style.height = "96px";
                }
                    ),
                Message = "Face Value by mshariful"
            }
                );



            add(
                new NotificationLayout
            {
                // keep attributes around?
                // like we do with XElement sync?
                Icon = new _371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With(
                    x =>
                {
                    x.style.width  = "96px";
                    x.style.height = "96px";
                }
                    ),
                Message = "Mind Wall. by Sumit Goski"
            }
                );
            #endregion



            #region lines
            {
                var geometry = new THREE.Geometry
                {
                    // how can we keep streaming verticies data points to gpu?
                    vertices =

                        others.SelectMany(
                            lineTo =>
                            new[]
                    {
                        new THREE.Vector3(200, 0, 0),
                        lineTo.sprite.position
                    }
                            ).ToArray()

                        // https://github.com/mrdoob/three.js/wiki/Updates
                        // http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render
                        //verticesNeedUpdate = true
                };

                Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; };

                var o = new THREE.Line(geometry, new THREE.LineDashedMaterial(
                                           new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 }
                                           ), THREE.LineStrip);

                //objects.Add(o);
                scene.add(o);
            }
            #endregion

            Native.window.onframe +=
                ee =>
            {
                // look we are having html in 3D in VR!



                //if (Native.document.pointerLockElement == Native.document.body)
                //    lon += 0.00;
                //else
                //    lon += 0.01;

                //lat = Math.Max(-85, Math.Min(85, lat));

                //Native.document.title = new { lon, lat }.ToString();


                phi   = THREE.Math.degToRad(90 - lat);
                theta = THREE.Math.degToRad(lon);

                target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
                target.y = 500 * Math.Cos(phi);
                target.z = 500 * Math.Sin(phi) * Math.Sin(theta);

                camera.lookAt(target);
                camera.rotation.z += camera_rotation_z;

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



            // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html

            // http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove



            var compassHeadingOffset      = 0.0;
            var compassHeadingInitialized = 0;

            #region compassHeading
            // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
            Native.window.ondeviceorientation +=
                dataValues =>
            {
                // Convert degrees to radians
                var alphaRad = dataValues.alpha * (Math.PI / 180);
                var betaRad  = dataValues.beta * (Math.PI / 180);
                var gammaRad = dataValues.gamma * (Math.PI / 180);

                // Calculate equation components
                var cA = Math.Cos(alphaRad);
                var sA = Math.Sin(alphaRad);
                var cB = Math.Cos(betaRad);
                var sB = Math.Sin(betaRad);
                var cG = Math.Cos(gammaRad);
                var sG = Math.Sin(gammaRad);

                // Calculate A, B, C rotation components
                var rA = -cA * sG - sA * sB * cG;
                var rB = -sA * sG + cA * sB * cG;
                var rC = -cB * cG;

                // Calculate compass heading
                var compassHeading = Math.Atan(rA / rB);

                // Convert from half unit circle to whole unit circle
                if (rB < 0)
                {
                    compassHeading += Math.PI;
                }
                else if (rA < 0)
                {
                    compassHeading += 2 * Math.PI;
                }

                /*
                 * Alternative calculation (replacing lines 99-107 above):
                 *
                 * var compassHeading = Math.atan2(rA, rB);
                 *
                 * if(rA < 0) {
                 * compassHeading += 2 * Math.PI;
                 * }
                 */

                // Convert radians to degrees
                compassHeading *= 180 / Math.PI;

                // Compass heading can only be derived if returned values are 'absolute'

                // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs

                //Native.document.body.innerText = new { compassHeading }.ToString();
                if (compassHeadingInitialized > 0)
                {
                    lon1 = compassHeading - compassHeadingOffset;
                }
                else
                {
                    compassHeadingOffset = compassHeading;
                    compassHeadingInitialized++;
                }
            };
            #endregion

            #region gamma
            Native.window.ondeviceorientation +=
                //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
                //e => lon = e.gamma;
                e =>
            {
                lat1 = e.gamma;

                // after servicing a running instance would be nice
                // either by patching or just re running the whole iteration in the backgrou
                camera_rotation_z = e.beta * 0.02;
            };
            #endregion



            #region camera rotation
            var old = new { clientX = 0, clientY = 0 };

            Native.document.body.ontouchstart +=
                e =>
            {
                var n = new { e.touches[0].clientX, e.touches[0].clientY };
                old = n;
            };

            Native.document.body.ontouchmove +=
                e =>
            {
                var n = new { e.touches[0].clientX, e.touches[0].clientY };

                e.preventDefault();

                lon0 += (n.clientX - old.clientX) * 0.2;
                lat0 -= (n.clientY - old.clientY) * 0.2;

                old = n;
            };


            Native.document.body.onmousemove +=
                e =>
            {
                e.preventDefault();

                if (Native.document.pointerLockElement == Native.document.body)
                {
                    lon0 += e.movementX * 0.1;
                    lat0 -= e.movementY * 0.1;

                    //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                }
            };


            Native.document.body.onmouseup +=
                e =>
            {
                //drag = false;
                e.preventDefault();
            };

            Native.document.body.onmousedown +=
                e =>
            {
                //e.CaptureMouse();

                //drag = true;
                e.preventDefault();
                Native.document.body.requestPointerLock();
            };


            Native.document.body.ondblclick +=
                e =>
            {
                e.preventDefault();

                Console.WriteLine("requestPointerLock");
            };

            #endregion

            Native.body.onmousewheel +=
                e =>
            {
                camera_rotation_z += 0.1 * e.WheelDirection;;
            };
            // https://developer.android.com/training/system-ui/immersive.html
        }
        /// <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)
        {
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20150824

            // http://stackoverflow.com/questions/14103986/canvas-and-spritematerial

            // X:\jsc.svn\examples\javascript\WebGL\WebGLSVGAnonymous\WebGLSVGAnonymous\Application.cs
            // X:\jsc.svn\examples\javascript\WebGL\WebGLVRCreativeLeadership\WebGLVRCreativeLeadership\Application.cs
            // X:\jsc.svn\examples\javascript\WebGL\WebGLSVGSprite\WebGLSVGSprite\Application.cs

            //var l = new NotificationLayout().layout;

            //l.AttachToDocument();

            // : INodeConvertible<IHTMLElement>
            //var c = (IHTMLCanvas)l.layout;
            //var c = (IHTMLCanvas)l;

            // look we have a databound 2D image!

            // make it implicit operator for assetslibrary?

            //l.style



            //c.AttachToDocument();



            // https://play.google.com/store/apps/details?id=com.abstractatech.vr
            // could we display LAN UDP notifications too. like
            // which youtube video is playing?

            Native.body.Clear();
            Native.body.style.margin = "0px";
            Native.body.style.backgroundColor = "black";

            // https://vronecontest.zeiss.com/index.php?controller=ideas&view=show&id=652

            //          hResolution: 1920,
            //vResolution: 1080,

            // "X:\jsc.svn\examples\javascript\synergy\webgl\WebGLEquirectangularPanorama\WebGLEquirectangularPanorama.sln"

            // http://oculusstreetview.eu.pn/?lat=44.301987&lng=9.211561999999958&q=3&s=false&heading=0
            // https://github.com/troffmo5/OculusStreetView

            // http://stackoverflow.com/questions/23817633/threejs-using-a-sprite-with-the-oculusrifteffect
            // http://laht.info/dk2-parameters-for-three-oculusrifteffect-js/

            // http://stemkoski.github.io/Three.js/Sprites.html
            // http://stemkoski.github.io/Three.js/Texture-Animation.html
            // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html

            // http://mrdoob.github.io/three.js/examples/webgl_panorama_equirectangular.html

            var window = Native.window;

            var fov = 70.0;

            var camera = new THREE.PerspectiveCamera(fov,
                1920.0 / 1080.0,
                //window.aspect,
                1, 1100);
            var target = new THREE.Vector3(0, 0, 0);

            //(camera as dynamic).target = target;

            var scene = new THREE.Scene();
            //scene.add(new THREE.AmbientLight(0xffffff));
            //scene.add(new THREE.AmbientLight(0xafafaf));

            // http://www.html5canvastutorials.com/three/html5-canvas-webgl-ambient-lighting-with-three-js/

            // http://stackoverflow.com/questions/14717135/three-js-ambient-light-unexpected-effect

            scene.add(new THREE.AmbientLight(0x2f2f2f));


            //var light = new THREE.DirectionalLight(0xffffff, 1.0);
            #region light
            var light = new THREE.DirectionalLight(0xffffff, 2.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.3;
            //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 mesh = new THREE.Mesh(new THREE.SphereGeometry(500, 60, 40),
                new THREE.MeshBasicMaterial(new
                {
                    map = THREE.ImageUtils.loadTexture(
                        new _2294472375_24a3b8ef46_o().src
                        //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20130616_222058().src
                        //new WebGLEquirectangularPanorama.HTML.Images.FromAssets.PANO_20121225_210448().src

                        )
                }));
            mesh.scale.x = -1;
            scene.add(mesh);

            var labove = new NotificationLayout();

            #region sprite2 above
            {
                labove.Message.innerText = "VR CREATIVE LEADERSHIP";
                labove.layout.style.background = "";

                new { }.With(
                    async delegate
                    {
                        retry:

                        // make it blink. gaze cursor is on it?


                        labove.box.style.background = "rgba(255,255,0,0.7)";
                        labove.box.setAttribute("invoke", "onmutation1");
                        await Task.Delay(1500);

                        // is mutation observer noticing it?
                        labove.box.style.background = "rgba(255,255,255,0.7)";
                        labove.box.setAttribute("invoke", "onmutation2");
                        await Task.Delay(1500);


                        goto retry;
                    }
                );



                var c = labove.AsCanvas();

                var xcrateTexture = new THREE.Texture(c);

                // like video texture
                Native.window.onframe += delegate { xcrateTexture.needsUpdate = true; };

                var xcrateMaterial = new THREE.SpriteMaterial(
                    new
                    {
                        map = xcrateTexture,
                        useScreenCoordinates = false,
                        //color = 0xff0000
                        color = 0xffffff
                    }
            );



                var xsprite2 = new THREE.Sprite(xcrateMaterial);

                //floor
                //sprite2.position.set(0, -200, 0);

                // left
                xsprite2.position.set(200, 0, 0);

                //sprite2.position.set(0, 0, 200);

                //sprite2.position.set(-100, 0, 0);
                xsprite2.scale.set(
                   c.width * 0.5,
                   c.height * 0.5,
                    //64, 64,
                    1.0); // imageWidth, imageHeight
                scene.add(xsprite2);
            }
            #endregion




            //var lineTo = new List<THREE.Vector3>();
            var others = new
            {
                ui = default(NotificationLayout),
                canvas = default(IHTMLCanvas),

                map = default(THREE.Texture),

                sprite = default(THREE.Sprite)

            }.ToEmptyList();

            #region add
            Action<NotificationLayout> add = ui =>
            {
                ui.layout.style.background = "";

                var canvas = ui.AsCanvas();
                var index = others.Count;

                //ui.Message  += new { index };
                //ui.Message.innerText += new { index };

                //lbelow0.Message = new { THREE.REVISION }.ToString();

                // THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter is set to THREE.LinearFilter or THREE.NearestFilter. ( undefined )

                var map = new THREE.Texture(canvas);

                map.minFilter = THREE.LinearFilter;

                // like video texture

                var xcrateMaterial = new THREE.SpriteMaterial(
                    new
                    {
                        map,
                        useScreenCoordinates = false,
                        //color = 0xff0000
                        color = 0xffffff
                    }
                );



                var sprite = new THREE.Sprite(xcrateMaterial);

                //floor
                //sprite2.position.set(0, -200, 0);

                // left middle
                //sprite2.position.set(200, 0, 0);
                //sprite.position.set(250, -50, 50);
                //lineTo.Add(sprite.position);




                //sprite2.position.set(0, 0, 200);

                //sprite2.position.set(-100, 0, 0);
                sprite.scale.set(
                   canvas.width * 0.5,
                   canvas.height * 0.5,
                    //64, 64,
                    1.0); // imageWidth, imageHeight
                scene.add(sprite);

                others.Add(
                    new
                    {
                        ui,
                        canvas,
                        map,
                        sprite
                    }
                );

                var sw = Stopwatch.StartNew();

                Native.window.onframe += delegate
                {
                    // can we get some of the crazy c++ template bitmapbuffer code from the past?
                    map.needsUpdate = true;

                    var offset = Math.PI * 2 * ((double)(index + 1) / others.Count);

                    sprite.position.x = 300;

                    sprite.position.z = Math.Sin(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
                    sprite.position.y = Math.Cos(sw.ElapsedMilliseconds * 0.00001 + offset) * 120;
                };

            };
            #endregion


            add(
                new NotificationLayout
                {
                    // keep attributes around?
                    // like we do with XElement sync?
                    Icon = new HTML.Images.FromAssets._0_10122014_ECAF4B1F638429B44F4B142C2A4F38EE().With(
                        x =>
                        {
                            x.style.width = "96px";
                            x.style.height = "96px";
                        }
                    ),
                    Message = "Advanced Mechanics by Portugal Design Lab"
                }
              );

            add(
                   new NotificationLayout
                   {
                       // keep attributes around?
                       // like we do with XElement sync?
                       Icon = new HTML.Images.FromAssets._42_08122014_D2639E0AAA3E54E5F4568760AEE605EE().With(
                           x =>
                           {
                               x.style.width = "96px";
                               x.style.height = "96px";
                           }
                       ),
                       Message = "Face Value by mshariful"
                   }
                 );



            add(
                   new NotificationLayout
                   {
                       // keep attributes around?
                       // like we do with XElement sync?
                       Icon = new HTML.Images.FromAssets._371_28122014_2045510F2F7974319A9F7E9F4B39DF07().With(
                           x =>
                           {
                               x.style.width = "96px";
                               x.style.height = "96px";
                           }
                       ),
                       Message = "Mind Wall. by Sumit Goski"
                   }
                 );


            #region lines
            {
                var geometry = new THREE.Geometry
                {
                    // how can we keep streaming verticies data points to gpu?
                    vertices =

                        others.SelectMany(
                            lineTo =>
                                new[]
                                {
                                    new THREE.Vector3(200, 0, 0),
                                    lineTo.sprite.position
                                }
                        ).ToArray()

                    // https://github.com/mrdoob/three.js/wiki/Updates
                    // http://stackoverflow.com/questions/17842521/adding-geometry-to-a-three-js-mesh-after-render
                    //verticesNeedUpdate = true
                };

                Native.window.onframe += delegate { geometry.verticesNeedUpdate = true; };

                var o = new THREE.Line(geometry, new THREE.LineDashedMaterial(
                    new { color = 0x00aaff, dashSize = 1, gapSize = 0.5, linewidth = 1 }
                    ), THREE.LineStrip);

                //objects.Add(o);
                scene.add(o);
            }
            #endregion


            //          // DK2
            //          hResolution: 1920,
            //vResolution: 1080,

            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(1920, 1080);

            #region HMD
            // broken?
            var distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 };
            var chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 };

            var HMD = new OculusRiftEffectOptions
            {
                hResolution = window.Width,
                vResolution = window.Height,

                hScreenSize = 0.12576,
                vScreenSize = 0.07074,
                interpupillaryDistance = 0.0635,
                lensSeparationDistance = 0.0635,
                eyeToScreenDistance = 0.041,

                //  j.distortionK = [0, 1.875, -71.68, 1.595, -3.218644E+26, 1.615, 0, 0];
                //distortionK = new double[] { 1.0, 0.22, 0.24, 0.0 },
                distortionK = distortionK,

                // j.chromaAbParameter = [1.609382E+22, 1.874, -5.189695E+11, -0.939, 4.463059E-29, 1.87675, 0, 0];
                //chromaAbParameter = new double[] { 0.996, -0.004, 1.014, 0.0 }
                chromaAbParameter = chromaAbParameter

            };
            #endregion


            //var effect = new THREE.OculusRiftEffect(
            //    renderer, new
            //    {
            //        worldScale = 100,

            //        //HMD
            //    }
            //    );

            //effect.setSize(1920, 1080);


            renderer.domElement.AttachToDocument();

            //renderer.domElement.style.position = IStyle.PositionEnum.absolute;
            renderer.domElement.style.SetLocation(0, 0);

            Native.document.body.style.overflow = IStyle.OverflowEnum.hidden;

            // x:\jsc.svn\examples\javascript\synergy\comanchebysiorki\comanchebysiorki\application.cs

            new { }.With(
                     async delegate
                     {
                         retry:

                         var s = (double)Native.window.Width / 1920.0;


                         Native.document.body.style.transform = "scale(" + s + ")";
                         Native.document.body.style.transformOrigin = "0% 0%";

                         await Native.window.async.onresize;
                         goto retry;
                     }
                   );

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

            //        renderer.setSize(window.Width, window.Height);
            //        effect.setSize(window.Width, window.Height);
            //    };
            //#endregion


            //Native.document.body.onmousewheel +=
            //    e =>
            //    {
            //        fov -= e.WheelDirection * 5.0;
            //        camera.projectionMatrix.makePerspective(fov,
            //            (double)window.Width / window.Height, 1, 1100);
            //    };

            var lon0 = -45.0;
            var lon1 = 0.0;

            var lon = new sum(
                 () => lon0,
                 () => lon1
             );

            var lat0 = 0.0;
            var lat1 = 0.0;

            // or could we do it with byref or pointers?
            var lat = new sum(
                () => lat0,
                () => lat1
            );

            var phi = 0.0;
            var theta = 0.0;

            //var controls = new THREE.OrbitControls(camera);

            var camera_rotation_z = 0.0;

            //Native.document.onmousemove +=
            //  e =>
            //  {

            //      l.Message = new { e.CursorX, e.CursorY }.ToString();
            //  };


            Native.window.onframe +=
                        ee =>
                        {
                            //labove.Message = new
                            //{
                            //    lon,
                            //    lat,
                            //    ee.counter
                            //}.ToString();

                            //if (Native.document.pointerLockElement == Native.document.body)
                            //    lon += 0.00;
                            //else
                            //    lon += 0.01;

                            //lat = Math.Max(-85, Math.Min(85, lat));

                            //Native.document.title = new { lon, lat }.ToString();


                            phi = THREE.Math.degToRad(90 - lat);
                            theta = THREE.Math.degToRad(lon);

                            target.x = 500 * Math.Sin(phi) * Math.Cos(theta);
                            target.y = 500 * Math.Cos(phi);
                            target.z = 500 * Math.Sin(phi) * Math.Sin(theta);


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


                            camera.lookAt(target);
                            camera.rotation.z += camera_rotation_z;

                            renderer.render(scene, camera);

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



            // http://blog.thematicmapping.org/2013/10/terrain-visualization-with-threejs-and.html

            // http://stackoverflow.com/questions/13278087/determine-vertical-direction-of-a-touchmove



            var compassHeadingOffset = 0.0;
            var compassHeadingInitialized = 0;

            #region compassHeading
            // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeading\TestCompassHeading\Application.cs
            Native.window.ondeviceorientation +=
                          dataValues =>
                          {
                              // Convert degrees to radians
                              var alphaRad = dataValues.alpha * (Math.PI / 180);
                              var betaRad = dataValues.beta * (Math.PI / 180);
                              var gammaRad = dataValues.gamma * (Math.PI / 180);

                              // Calculate equation components
                              var cA = Math.Cos(alphaRad);
                              var sA = Math.Sin(alphaRad);
                              var cB = Math.Cos(betaRad);
                              var sB = Math.Sin(betaRad);
                              var cG = Math.Cos(gammaRad);
                              var sG = Math.Sin(gammaRad);

                              // Calculate A, B, C rotation components
                              var rA = -cA * sG - sA * sB * cG;
                              var rB = -sA * sG + cA * sB * cG;
                              var rC = -cB * cG;

                              // Calculate compass heading
                              var compassHeading = Math.Atan(rA / rB);

                              // Convert from half unit circle to whole unit circle
                              if (rB < 0)
                              {
                                  compassHeading += Math.PI;
                              }
                              else if (rA < 0)
                              {
                                  compassHeading += 2 * Math.PI;
                              }

                              /*
                              Alternative calculation (replacing lines 99-107 above):

                                var compassHeading = Math.atan2(rA, rB);

                                if(rA < 0) {
                                  compassHeading += 2 * Math.PI;
                                }
                              */

                              // Convert radians to degrees
                              compassHeading *= 180 / Math.PI;

                              // Compass heading can only be derived if returned values are 'absolute'

                              // X:\jsc.svn\examples\javascript\android\Test\TestCompassHeadingWithReset\TestCompassHeadingWithReset\Application.cs

                              //Native.document.body.innerText = new { compassHeading }.ToString();
                              if (compassHeadingInitialized > 0)
                              {
                                  lon1 = compassHeading - compassHeadingOffset;
                              }
                              else
                              {
                                  compassHeadingOffset = compassHeading;
                                  compassHeadingInitialized++;
                              }

                          };
            #endregion

            #region gamma
            Native.window.ondeviceorientation +=
                //e => Native.body.innerText = new { e.alpha, e.beta, e.gamma }.ToString();
                //e => lon = e.gamma;
                e =>
                {
                    lat1 = e.gamma;

                    // after servicing a running instance would be nice
                    // either by patching or just re running the whole iteration in the backgrou
                    camera_rotation_z = e.beta * 0.02;
                };
            #endregion



            #region camera rotation
            var old = new { clientX = 0, clientY = 0 };

            Native.document.body.ontouchstart +=
                            e =>
                            {
                                var n = new { e.touches[0].clientX, e.touches[0].clientY };
                                old = n;
                            };

            Native.document.body.ontouchmove +=
                    e =>
                    {
                        var n = new { e.touches[0].clientX, e.touches[0].clientY };

                        e.preventDefault();

                        lon0 += (n.clientX - old.clientX) * 0.2;
                        lat0 -= (n.clientY - old.clientY) * 0.2;

                        old = n;
                    };


            Native.document.body.onmousemove +=
                e =>
                {
                    e.preventDefault();

                    if (Native.document.pointerLockElement == Native.document.body)
                    {
                        lon0 += e.movementX * 0.1;
                        lat0 -= e.movementY * 0.1;

                        //Console.WriteLine(new { lon, lat, e.movementX, e.movementY });
                    }
                };


            Native.document.body.onmouseup +=
              e =>
              {
                  //drag = false;
                  e.preventDefault();
              };

            Native.document.body.onmousedown +=
                e =>
                {
                    //e.CaptureMouse();

                    //drag = true;
                    e.preventDefault();
                    Native.document.body.requestPointerLock();

                };


            Native.document.body.ondblclick +=
                e =>
                {
                    e.preventDefault();

                    Console.WriteLine("requestPointerLock");
                };

            #endregion

            Native.body.onmousewheel +=
                e =>
                {

                    camera_rotation_z += 0.1 * e.WheelDirection; ;

                };
            // https://developer.android.com/training/system-ui/immersive.html




            //var ze = new ZeProperties();

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

            //ze.Add(() => renderer);
            ////ze.Add(() => controls);
            //ze.Add(() => scene);
            //ze.Left = 0;
        }
示例#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\CanvasMarchinAntsExperiment\CanvasMarchinAntsExperiment\Application.cs
            // http://mattdesl.svbtle.com/drawing-lines-is-hard

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


            // http://threejs.org/examples/webgl_lines_dashed.html

            var objects = new List <THREE.Line>();

            var camera = new THREE.PerspectiveCamera(60,
                                                     Native.window.aspect, 1, 200);

            camera.position.z = 150;

            var scene = new THREE.Scene();

            scene.fog = new THREE.Fog(0x111111, 150, 200);

            var root = new THREE.Object3D();

            var subdivisions = 6;
            var recursion    = 1;

            var points = hilbert3D(new THREE.Vector3(), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7);

            Console.WriteLine(
                new { points.Length }
                );

            #region spline
            var spline         = new THREE.Spline(points);
            var geometrySpline = new THREE.Geometry();

            for (var i = 0; i < points.Length * subdivisions; i++)
            {
                var index    = (double)i / (points.Length * subdivisions);
                var position = spline.getPoint(index);

                geometrySpline.vertices[i] = new THREE.Vector3(position.x, position.y, position.z);

                Console.WriteLine(
                    new { i, index, position.x, position.y, position.z }
                    );
            }
            #endregion

            var geometryCube = cube(50);

            geometryCube.computeLineDistances();
            geometrySpline.computeLineDistances();

            {
                var ogeometrySpline = new THREE.Line(geometrySpline, new THREE.LineDashedMaterial(
                                                         new { color = 0xffffff, dashSize = 1, gapSize = 0.5 }
                                                         ), THREE.LineStrip);

                objects.Add(ogeometrySpline);
                scene.add(ogeometrySpline);
                ogeometrySpline.AttachTo(scene);
            }
            {
                var ogeometryCube = new THREE.Line(geometryCube, new THREE.LineDashedMaterial(
                                                       new { color = 0xffaa00, dashSize = 3, gapSize = 1, linewidth = 2 }
                                                       ), THREE.LinePieces);

                objects.Add(ogeometryCube);
                ogeometryCube.AttachTo(scene);
            }

            {
                var geometry = new THREE.Geometry
                {
                    vertices = new[] {
                        new THREE.Vector3(0, 0, 0),
                        new THREE.Vector3(100, 0, 0)
                    }
                };


                var oline = new THREE.Line(geometry, new THREE.LineDashedMaterial(
                                               new { color = 0x00aaff, dashSize = 3, gapSize = 3, linewidth = 20 }
                                               ), THREE.LinePieces);

                objects.Add(oline);
                //scene.add(o);
                oline.AttachTo(scene);
            }

            var renderer = new THREE.WebGLRenderer(new { antialias = true });
            renderer.setClearColor(0x111111);
            //renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize(
                Native.window.Width,
                Native.window.Height
                );


            renderer.domElement.AttachToDocument();


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

            var sw = Stopwatch.StartNew();

            Native.window.onframe +=
                delegate
            {
                //var time = sw.ElapsedMilliseconds * 0.001;

                //for (var i = 0; i < objects.Count; i++)
                //{

                //    var o = objects[i];

                //    //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
                //    o.rotation.x = 0.25 * time;
                //    o.rotation.y = 0.25 * time;

                //}


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

                renderer.render(scene, camera);
            };



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

            //ze.Show();

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

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

            //ze.Left = 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)
		{

			// https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed


			#region ChromeTCPServer
			dynamic self = Native.self;
			dynamic self_chrome = self.chrome;
			object self_chrome_socket = self_chrome.socket;

			if (self_chrome_socket != null)
			{
				#region AtFormCreated
				FormStyler.AtFormCreated =
					 ss =>
				 {
					 ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;

					 // this is working?
					 var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget());
				 };
				#endregion

				chrome.Notification.DefaultTitle = "Heat Zeeker";
				chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src;

				ChromeTCPServer.TheServerWithStyledForm.Invoke(
					AppSource.Text,
					AtFormCreated: FormStyler.AtFormCreated
				);

				return;
			}
			#endregion


			Native.body.style.margin = "0px";
			Native.body.style.overflow = IStyle.OverflowEnum.hidden;

			// jsc, add THREE
			// ... ok.

			// X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs



            // this is not isometric.
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
			var camera = new THREE.OrthographicCamera(
				Native.window.Width / -2, Native.window.Width / 2,
				Native.window.Height / 2, Native.window.Height / -2
				,
				// if we change these values what will change?
				-1000, 1000
				);
			camera.position.x = 200;
			camera.position.y = 100;
			camera.position.z = 200;

			var scene = new THREE.Scene();

			// Grid

			var size = 600;
			var step = 50;


			Func<double> random = new Random().NextDouble;


			// how do I add a new ground box?
			{
				var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2);
				var material = new THREE.MeshLambertMaterial(new
				{
					color = 0xB27D51
					//                                                     , shading = THREE.FlatShading, overdraw = 0.5
				});

				{
					var cube = new THREE.Mesh(geometry, material);


					// why cant we get the shadows??
					cube.receiveShadow = true;


					cube.scale.y = Math.Floor(random() * 2 + 1);

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

					scene.add(cube);

				}
			}


			{
				var geometry = new THREE.Geometry();

				for (var i = -size; i <= size; i += step)
				{

					((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i));
					((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i));

					((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size));
					((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size));

				}

				var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 });

				var line = new THREE.Line(geometry, material, mode: THREE.LinePieces);
				scene.add(line);
			}



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

			#region Cubes
			{

				for (var i = 0; i < 8; i++)
				{
					new HZBunker().Source.Task.ContinueWithResult(
						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 = 2.0;
									cube.scale.y = 2.0;
									cube.scale.z = 2.0;

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

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

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


					new HZWaterTower().Source.Task.ContinueWithResult(
						cube =>
						{
							// https://github.com/mrdoob/three.js/issues/1285
							// https://github.com/mrdoob/three.js/issues/1285
							//cube.children.WithEach(c => c.castShadow = true);
							// http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows


							// http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js
							//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 = 2.0;
							cube.scale.y = 2.0;
							cube.scale.z = 2.0;

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

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

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

					new HZCannon().Source.Task.ContinueWithResult(
						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 = 2.0;
							cube.scale.y = 2.0;
							cube.scale.z = 2.0;



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

							cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
							//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;
							cube.rotation.y = random() * Math.PI * 2;


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



				}
			}
			#endregion

			// we need expression evaluator with intellisense for live debugging sessions
			#region  Lights

			var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
			scene.add(ambientLight);



			// can we get our shadows?
			{
				var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);

				directionalLight.position.x = random() - 0.5;
				directionalLight.position.y = 400;
				directionalLight.position.z = random() - 0.5;
				directionalLight.position.normalize();
				scene.add(directionalLight);
			}

			{
				var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);
				directionalLight.position.x = random() - 0.5;
				directionalLight.position.y = 400;
				directionalLight.position.z = random() - 0.5;
				directionalLight.position.normalize();
				scene.add(directionalLight);
			}
			#endregion


			//var renderer = new THREE.CanvasRenderer();
			var renderer = new THREE.WebGLRenderer();
			renderer.shadowMapEnabled = true;

			// background-color: #B27D51;
			renderer.setClearColor(0xB27D51);
			//renderer.setSize(
			//    Native.window.Width , 
			//    Native.window.Height * 10
			//    );
			renderer.setSize();

			renderer.domElement.AttachToDocument();

			Native.window.onresize +=
				delegate
			{
				camera.left = Native.window.Width / -2;
				camera.right = Native.window.Width / 2;
				camera.top = Native.window.Height / 2;
				camera.bottom = Native.window.Height / -2;

				camera.updateProjectionMatrix();

				renderer.setSize();
			};

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


			//#region Comanche
			//new Comanche().Source.Task.ContinueWithResult(
			//    Comanche =>
			//    {

			//        Comanche.position.y = 200;

			//        //dae.position.z = 280;

			//        Comanche.AttachTo(scene);

			//        //scene.add(dae);
			//        //oo.Add(Comanche);

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

			//        // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
			//        //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
			//        //helper.update();
			//        //// If you want a visible bounding box
			//        //scene.add(helper);

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


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


			//        Comanche.scale.set(0.5, 0.5, 0.5);
			//        //helper.scale.set(0.5, 0.5, 0.5);

			//        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;
			//            //rotation.y = sw.ElapsedMilliseconds * 0.01;

			//            Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001;

			//            //dae.children[0].children[0].children.Last().app
			//        };
			//    }
			//);
			//#endregion


			//#region ee
			//// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs
			//// can we restile the window as the pin window in IDE?
			//var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual };
			//var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee);
			////ee.AutoSize = AutoSizeMode.

			////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height);
			//ee.ClientSize = new System.Drawing.Size(200, 24);

			//ee.Show();

			////ee_camera_y.
			//ee_camera_y.TextChanged += delegate
			//{
			//    camera.position.y = double.Parse(ee_camera_y.Text);
			//};
			//#endregion

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

			// http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js
			//   var effect = new THREE.OculusRiftEffect(
			//renderer, new
			//{
			//    worldScale = 100,

			//           //HMD
			//       }
			//);

			//   effect.setSize(1920, 1080);

			Native.window.onframe +=
				e =>
				{
					// jsc, when can we have the edit and continue already?
					//var timer = s.ElapsedMilliseconds * 0.1;
					//var timer = s.ElapsedMilliseconds * 0.0001;

					//camera.position.x = Math.Cos(timer) * 200;
					//camera.position.z = Math.Sin(timer) * 200;


					// camera.position.z = 200;
					//camera.position.y = 100;
					//camera.position.y = Math.Sin(timer * 0.1) * 200;

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

					renderer.render(scene, camera);
					//effect.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;

			// view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html
			//var mouse2D = new THREE.Vector3(0, 10000, 0.5);

			//renderer.domElement.onclick +=
			//    e =>
			//    {
			//        e.preventDefault();

			//        mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1;
			//        mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1;

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


			//        // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs
			//        var projector = new THREE.Projector();
			//        projector.unprojectVector(vector, camera);

			//        // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast
			//        // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray
			//        // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html
			//        // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera

			//        // use picking ray since it's an orthographic camera
			//        // doesnt fkin work ???
			//        //var raycaster = projector.pickingRay(vector, camera);

			//        var raycaster = projector.pickingRay(mouse2D.clone(), camera);

			//        //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
			//        var intersects = raycaster.intersectObjects(interactiveObjects.ToArray());

			//        // https://github.com/mrdoob/three.js/issues/599
			//        Native.document.title = new { intersects.Length }.ToString();
			//    };
		}
        /// <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:\opensource\github\three.js\examples\canvas_camera_orthographic.html"

            // if i type THREE, would jsc be able to add THREE package on rebuild?
            // Error	136	The type or namespace name 'THREE' could not be found (are you missing a using directive or an assembly reference?)	X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs	35	26	WebGLOrthographicCamera



            // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs

            var camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -500, 1000);
            camera.position.x = 200;
            camera.position.y = 100;
            camera.position.z = 200;

            var scene = new THREE.Scene();

            // Grid

            var size = 500;
            var step = 50;


            Func<double> random = new Random().NextDouble;


            {
                var geometry = new THREE.Geometry();

                for (var i = -size; i <= size; i += step)
                {

                    ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(-size, 0, i));
                    ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(size, 0, i));

                    ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, -size));
                    ((IArray<THREE.Vector3>)(object)geometry.vertices).push(new THREE.Vector3(i, 0, size));

                }

                var material = new THREE.LineBasicMaterial(new { color = 0x000000, opacity = 0.2 });

                var line = new THREE.Line(geometry, material);

                line.type = THREE.LinePieces;
                scene.add(line);
            }

            #region Cubes
            {
                var geometry = new THREE.BoxGeometry(50, 50, 50);
                var material = new THREE.MeshLambertMaterial(new { color = 0xffffff, shading = THREE.FlatShading, overdraw = 0.5 });

                for (var i = 0; i < 100; i++)
                {
                    var cube = new THREE.Mesh(geometry, material);

                    cube.scale.y = Math.Floor(random() * 2 + 1);

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

                    scene.add(cube);

                }
            }
            #endregion


            #region  Lights

            var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
            scene.add(ambientLight);

            {
                var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));

                directionalLight.position.x = random() - 0.5;
                directionalLight.position.y = random() - 0.5;
                directionalLight.position.z = random() - 0.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);
            }

            {
                var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));
                directionalLight.position.x = random() - 0.5;
                directionalLight.position.y = random() - 0.5;
                directionalLight.position.z = random() - 0.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);
            }
            #endregion


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

            renderer.domElement.AttachToDocument();

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


            var s = Stopwatch.StartNew();

            Native.window.onframe +=
                e =>
                {
                    // jsc, when can we have the edit and continue already?
                    //var timer = s.ElapsedMilliseconds * 0.1;
                    var timer = s.ElapsedMilliseconds * 0.0001;

                    camera.position.x = Math.Cos(timer) * 200;
                    camera.position.z = Math.Sin(timer) * 200;
                    camera.lookAt(scene.position);

                    renderer.render(scene, camera);
                };

        }
        /// <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\CanvasMarchinAntsExperiment\CanvasMarchinAntsExperiment\Application.cs
			// http://mattdesl.svbtle.com/drawing-lines-is-hard

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


            // http://threejs.org/examples/webgl_lines_dashed.html

            var objects = new List<THREE.Line>();

            var camera = new THREE.PerspectiveCamera(60,
                Native.window.aspect, 1, 200);
            camera.position.z = 150;

            var scene = new THREE.Scene();

            scene.fog = new THREE.Fog(0x111111, 150, 200);

            var root = new THREE.Object3D();

            var subdivisions = 6;
            var recursion = 1;

            var points = hilbert3D(new THREE.Vector3(), 25.0, recursion, 0, 1, 2, 3, 4, 5, 6, 7);

            Console.WriteLine(
                new { points.Length }
            );

            #region spline
            var spline = new THREE.Spline(points);
            var geometrySpline = new THREE.Geometry();

            for (var i = 0; i < points.Length * subdivisions; i++)
            {

                var index = (double)i / (points.Length * subdivisions);
                var position = spline.getPoint(index);

                geometrySpline.vertices[i] = new THREE.Vector3(position.x, position.y, position.z);

                Console.WriteLine(
           new { i, index, position.x, position.y, position.z }
       );

            }
            #endregion

            var geometryCube = cube(50);

            geometryCube.computeLineDistances();
            geometrySpline.computeLineDistances();

            {
                var ogeometrySpline = new THREE.Line(geometrySpline, new THREE.LineDashedMaterial(
                    new { color = 0xffffff, dashSize = 1, gapSize = 0.5 }
                    ), THREE.LineStrip);

                objects.Add(ogeometrySpline);
                scene.add(ogeometrySpline);
                ogeometrySpline.AttachTo(scene);
            }
            {

                var ogeometryCube = new THREE.Line(geometryCube, new THREE.LineDashedMaterial(
                    new { color = 0xffaa00, dashSize = 3, gapSize = 1, linewidth = 2 }
                    ), THREE.LinePieces);

                objects.Add(ogeometryCube);
                ogeometryCube.AttachTo(scene);
            }

            {
                var geometry = new THREE.Geometry
                {
                    vertices = new[] {
                        new THREE.Vector3(0, 0, 0),
                        new THREE.Vector3(100, 0, 0)
                    }
                };


                var oline = new THREE.Line(geometry, new THREE.LineDashedMaterial(
                    new { color = 0x00aaff, dashSize = 3, gapSize = 3, linewidth = 20 }
                    ), THREE.LinePieces);

                objects.Add(oline);
                //scene.add(o);
                oline.AttachTo(scene);
            }

            var renderer = new THREE.WebGLRenderer(new { antialias = true });
            renderer.setClearColor(0x111111);
            //renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize(
                Native.window.Width,
                Native.window.Height
                );


            renderer.domElement.AttachToDocument();


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

            var sw = Stopwatch.StartNew();

            Native.window.onframe +=
                delegate
                {
                    //var time = sw.ElapsedMilliseconds * 0.001;

                    //for (var i = 0; i < objects.Count; i++)
                    //{

                    //    var o = objects[i];

                    //    //object.rotation.x = 0.25 * time * ( i%2 == 1 ? 1 : -1);
                    //    o.rotation.x = 0.25 * time;
                    //    o.rotation.y = 0.25 * time;

                    //}


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

                    renderer.render(scene, camera);
                };



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

            //ze.Show();

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

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

            //ze.Left = 0;

        }
示例#7
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:\opensource\github\three.js\examples\canvas_camera_orthographic.html"

            // if i type THREE, would jsc be able to add THREE package on rebuild?
            // Error	136	The type or namespace name 'THREE' could not be found (are you missing a using directive or an assembly reference?)	X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs	35	26	WebGLOrthographicCamera



            // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs

            var camera = new THREE.OrthographicCamera(Native.window.Width / -2, Native.window.Width / 2, Native.window.Height / 2, Native.window.Height / -2, -500, 1000);

            camera.position.x = 200;
            camera.position.y = 100;
            camera.position.z = 200;

            var scene = new THREE.Scene();

            // Grid

            var size = 500;
            var step = 50;


            Func <double> random = new Random().NextDouble;


            {
                var geometry = new THREE.Geometry();

                for (var i = -size; i <= size; i += step)
                {
                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i));
                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i));

                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size));
                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size));
                }

                var material = new THREE.LineBasicMaterial(new { color = 0x000000, opacity = 0.2 });

                var line = new THREE.Line(geometry, material);

                line.type = THREE.LinePieces;
                scene.add(line);
            }

            #region Cubes
            {
                var geometry = new THREE.BoxGeometry(50, 50, 50);
                var material = new THREE.MeshLambertMaterial(new { color = 0xffffff, shading = THREE.FlatShading, overdraw = 0.5 });

                for (var i = 0; i < 100; i++)
                {
                    var cube = new THREE.Mesh(geometry, material);

                    cube.scale.y = Math.Floor(random() * 2 + 1);

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

                    scene.add(cube);
                }
            }
            #endregion


            #region  Lights

            var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
            scene.add(ambientLight);

            {
                var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));

                directionalLight.position.x = random() - 0.5;
                directionalLight.position.y = random() - 0.5;
                directionalLight.position.z = random() - 0.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);
            }

            {
                var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff));
                directionalLight.position.x = random() - 0.5;
                directionalLight.position.y = random() - 0.5;
                directionalLight.position.z = random() - 0.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);
            }
            #endregion


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

            renderer.domElement.AttachToDocument();

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


            var s = Stopwatch.StartNew();

            Native.window.onframe +=
                e =>
            {
                // jsc, when can we have the edit and continue already?
                //var timer = s.ElapsedMilliseconds * 0.1;
                var timer = s.ElapsedMilliseconds * 0.0001;

                camera.position.x = Math.Cos(timer) * 200;
                camera.position.z = Math.Sin(timer) * 200;
                camera.lookAt(scene.position);

                renderer.render(scene, camera);
            };
        }
示例#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)
        {
            // https://chrome.google.com/webstore/detail/dglmddjmdpdbijfkoaiadbpmjampfdjh/publish-delayed


            #region ChromeTCPServer
            dynamic self               = Native.self;
            dynamic self_chrome        = self.chrome;
            object  self_chrome_socket = self_chrome.socket;

            if (self_chrome_socket != null)
            {
                #region AtFormCreated
                FormStyler.AtFormCreated =
                    ss =>
                {
                    ss.Context.FormBorderStyle = System.Windows.Forms.FormBorderStyle.None;

                    // this is working?
                    var x = new ChromeTCPServerWithFrameNone.HTML.Pages.AppWindowDrag().AttachTo(ss.Context.GetHTMLTarget());
                };
                #endregion

                chrome.Notification.DefaultTitle   = "Heat Zeeker";
                chrome.Notification.DefaultIconUrl = new HTML.Images.FromAssets.Promotion3D_iso1_tiltshift_128().src;

                ChromeTCPServer.TheServerWithStyledForm.Invoke(
                    AppSource.Text,
                    AtFormCreated: FormStyler.AtFormCreated
                    );

                return;
            }
            #endregion


            Native.body.style.margin   = "0px";
            Native.body.style.overflow = IStyle.OverflowEnum.hidden;

            // jsc, add THREE
            // ... ok.

            // X:\jsc.svn\examples\javascript\WebGL\WebGLOrthographicCamera\WebGLOrthographicCamera\Application.cs



            // this is not isometric.
            // https://sites.google.com/a/jsc-solutions.net/work/knowledge-base/15-dualvr/20151112
            var camera = new THREE.OrthographicCamera(
                Native.window.Width / -2, Native.window.Width / 2,
                Native.window.Height / 2, Native.window.Height / -2
                ,
                // if we change these values what will change?
                -1000, 1000
                );
            camera.position.x = 200;
            camera.position.y = 100;
            camera.position.z = 200;

            var scene = new THREE.Scene();

            // Grid

            var size = 600;
            var step = 50;


            Func <double> random = new Random().NextDouble;


            // how do I add a new ground box?
            {
                var geometry = new THREE.BoxGeometry(size * 2, 2, size * 2);
                var material = new THREE.MeshLambertMaterial(new
                {
                    color = 0xB27D51
                            //                                                     , shading = THREE.FlatShading, overdraw = 0.5
                });

                {
                    var cube = new THREE.Mesh(geometry, material);


                    // why cant we get the shadows??
                    cube.receiveShadow = true;


                    cube.scale.y = Math.Floor(random() * 2 + 1);

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

                    scene.add(cube);
                }
            }


            {
                var geometry = new THREE.Geometry();

                for (var i = -size; i <= size; i += step)
                {
                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(-size, 0, i));
                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(size, 0, i));

                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, -size));
                    ((IArray <THREE.Vector3>)(object) geometry.vertices).push(new THREE.Vector3(i, 0, size));
                }

                var material = new THREE.LineBasicMaterial(new { color = 0, opacity = 0.2 });

                var line = new THREE.Line(geometry, material, mode: THREE.LinePieces);
                scene.add(line);
            }



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

            #region Cubes
            {
                for (var i = 0; i < 8; i++)
                {
                    new HZBunker().Source.Task.ContinueWithResult(
                        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 = 2.0;
                        cube.scale.y = 2.0;
                        cube.scale.z = 2.0;

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

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

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


                    new HZWaterTower().Source.Task.ContinueWithResult(
                        cube =>
                    {
                        // https://github.com/mrdoob/three.js/issues/1285
                        // https://github.com/mrdoob/three.js/issues/1285
                        //cube.children.WithEach(c => c.castShadow = true);
                        // http://stackoverflow.com/questions/15906248/three-js-objloader-obj-model-not-casting-shadows


                        // http://stackoverflow.com/questions/22895120/imported-3d-objects-are-not-casting-shadows-with-three-js
                        //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 = 2.0;
                        cube.scale.y = 2.0;
                        cube.scale.z = 2.0;

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

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

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

                    new HZCannon().Source.Task.ContinueWithResult(
                        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 = 2.0;
                        cube.scale.y = 2.0;
                        cube.scale.z = 2.0;



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

                        cube.position.x = Math.Floor((random() * 1000 - 500) / 50) * 50 + 25;
                        //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;
                        cube.rotation.y = random() * Math.PI * 2;


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

            // we need expression evaluator with intellisense for live debugging sessions
            #region  Lights

            var ambientLight = new THREE.AmbientLight((int)(random() * 0x10));
            scene.add(ambientLight);



            // can we get our shadows?
            {
                var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);

                directionalLight.position.x = random() - 0.5;
                directionalLight.position.y = 400;
                directionalLight.position.z = random() - 0.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);
            }

            {
                var directionalLight = new THREE.DirectionalLight((int)(random() * 0xffffff), 0.5);
                directionalLight.position.x = random() - 0.5;
                directionalLight.position.y = 400;
                directionalLight.position.z = random() - 0.5;
                directionalLight.position.normalize();
                scene.add(directionalLight);
            }
            #endregion


            //var renderer = new THREE.CanvasRenderer();
            var renderer = new THREE.WebGLRenderer();
            renderer.shadowMapEnabled = true;

            // background-color: #B27D51;
            renderer.setClearColor(0xB27D51);
            //renderer.setSize(
            //    Native.window.Width ,
            //    Native.window.Height * 10
            //    );
            renderer.setSize();

            renderer.domElement.AttachToDocument();

            Native.window.onresize +=
                delegate
            {
                camera.left   = Native.window.Width / -2;
                camera.right  = Native.window.Width / 2;
                camera.top    = Native.window.Height / 2;
                camera.bottom = Native.window.Height / -2;

                camera.updateProjectionMatrix();

                renderer.setSize();
            };

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


            //#region Comanche
            //new Comanche().Source.Task.ContinueWithResult(
            //    Comanche =>
            //    {

            //        Comanche.position.y = 200;

            //        //dae.position.z = 280;

            //        Comanche.AttachTo(scene);

            //        //scene.add(dae);
            //        //oo.Add(Comanche);

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

            //        // http://stackoverflow.com/questions/15492857/any-way-to-get-a-bounding-box-from-a-three-js-object3d
            //        //var helper = new THREE.BoundingBoxHelper(dae, 0xff0000);
            //        //helper.update();
            //        //// If you want a visible bounding box
            //        //scene.add(helper);

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


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


            //        Comanche.scale.set(0.5, 0.5, 0.5);
            //        //helper.scale.set(0.5, 0.5, 0.5);

            //        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;
            //            //rotation.y = sw.ElapsedMilliseconds * 0.01;

            //            Comanche.children[0].children[0].children.Last().rotation.y = sw.ElapsedMilliseconds * 0.001;

            //            //dae.children[0].children[0].children.Last().app
            //        };
            //    }
            //);
            //#endregion


            //#region ee
            //// X:\jsc.svn\examples\javascript\forms\NumericTextBox\NumericTextBox\ApplicationControl.cs
            //// can we restile the window as the pin window in IDE?
            //var ee = new Form { Left = 0, StartPosition = FormStartPosition.Manual };
            //var ee_camera_y = new TextBox { Dock = DockStyle.Fill, Text = camera.position.y + "" }.AttachTo(ee);
            ////ee.AutoSize = AutoSizeMode.

            ////ee.ClientSize = new System.Drawing.Size(ee_camera_y.Width, ee_camera_y.Height);
            //ee.ClientSize = new System.Drawing.Size(200, 24);

            //ee.Show();

            ////ee_camera_y.
            //ee_camera_y.TextChanged += delegate
            //{
            //    camera.position.y = double.Parse(ee_camera_y.Text);
            //};
            //#endregion

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

            // http://stackoverflow.com/questions/26497903/nested-webglrendertargets-in-three-js
            //   var effect = new THREE.OculusRiftEffect(
            //renderer, new
            //{
            //    worldScale = 100,

            //           //HMD
            //       }
            //);

            //   effect.setSize(1920, 1080);

            Native.window.onframe +=
                e =>
            {
                // jsc, when can we have the edit and continue already?
                //var timer = s.ElapsedMilliseconds * 0.1;
                //var timer = s.ElapsedMilliseconds * 0.0001;

                //camera.position.x = Math.Cos(timer) * 200;
                //camera.position.z = Math.Sin(timer) * 200;


                // camera.position.z = 200;
                //camera.position.y = 100;
                //camera.position.y = Math.Sin(timer * 0.1) * 200;

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

                renderer.render(scene, camera);
                //effect.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;

            // view-source:http://mrdoob.github.io/three.js/examples/webgl_interactive_voxelpainter.html
            //var mouse2D = new THREE.Vector3(0, 10000, 0.5);

            //renderer.domElement.onclick +=
            //    e =>
            //    {
            //        e.preventDefault();

            //        mouse2D.x = (e.CursorX / (double)Native.window.Width) * 2 - 1;
            //        mouse2D.y = -(e.CursorY / (double)Native.window.Height) * 2 + 1;

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


            //        // X:\jsc.svn\examples\javascript\WebGL\WebGLInteractiveCubes\WebGLInteractiveCubes\Application.cs
            //        var projector = new THREE.Projector();
            //        projector.unprojectVector(vector, camera);

            //        // http://stackoverflow.com/questions/18553209/orthographic-camera-and-selecting-objects-with-raycast
            //        // http://stackoverflow.com/questions/20361776/orthographic-camera-and-pickingray
            //        // view-source:http://stemkoski.github.io/Three.js/Mouse-Click.html
            //        // http://stackoverflow.com/questions/11921033/projector-and-ray-with-orthographiccamera

            //        // use picking ray since it's an orthographic camera
            //        // doesnt fkin work ???
            //        //var raycaster = projector.pickingRay(vector, camera);

            //        var raycaster = projector.pickingRay(mouse2D.clone(), camera);

            //        //var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
            //        var intersects = raycaster.intersectObjects(interactiveObjects.ToArray());

            //        // https://github.com/mrdoob/three.js/issues/599
            //        Native.document.title = new { intersects.Length }.ToString();
            //    };
        }