コード例 #1
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\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
            // http://threejs.org/examples/#webgl_postprocessing_dof
            // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"

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


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

            camera.position.z = 200;

            var scene = new THREE.Scene();

            var renderer = new THREE.WebGLRenderer(new { antialias = false });

            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.domElement.AttachToDocument();
            renderer.sortObjects = false;

            //var material_depth = new THREE.MeshDepthMaterial();


            var urls = new[] {
                new px().src, new nx().src,
                new py().src, new ny().src,
                new pz().src, new nz().src,
            };

            var textureCube = THREE.ImageUtils.loadTextureCube(urls);

            //var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading };
            // red vs yellow

            var parameters   = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading };
            var cubeMaterial = new THREE.MeshBasicMaterial(parameters);

            var geo = new THREE.SphereGeometry(1, 20, 10);

            var xgrid = 14;
            var ygrid = 9;
            var zgrid = 14;

            var nobjects = xgrid * ygrid * zgrid;

            var c = 0;

            //var s = 0.25;
            var s = 60;

            for (var i = 0; i < xgrid; i++)
            {
                for (var j = 0; j < ygrid; j++)
                {
                    for (var k = 0; k < zgrid; k++)
                    {
                        var mesh = new THREE.Mesh(geo, cubeMaterial);

                        var x = 200 * (i - xgrid / 2);
                        var y = 200 * (j - ygrid / 2);
                        var z = 200 * (k - zgrid / 2);

                        mesh.position.set(x, y, z);
                        mesh.scale.set(s, s, s);

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

                        scene.add(mesh);
                        //objects.push(mesh);

                        c++;
                    }
                }
            }

            //scene.matrixAutoUpdate = false;

            var renderPass = new THREE.RenderPass(scene, camera);

            // THREE.BokehPass relies on THREE.BokehShader
            var bokehPass = new THREE.BokehPass(scene, camera, new
            {
                focus    = 1.0,
                aperture = 0.025,
                maxblur  = 1.0,

                width  = Native.window.Width,
                height = Native.window.Height
            });

            bokehPass.renderToScreen = true;


            // maskpass
            // THREE.EffectComposer relies on THREE.CopyShader
            var composer = new THREE.EffectComposer(renderer);

            composer.addPass(renderPass);
            composer.addPass(bokehPass);

            renderer.autoClear = false;

            var effectController = new
            {
                focus    = 1.0,
                aperture = 0.025,
                maxblur  = 1.0
            };

            //var matChanger = function() {

            //        postprocessing.bokeh.uniforms["focus"].value = effectController.focus;
            //        postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture;
            //        postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur;

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

            #region onframe
            Native.window.onframe +=
                delegate
            {
                controls.update();

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

                composer.render(0.1);
            };

            #endregion


            new { }.With(
                async delegate
            {
                //while (true)
                do
                {
                    camera.aspect = Native.window.aspect;
                    camera.updateProjectionMatrix();
                    renderer.setSize(Native.window.Width, Native.window.Height);

                    // convert to bool?
                } while (await Native.window.async.onresize);
                //} while (await Native.window.async.onresize != null);
            }
                );
        }
コード例 #2
0
        private static void InitializeContent()
        {
            Action __WoodsXmasByRobert_loaded = null;

            Console.WriteLine(
                new { Native.window.opener, Native.window.parent }
            );


            Native.window.parent.With(
                parent =>
                {
                    parent.postMessage("WoodsXmasByRobert.preparing");
                    Console.WriteLine("WoodsXmasByRobert.preparing");

                    __WoodsXmasByRobert_loaded = delegate
                    {
                        Console.WriteLine("will post WoodsXmasByRobert.loaded");

                        __WoodsXmasByRobert_loaded = null;

                        parent.postMessage("WoodsXmasByRobert.loaded");
                    };
                }
            );


            //<!-- Snow flakes -->

            new IHTMLScript { type = "x-shader/x-vertex", id = "vertexshader", innerText = new Shaders.particlesVertexShader().ToString() }.AttachToDocument();
            new IHTMLScript { type = "x-shader/x-fragment", id = "fragmentshader", innerText = new Shaders.particlesFragmentShader().ToString() }.AttachToDocument();

            var w = Native.window;

            dynamic window = w;



            // http://stackoverflow.com/questions/4923136/why-doesnt-firefox-support-mp3-file-format-in-audio
            //            Timestamp: 12/28/2012 1:22:05 PM
            //Warning: HTTP "Content-Type" of "audio/mpeg3" is not supported. Load of media resource http://192.168.1.100:27248/assets/WoodsXmasByRobert/unfiltered_mix.mp3 failed.
            //Source File: http://192.168.1.100:27248/
            //Line: 0




            #region snd
            var snd = new HTML.Audio.FromAssets.unfiltered_mix { volume = 0.9 };

            window.snd = snd;


            Native.window.onfocus +=
                delegate
                {
                    Console.WriteLine("WoodsXmasByRobert onfocus");
                    snd.volume = 0.9;
                };


            Native.window.onblur +=
                delegate
                {
                    Console.WriteLine("WoodsXmasByRobert onblur");
                    snd.volume = 0.1;

                    // if we are also not visible anymore
                    // and animations frame stop
                    // we should stop all sound
                };

            #endregion




            var canvas = new IHTMLCanvas();

            object webglRenderer_args = new object().With(
                 (dynamic a) =>
                 {
                     a.clearColor = 0x000000;
                     a.clearAlpha = 1.0;
                     a.preserveDrawingBuffer = true;
                     a.canvas = canvas;
                 }
             );

            var webglRenderer = new THREE.WebGLRenderer(
                webglRenderer_args
            );



            webglRenderer.autoClear = false;

            //var canvas = (IHTMLCanvas)webglRenderer.domElement;



            canvas.AttachToDocument();

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

            var camera = new THREE.PerspectiveCamera(75, Native.window.Width / Native.window.Height, 1, 100000);

            camera.position.z = 0;
            camera.position.x = 0;
            camera.position.y = 0;

            window.camera = camera;

            var cameraTarget = new THREE.Vector3();
            cameraTarget.z = -400;
            camera.lookAt(cameraTarget);

            window.cameraTarget = cameraTarget;

            var loadingImage = THREE.ImageUtils.loadTexture(new loading().src);
            var map = THREE.ImageUtils.loadTexture(new snowflake().src);
            var starImage = THREE.ImageUtils.loadTexture(new flare().src);

            window.loadingImage = loadingImage;
            window.map = map;
            window.starImage = starImage;

            #region cursor
            var cursor = new pointer();

            cursor.style.zIndex = 0x1000;
            cursor.Hide();
            cursor.AttachToDocument();

            dynamic style = Native.Document.body.style;
            //http://stackoverflow.com/questions/7849002/how-can-i-set-the-hotspot-to-the-center-of-a-custom-cursor
            // http://stackoverflow.com/questions/5649608/custom-css-cursors
            style.cursor = "url(" + cursor.src + ") 16 16,pointer";
            #endregion




            var mouseXpercent = 0.5;
            var mouseYpercent = 0.5;

            #region onmousemove

            var CursorX = 0;
            var CursorY = 0;

            Native.Document.onmousemove +=
                e =>
                {
                    if (Native.Document.pointerLockElement == Native.Document.body)
                    {
                        cursor.Show();
                        CursorX += e.movementX;
                        CursorY += e.movementY;
                    }
                    else
                    {
                        cursor.Hide();
                        CursorX = e.CursorX;
                        CursorY = e.CursorY;
                    }

                    // keep cursor in view
                    CursorX = CursorX.Max(0).Min(Native.window.Width);
                    CursorY = CursorY.Max(0).Min(Native.window.Height);

                    if (Native.document.pointerLockElement == Native.document.body)
                    {
                        cursor.style.SetLocation(CursorX - 16, CursorY - 16);
                    }

                    var windowHalfX = Native.window.Width >> 1;
                    var windowHalfY = Native.window.Height >> 1;

                    var mouseX = (CursorX - windowHalfX);
                    var mouseY = (CursorY - windowHalfY);

                    mouseXpercent = mouseX / windowHalfX;
                    mouseYpercent = mouseY / windowHalfY;

                    window.mouseXpercent = mouseXpercent;
                    window.mouseYpercent = mouseYpercent;
                };
            #endregion

            Native.Document.onmousedown +=
                e =>
                {
                    if (e.MouseButton == IEvent.MouseButtonEnum.Right)
                        Native.Document.body.requestPointerLock();
                };


            new AppCode().Content.AttachToDocument().onload +=
                delegate
                {
                    // ScriptCoreLib should define this event!
                    snd.addEventListener(
                        "loadeddata",
                        new Action(
                            delegate
                            {
                                new IFunction("window.checkLoadingDone();").apply(Native.window);
                            }
                        )
                    );


                    var scene = (THREE.Scene)(object)window.scene;

                    scene.add(camera);


                    #region Cloud
                    {
                        object args = new object().With(
                            (dynamic a) =>
                            {
                                a.map = THREE.ImageUtils.loadTexture(new cloud().src);
                                a.transparent = true;
                                a.opacity = 0.17;
                                a.fog = false;
                            }
                        );

                        var cloudPlane = new THREE.PlaneGeometry(12500, 1880);
                        var cloud = new THREE.Mesh(cloudPlane, new THREE.MeshBasicMaterial(args));
                        cloud.position.set(300, 5350, -4450);
                        cloud.lookAt(camera.position);
                        scene.add(cloud);
                        window.cloud = cloud;
                    }
                    #endregion

                    #region Sky
                    {
                        object args = new object().With(
                            (dynamic a) =>
                            {
                                a.map = THREE.ImageUtils.loadTexture(new sky().src);
                                a.opacity = 0.57;
                                a.fog = false;
                            }
                        );

                        var skyPlane = new THREE.PlaneGeometry(9000, 6000);
                        var sky = new THREE.Mesh(skyPlane, new THREE.MeshBasicMaterial(args));

                        sky.scale.set(4, 2.5, 2.5);
                        sky.position.set(0, 7500, -6000);
                        sky.lookAt(camera.position);
                        scene.add(sky);
                        window.sky = sky;
                    }
                    #endregion

                    #region moon
                    {
                        dynamic moon_material_args = new object();

                        moon_material_args.map = THREE.ImageUtils.loadTexture(new moon().src);
                        moon_material_args.transparent = true;
                        moon_material_args.opacity = 0.3;
                        moon_material_args.fog = false;
                        moon_material_args.blending = THREE.AdditiveBlending;

                        var moonPlane = new THREE.PlaneGeometry(1000, 1000);
                        var moon = new THREE.Mesh(moonPlane,
                            new THREE.MeshBasicMaterial(
                                (object)moon_material_args
                            )
                        );




                        moon.position.set(300, 4300, -4600);
                        moon.lookAt(camera.position);
                        scene.add(moon);
                        window.moon = moon;
                    }
                    #endregion






                    #region subtitleArray
                    var subtitleArray = (IArray<THREE.Mesh>)(object)window.subtitleArray;

                    var textPlane = new THREE.PlaneGeometry(512, 80);

                    new SubtitlesImages().Images.WithEach(
                        i =>
                        {

                            object args = new object().With(
                              (dynamic a) =>
                              {
                                  a.map = THREE.ImageUtils.loadTexture(i.src);
                                  a.transparent = true;
                                  a.depthTest = false;
                              }
                          );


                            var sub = new THREE.Mesh(textPlane, new THREE.MeshBasicMaterial(args));
                            sub.position.z = -800;
                            sub.position.y = -550;
                            sub.visible = false;
                            camera.add(sub);
                            subtitleArray.push(sub);
                        }
                     );

                    {
                        var endPlane = new THREE.PlaneGeometry(500, 100);

                        object args = new object().With(
                            (dynamic a) =>
                            {
                                a.map = THREE.ImageUtils.loadTexture(new xmas().src);
                                a.transparent = true;
                                a.opacity = 1.0;
                                a.depthTest = false;
                            }
                        );


                        var end = new THREE.Mesh(endPlane, new THREE.MeshBasicMaterial(args));
                        end.position.z = -400;
                        end.position.y = 100;
                        end.visible = false;
                        camera.add(end);
                        subtitleArray.push(end);

                        window.end = end;
                    }


                    new IFunction("window.setupSubtitles();").apply(Native.window);
                    #endregion

                    var particles = (THREE.ParticleSystem)(object)window.particles;
                    var bgSprite = (THREE.Sprite)(object)window.bgSprite;
                    var loadingSprite = (THREE.Sprite)(object)window.loadingSprite;
                    var pointLight = (THREE.PointLight)(object)window.pointLight;
                    var treeArray = (IArray<THREE.Mesh>)(object)window.treeArray;
                    var rockArray = (IArray<THREE.Mesh>)(object)window.rockArray;
                    var flowerArray = (IArray<THREE.Mesh>)(object)window.flowerArray;


                    var groundMesh1 = (THREE.Mesh)(object)window.groundMesh1;
                    var groundMesh2 = (THREE.Mesh)(object)window.groundMesh2;


                    var renderModel = (object)window.renderModel;
                    var effectFilm = (object)window.effectFilm;
                    var effectVignette = (object)window.effectVignette;
                    var effectCopy = (object)window.effectCopy;


                    var composer = new THREE.EffectComposer(webglRenderer);
                    composer.addPass(renderModel);
                    composer.addPass(effectFilm);
                    composer.addPass(effectVignette);
                    composer.addPass(effectCopy);





                    var speedEffector_value = (int)new IFunction("return window.speedEffector.value;").apply(Native.window);

                    #region load
                    Action<string, Action<object>> load =
                        (src, yield) =>
                        {
                            new THREE.JSONLoader().load(
                               src,
                               IFunction.OfDelegate(yield)
                           );
                        };
                    #endregion

                    #region sled
                    load(
                        new WoodsXmasByRobert.Design.models.sleigh().Content.src,
                        geometry =>
                        {
                            Console.WriteLine("got sled!");

                            var sled = new THREE.Mesh(
                                geometry,
                                new THREE.MeshFaceMaterial()
                            );

                            var scale = 4;
                            sled.scale.set(scale, scale, scale);

                            sled.rotation.y = -Math.PI / 2;
                            sled.position.y = -290;
                            sled.position.z = -80;

                            scene.add(sled);

                            window.sled = sled;

                            new IFunction("window.checkLoadingDone();").apply(Native.window);
                        }
                    );
                    #endregion


                    var random = new Random();

                    #region treeDead
                    load(
                        new WoodsXmasByRobert.Design.models.treeDead().Content.src,
                        tree1Geo =>
                        {
                            Console.WriteLine("got treeDead!");

                            load(
                                 new WoodsXmasByRobert.Design.models.treeEvergreenHigh().Content.src,
                                 tree2Geo =>
                                 {
                                     Console.WriteLine("got treeEvergreenHigh!");

                                     var gridSize = 500;

                                     for (var x = 0; x < 8; x++)
                                     {
                                         for (var z = 0; z < 12; z++)
                                         {
                                             var geo = tree2Geo;
                                             if (random.NextDouble() < 0.25)
                                                 if (x != 0 && x != 7)
                                                 {
                                                     geo = tree1Geo;
                                                 }

                                             var mesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial());
                                             var scale = 1.2 + random.NextDouble();
                                             mesh.scale.set(scale, scale * 2, scale);

                                             var posx = 0.0;

                                             if (x < 4)
                                             {
                                                 posx = (x * gridSize) - (gridSize * 4) - 100 + random.NextDouble() * 100 - 50;
                                             }
                                             else
                                             {
                                                 posx = (x * gridSize) - 1400 + random.NextDouble() * 100 - 50;
                                             };

                                             var posz = -(z * gridSize) + random.NextDouble() * 100 - 50;

                                             mesh.position.set(posx, -400 - (random.NextDouble() * 80), posz);

                                             mesh.rotation.set((random.NextDouble() * 0.2) - 0.1, random.NextDouble() * Math.PI, (random.NextDouble() * 0.2) - 0.1);

                                             scene.add(mesh);

                                             treeArray.push(mesh);

                                         }
                                     }

                                     new IFunction("window.checkLoadingDone();").apply(Native.window);
                                 }
                             );
                        }
                    );
                    #endregion


                    #region bird
                    load(
                        new WoodsXmasByRobert.Design.models.eagle().Content.src,
                        geometry =>
                        {
                            Console.WriteLine("got bird!");

                            dynamic args = new object();

                            args.color = 0x000000;
                            args.morphTargets = true;
                            args.fog = false;

                            var bird = new THREE.MorphAnimMesh(
                                geometry,
                                new THREE.MeshBasicMaterial(
                                    (object)args
                                )
                            );

                            bird.duration = 1000;

                            bird.scale.set(4, 4, 4);
                            bird.rotation.y = Math.PI;
                            bird.position.set(0, 3000, -1500);

                            scene.add(bird);


                            window.bird = bird;

                            new IFunction("window.checkLoadingDone();").apply(Native.window);
                        }
                    );
                    #endregion


                    #region rock
                    load(
                        new WoodsXmasByRobert.Design.models.rock().Content.src,
                        geometry =>
                        {
                            Console.WriteLine("got rock!");

                            var numOfRocks = 25;
                            for (var i = 0; i < numOfRocks; ++i)
                            {
                                dynamic args = new object();

                                args.color = 0x444444;

                                var mesh = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial((object)args));

                                var scale = 1 + (random.NextDouble() * 0.5);

                                mesh.scale.set(scale, scale, scale);
                                mesh.rotation.set(0, random.NextDouble() * Math.PI, 0);
                                mesh.position.set((random.NextDouble() * 4000) - 2000, -400, (random.NextDouble() * 6000) - 6000);

                                if (mesh.position.x < 45)
                                    if (mesh.position.x > 0)
                                    {
                                        mesh.position.x += 450;
                                    }

                                if (mesh.position.x > -450)
                                    if (mesh.position.x < 0)
                                    {
                                        mesh.position.x -= 450;
                                    }

                                scene.add(mesh);

                                rockArray.push(mesh);
                            }


                            new IFunction("window.checkLoadingDone();").apply(Native.window);
                        }
                    );
                    #endregion

                    #region horse
                    load(
                        new WoodsXmasByRobert.Design.models.horse().Content.src,
                        geometry =>
                        {
                            Console.WriteLine("got horse!");

                            dynamic horse_material_args = new object();

                            horse_material_args.color = 0x090601;
                            horse_material_args.morphTargets = true;

                            var horse = new THREE.MorphAnimMesh(geometry,
                                new THREE.MeshLambertMaterial(
                                    (object)horse_material_args
                                )
                            );

                            horse.duration = 1000;

                            horse.scale.set(2.5, 1.8, 2);
                            horse.rotation.y = Math.PI;
                            horse.position.set(0, -350, -700);

                            scene.add(horse);
                            window.horse = horse;

                            //checkLoadingDone();

                            // Handles
                            var plane = new THREE.PlaneGeometry(700, 10, 40, 1);

                            var l = Math.Floor(plane.vertices.Length / 2.0);

                            for (var i = 0; i < l; i++)
                            {

                                var offset = Math.Sin(i / 14) * 100;

                                plane.vertices[i].y -= offset;
                                plane.vertices[i + 41].y -= offset;


                                plane.vertices[i].z -= (i / 5) + (offset * -1) / 8;
                                plane.vertices[i + 41].z += (i / 5) - (offset * -1) / 8;

                            }

                            dynamic material_args = new object();

                            material_args.color = 0x090601;
                            material_args.side = THREE.DoubleSide;

                            var material = new THREE.MeshBasicMaterial(
                                (object)material_args
                            );

                            var leftHandle = new THREE.Mesh(plane, material);
                            leftHandle.position.y = -120;
                            leftHandle.position.z = -350;
                            leftHandle.position.x = -30;
                            leftHandle.rotation.y = -(Math.PI / 2) + 0.075;
                            leftHandle.rotation.x = Math.PI * 2 - 0.075;

                            scene.add(leftHandle);
                            window.leftHandle = leftHandle;

                            var rightHandle = new THREE.Mesh(plane, material);
                            rightHandle.position.y = -120;
                            rightHandle.position.z = -350;
                            rightHandle.position.x = 30;
                            rightHandle.rotation.y = -(Math.PI / 2) - 0.075;
                            rightHandle.scale.z = -1;
                            rightHandle.rotation.x = Math.PI * 2 - 0.075;
                            scene.add(rightHandle);
                            window.rightHandle = rightHandle;

                            new IFunction("window.checkLoadingDone();").apply(Native.window);
                        }
                    );
                    #endregion


                    #region flowerLoaded
                    Action<object, bool> flowerLoaded = (geometry, halfScale) =>
                    {

                        var numOfFlowers = 20;

                        var half = Math.Floor(numOfFlowers / 2.0);

                        dynamic args = new object();

                        args.color = 0x444444;


                        for (var i = 0; i < half; ++i)
                        {
                            var mesh = new THREE.Mesh(geometry,
                                new THREE.MeshLambertMaterial(
                                    (object)args
                                )
                            );

                            var scale = 1 + (random.NextDouble() * 1);
                            if (halfScale)
                            {
                                scale *= 0.6;
                            }
                            mesh.scale.set(scale, scale, scale);
                            mesh.rotation.set((random.NextDouble() * 0.6) - 0.3, random.NextDouble() * Math.PI, (random.NextDouble() * 0.6) - 0.3);
                            mesh.position.set((random.NextDouble() * 1000) - 500, -310, (random.NextDouble() * 6000) - 6000);

                            if (mesh.position.x < 100)
                                if (mesh.position.x > 0)
                                {
                                    mesh.position.x += 100;
                                }

                            if (mesh.position.x > -100)
                                if (mesh.position.x < 0)
                                {
                                    mesh.position.x -= 100;
                                }

                            scene.add(mesh);

                            flowerArray.push(mesh);
                        }

                        new IFunction("window.checkLoadingDone();").apply(Native.window);
                    };
                    #endregion


                    #region weeds01
                    load(
                        new WoodsXmasByRobert.Design.models.weeds01().Content.src,
                        geometry =>
                        {
                            Console.WriteLine("got weeds01!");

                            flowerLoaded(geometry, false);
                        }
                    );
                    #endregion

                    #region glowbulb
                    load(
                        new WoodsXmasByRobert.Design.models.glowbulb().Content.src,
                        geometry =>
                        {
                            Console.WriteLine("got glowbulb!");

                            flowerLoaded(geometry, true);
                        }
                    );
                    #endregion


                    #region run
                    Action<double> run =
                        delta =>
                        {
                            // trees
                            var mesh = default(THREE.Mesh);

                            for (var i = 0; i < treeArray.length; ++i)
                            {

                                mesh = treeArray[i];

                                // respawn
                                if (mesh.position.z > camera.position.z + 700)
                                {
                                    mesh.position.z -= 6000;

                                    var scale = 1.2 + random.NextDouble();
                                    mesh.scale.set(scale, scale * 2, scale);
                                }

                            }

                            // rocks
                            for (var i = 0; i < rockArray.length; ++i)
                            {

                                mesh = rockArray[i];

                                // respawn
                                if (mesh.position.z > camera.position.z + 400)
                                {
                                    mesh.position.z -= 6000;
                                }

                            }

                            // flowers
                            for (var i = 0; i < flowerArray.length; ++i)
                            {

                                mesh = flowerArray[i];

                                // respawn
                                if (mesh.position.z > camera.position.z + 400)
                                {
                                    mesh.position.z -= 6000;
                                }

                            }

                            // ground respawn
                            if (groundMesh1.position.z - 10000 > camera.position.z)
                            {
                                groundMesh1.position.z -= 40000;
                            }
                            if (groundMesh2.position.z - 10000 > camera.position.z)
                            {
                                groundMesh2.position.z -= 40000;
                            }
                        };
                    #endregion

                    var oldTime = new IDate().getTime();

                    var r = 0.0;

                    bool disableNextFrame = false;

                    #region loop
                    Action loop = delegate
                    {
                        var allLoaded = (bool)(object)window.allLoaded;

                        var horse = (THREE.MorphAnimMesh)(object)window.horse;
                        var bird = (THREE.MorphAnimMesh)(object)window.bird;

                        var leftHandle = (THREE.Mesh)(object)window.leftHandle;
                        var rightHandle = (THREE.Mesh)(object)window.rightHandle;

                        var moon = (THREE.Mesh)(object)window.moon;
                        var cloud = (THREE.Mesh)(object)window.cloud;
                        var sky = (THREE.Mesh)(object)window.sky;
                        var sled = (THREE.Mesh)(object)window.sled;

                        //new IFunction("this.loop();").apply(Native.Window);

                        var time = new IDate().getTime();
                        var delta = time - oldTime;
                        oldTime = time;

                        if (double.IsNaN(delta))
                        {
                            delta = 1000 / 60;
                        }

                        var maxSpeed = delta / 2;

                        if (allLoaded)
                        {

                            r += delta / 2000;
                            run(delta);

                            var noise = random.NextDouble() * 2;

                            camera.position.x = (50 * Math.Cos(r * 2)) * speedEffector_value;
                            camera.position.y = (2 * Math.Sin(r * 12) - 100) * speedEffector_value;

                            camera.up.x = (Math.Sin(r * 12) / 50) * speedEffector_value;

                            cameraTarget.y += (((camera.position.y + 80) + noise - mouseYpercent * 120) - cameraTarget.y) / 20;
                            cameraTarget.x += (mouseXpercent * 400 - cameraTarget.x) / 20;

                            var speed = (delta / 2) * speedEffector_value;

                            camera.position.z -= speed;
                            cameraTarget.z -= speed;
                            camera.lookAt(cameraTarget);

                            pointLight.position.z -= speed;

                            if (moon != null)
                            {
                                moon.position.z -= speed;
                            }

                            if (cloud != null)
                            {
                                cloud.position.z -= speed;
                            }

                            if (sky != null)
                            {
                                sky.position.z -= speed;
                            }

                            #region sled
                            if (sled != null)
                            {
                                sled.position.z -= speed;
                                sled.position.x = camera.position.x;
                            }
                            #endregion


                            #region bird
                            if (bird != null)
                            {
                                bird.position.x = 200 * Math.Cos(r) + ((bird.position.z - camera.position.z) / 10);
                                bird.position.y = 4000 + (Math.Sin(r) * 300);
                                bird.position.z -= maxSpeed * 1.25;

                                if (bird.position.z < camera.position.z - 10000)
                                {
                                    bird.position.z = camera.position.z - 500;
                                }

                                bird.updateAnimation(delta);
                            }
                            #endregion


                            #region horse
                            if (horse != null)
                            {
                                horse.position.z -= speed;
                                horse.position.x = camera.position.x;

                                horse.updateAnimation(speed * 2);

                                leftHandle.position.z -= speed;
                                leftHandle.position.x = camera.position.x - 37;

                                rightHandle.position.z -= speed;
                                rightHandle.position.x = camera.position.x + 40;

                                leftHandle.scale.y = 1 - Math.Abs(Math.Sin(camera.position.z / 150)) / 4;
                                rightHandle.scale.y = leftHandle.scale.y;
                            }
                            #endregion

                            particles.position.z -= speed;

                            new IFunction("e", "window.uniforms.globalTime.value += e;").apply(Native.window, delta * 0.00015);
                            new IFunction("e", "window.uniforms.speed.value = e;").apply(Native.window, speed / maxSpeed);

                            new IFunction("window.runSubtitles();").apply(Native.window);


                            //disableNextFrame = true;

                            if (__WoodsXmasByRobert_loaded != null)
                                __WoodsXmasByRobert_loaded();
                        }
                        else
                        {
                            if (loadingSprite != null)
                            {
                                loadingSprite.position.set(Native.window.Width >> 1, Native.window.Height >> 1, 0);
                                loadingSprite.rotation -= 0.08;
                            }
                        }

                        if (bgSprite != null)
                        {
                            bgSprite.position.set(Native.window.Width >> 1, Native.window.Height >> 1, 0);
                        }


                        new IFunction("window.TWEEN.update();").apply(Native.window);

                        //if (has_gl)
                        {
                            webglRenderer.clear();
                            composer.render(0.01);
                        }
                    };
                    #endregion


                    #region animate
                    Native.window.onframe += delegate
                    {
                        if (disableNextFrame)
                            return;

                        loop();
                    };

                    #endregion




                    Action AtResize = delegate
                    {

                        // notify the renderer of the size change
                        webglRenderer.setSize(Native.window.Width, Native.window.Height);

                        // update the camera
                        camera.aspect = Native.window.Width / Native.window.Height;
                        camera.updateProjectionMatrix();
                    };


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

                    AtResize();


                };



            Native.Document.body.ondblclick +=
                delegate
                {
                    Native.Document.body.requestFullscreen();
                };


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

                         Native.Document.body.requestFullscreen();
                         Native.Document.body.requestPointerLock();
                     }
                 };

            Native.Document.oncontextmenu +=
                e =>
                {
                    e.preventDefault();
                };


        }
コード例 #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)
        {
            // view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
            // http://threejs.org/examples/#webgl_materials_cubemap_dynamic

            // X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
            // http://threejs.org/examples/#webgl_postprocessing_dof
            // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"

            { WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }

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

            var clock = new THREE.Clock();

            var radius    = 100;
            var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);

            skyCamera.position.set(0.0, radius * 3, radius * 3.5);

            var camera = new THREE.PerspectiveCamera(80, Native.window.aspect, 1, 5000);

            camera.position.z = 200;

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



            //scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);

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

            var lightOffset = new THREE.Vector3(0, 1000, 1000.0);

            var light = new THREE.DirectionalLight(0xffffff, 1.0);

            //var light = new THREE.DirectionalLight(0xffffff, 2.5);
            //var light = new THREE.DirectionalLight(0xffffff, 1.5);
            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);


            var renderer = new THREE.WebGLRenderer(new { antialias = false });

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

            //var material_depth = new THREE.MeshDepthMaterial();



            #region create field

            // THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
            var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
            var plane         = new THREE.Mesh(planeGeometry,
                                               new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })

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


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

                scene.add(parent);
            }

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

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


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

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

                                        );
                ii.position.x = i % 4 * 500 - 2.5f;

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


                meshArray.Add(ii);

                scene.add(ii);

                var _i = i;

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

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

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


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

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

                    blendMesh.showSkeleton(!xtrue);

                    scene.add(blendMesh);


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



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


            // maskpass
            // THREE.EffectComposer relies on THREE.CopyShader
            var composer = new THREE.EffectComposer(renderer);

            var renderPass = new THREE.RenderPass(scene, camera);
            composer.addPass(renderPass);

            // THREE.BokehPass relies on THREE.BokehShader
            var bokehPass = new THREE.BokehPass(scene, camera, new
            {
                focus    = 1.0,
                aperture = 0.025,
                maxblur  = 1.0,

                width  = Native.window.Width,
                height = Native.window.Height
            });

            bokehPass.renderToScreen = true;
            composer.addPass(bokehPass);

            renderer.autoClear = false;

            var controls = new THREE.OrbitControls(camera);


            Native.document.onclick +=
                delegate
            {
                // THREE.AnimationHandler.add() has been deprecated.

                // how to make it work with bokah?
                //THREE.AnimationHandler.update(1);
            };



            #region onframe
            Native.window.onframe +=
                delegate
            {
                controls.update();


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

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

                    //THREE.AnimationHandler.update(stepSize);
                }


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


                skyCamera.rotation.copy(camera.rotation);

                composer.render(0.1);
            };

            #endregion


            new { }.With(
                async delegate
            {
                //while (true)
                do
                {
                    camera.aspect = Native.window.aspect;
                    camera.updateProjectionMatrix();
                    renderer.setSize(Native.window.Width, Native.window.Height);

                    // convert to bool?
                } while (await Native.window.async.onresize);
                //} while (await Native.window.async.onresize != null);
            }
                );
        }
コード例 #4
0
		/// <summary>
		/// This is a javascript application.
		/// </summary>
		/// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
		public Application(IApp page)
		{
			// view-source:http://alteredqualia.com/three/examples/webgl_postprocessing_ssao.html
			// http://threejs.org/examples/#webgl_materials_cubemap_dynamic

			// X:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
			// http://threejs.org/examples/#webgl_postprocessing_dof
			// "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"

			{ WebGLHZBlendCharacter.HTML.Pages.TexturesImages ref0; }

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

			var clock = new THREE.Clock();

			var radius = 100;
			var skyCamera = new THREE.PerspectiveCamera(45, Native.window.aspect, 1, 20000);
			skyCamera.position.set(0.0, radius * 3, radius * 3.5);

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

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



			//scene.fog = new THREE.Fog(0xA26D41, 1000, 20000);

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

			var lightOffset = new THREE.Vector3(0, 1000, 1000.0);

			var light = new THREE.DirectionalLight(0xffffff, 1.0);
			//var light = new THREE.DirectionalLight(0xffffff, 2.5);
			//var light = new THREE.DirectionalLight(0xffffff, 1.5);
			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);


			var renderer = new THREE.WebGLRenderer(new { antialias = false });
			renderer.setSize(Native.window.Width, Native.window.Height);
			renderer.domElement.AttachToDocument();
			renderer.sortObjects = false;
			renderer.autoClear = false;
			renderer.shadowMapEnabled = true;
			renderer.shadowMapType = THREE.PCFSoftShadowMap;

			//var material_depth = new THREE.MeshDepthMaterial();





			#region create field

			// THREE.PlaneGeometry: Consider using THREE.PlaneBufferGeometry for lower memory footprint.
			var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
			var plane = new THREE.Mesh(planeGeometry,
					new THREE.MeshPhongMaterial(new { ambient = 0x101010, color = 0xA26D41, specular = 0xA26D41, shininess = 1 })

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


			{

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

				scene.add(parent);
			}

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

			for (var i = 1; i < 5; i++)
			{

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


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

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

					);
				ii.position.x = i % 4 * 500 - 2.5f;

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


				meshArray.Add(ii);

				scene.add(ii);

				var _i = i;

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

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

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


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

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

							blendMesh.showSkeleton(!xtrue);

							scene.add(blendMesh);


							Native.window.onframe +=
							 delegate
							 {

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



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

							 };

						}
					)
				);

			}
			#endregion


			// maskpass
			// THREE.EffectComposer relies on THREE.CopyShader
			var composer = new THREE.EffectComposer(renderer);

			var renderPass = new THREE.RenderPass(scene, camera);
			composer.addPass(renderPass);

			// THREE.BokehPass relies on THREE.BokehShader
			var bokehPass = new THREE.BokehPass(scene, camera, new
			{
				focus = 1.0,
				aperture = 0.025,
				maxblur = 1.0,

				width = Native.window.Width,
				height = Native.window.Height
			});

			bokehPass.renderToScreen = true;
			composer.addPass(bokehPass);

			renderer.autoClear = false;

			var controls = new THREE.OrbitControls(camera);


			Native.document.onclick +=
				delegate
				{
					// THREE.AnimationHandler.add() has been deprecated.

					// how to make it work with bokah?
					//THREE.AnimationHandler.update(1);

				};



			#region onframe
			Native.window.onframe +=
				delegate
				{
					controls.update();


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

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

						//THREE.AnimationHandler.update(stepSize);
					}


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


					skyCamera.rotation.copy(camera.rotation);

					composer.render(0.1);

				};

			#endregion


			new { }.With(
				  async delegate
				  {
					  //while (true)
					  do
					  {
						  camera.aspect = Native.window.aspect;
						  camera.updateProjectionMatrix();
						  renderer.setSize(Native.window.Width, Native.window.Height);

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

				  }
			  );

		}
コード例 #5
0
        /* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/
         */


        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IDefault page = null)
        {
            var SCREEN_WIDTH  = Native.window.Width;
            var SCREEN_HEIGHT = Native.window.Height;

            //var ,stats;


            //var mesh, zmesh, geometry;

            var mouseX = 0;
            var mouseY = 0;

            var windowHalfX = SCREEN_WIDTH / 2;
            var windowHalfY = SCREEN_HEIGHT / 2;
            var lastUpdate  = new IDate().getTime();



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

            container.AttachToDocument();
            container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);

            var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000);

            camera.position.z = 50;
            camera.updateMatrix();

            var scene = new THREE.Scene();

            // LIGHTS

            var ambient = new THREE.AmbientLight(0x222222);

            ambient.position.z = -300;
            scene.add(ambient);

            var directionalLight = new THREE.DirectionalLight(0xffeedd);

            directionalLight.position.set(-1, 0, 1);
            directionalLight.position.normalize();
            scene.add(directionalLight);

            var dLight = new THREE.DirectionalLight(0xffeedd);

            dLight.position.set(1, 0, 1);
            dLight.position.normalize();
            scene.add(dLight);

            // init the WebGL renderer and append it to the Dom
            var renderer = new THREE.WebGLRenderer();

            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            renderer.autoClear = false;

            renderer.domElement.AttachTo(container);

            #region createScene
            Action <object, f, f, f, f> createScene = (geometry, x, y, z, b) =>
            {
                //var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
                var zmesh = new THREE.Mesh(geometry);
                zmesh.position.x = x;
                zmesh.position.z = y;
                zmesh.position.y = z;
                zmesh.scale.x    = 5f;
                zmesh.scale.y    = 5f;
                zmesh.scale.z    = 5f;
                //zmesh.overdraw = true;
                zmesh.updateMatrix();
                scene.add(zmesh);
            };
            #endregion

            // message: "Unexpected token /"
            var loader = new THREE.JSONLoader();

            Action <object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); };

            loader.load(
                url: new invade().Content.src,
                callback: IFunction.OfDelegate(callbackMale)
                );

            // postprocessing



            var composer = new THREE.EffectComposer(renderer);

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


            var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false );
            effectFilm.renderToScreen = true;
            composer.addPass(effectFilm);

            #region IsDisposed
            var IsDisposed = false;

            Dispose = delegate
            {
                if (IsDisposed)
                {
                    return;
                }

                IsDisposed = true;

                renderer.domElement.Orphanize();
            };
            #endregion


            #region getFrametime
            Func <long> getFrametime = () =>
            {
                var now   = new IDate().getTime();
                var tdiff = (now - lastUpdate) / 1000;
                lastUpdate = now;
                return(tdiff);
            };
            #endregion

            #region render
            Action render = delegate
            {
                var delta = getFrametime();
                camera.position.x += (mouseX - camera.position.x) * .05f;
                camera.position.y += (-mouseY - camera.position.y) * .05f;
                camera.updateMatrix();

                //renderer.render( scene, camera );
                renderer.clear();
                composer.render(delta);
            };
            #endregion

            #region onmousemove
            Native.document.onmousemove +=
                e =>
            {
                mouseX = (e.CursorX - windowHalfX);
                mouseY = (e.CursorY - windowHalfY);
            };
            #endregion

            Native.window.onframe +=
                delegate
            {
                if (IsDisposed)
                {
                    return;
                }

                render();
            };


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

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

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

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

            AtResize();
            #endregion

            #region requestFullscreen
            Native.document.body.ondblclick +=
                delegate
            {
                if (IsDisposed)
                {
                    return;
                }

                // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/

                Native.document.body.requestFullscreen();
            };
            #endregion
        }
コード例 #6
0
        /* Source: http://www.webspaceinvader.com/2011/09/21/first-try-at-webgl/
         */


        /// <summary>
        /// This is a javascript application.
        /// </summary>
        /// <param name="page">HTML document rendered by the web server which can now be enhanced.</param>
        public Application(IDefault page = null)
        {
            var SCREEN_WIDTH = Native.window.Width;
            var SCREEN_HEIGHT = Native.window.Height;

            //var ,stats;


            //var mesh, zmesh, geometry;

            var mouseX = 0;
            var mouseY = 0;

            var windowHalfX = SCREEN_WIDTH / 2;
            var windowHalfY = SCREEN_HEIGHT / 2;
            var lastUpdate = new IDate().getTime();




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

            container.AttachToDocument();
            container.style.SetLocation(0, 0, Native.window.Width, Native.window.Height);

            var camera = new THREE.PerspectiveCamera(75, Native.window.aspect, 1, 100000);
            camera.position.z = 50;
            camera.updateMatrix();

            var scene = new THREE.Scene();

            // LIGHTS

            var ambient = new THREE.AmbientLight(0x222222);
            ambient.position.z = -300;
            scene.add(ambient);

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

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

            // init the WebGL renderer and append it to the Dom
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
            renderer.autoClear = false;

            renderer.domElement.AttachTo(container);

            #region createScene
            Action<object, f, f, f, f> createScene = (geometry, x, y, z, b) =>
            {
                
                //var zmesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());
                var zmesh = new THREE.Mesh(geometry);
                zmesh.position.x = x;
                zmesh.position.z = y;
                zmesh.position.y = z;
                zmesh.scale.x = 5f;
                zmesh.scale.y = 5f;
                zmesh.scale.z = 5f;
                //zmesh.overdraw = true;
                zmesh.updateMatrix();
                scene.add(zmesh);
            };
            #endregion

            // message: "Unexpected token /"
            var loader = new THREE.JSONLoader();

            Action<object> callbackMale = (geometry) => { createScene(geometry, 90, 50, 0, 105); };

            loader.load(
                    url: new invade().Content.src,
                    callback: IFunction.OfDelegate(callbackMale)
            );

            // postprocessing



            var composer = new THREE.EffectComposer(renderer);

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


            var effectFilm = new THREE.FilmPass(0.35, 0.50, 2048, false); //( 0.35, 0.75, 2048, false );
            effectFilm.renderToScreen = true;
            composer.addPass(effectFilm);

            #region IsDisposed
            var IsDisposed = false;

            Dispose = delegate
            {
                if (IsDisposed)
                    return;

                IsDisposed = true;

                renderer.domElement.Orphanize();
            };
            #endregion


            #region getFrametime
            Func<long> getFrametime = () =>
            {

                var now = new IDate().getTime();
                var tdiff = (now - lastUpdate) / 1000;
                lastUpdate = now;
                return tdiff;
            };
            #endregion

            #region render
            Action render = delegate
            {
                var delta = getFrametime();
                camera.position.x += (mouseX - camera.position.x) * .05f;
                camera.position.y += (-mouseY - camera.position.y) * .05f;
                camera.updateMatrix();

                //renderer.render( scene, camera );
                renderer.clear();
                composer.render(delta);
            };
            #endregion

            #region onmousemove
            Native.document.onmousemove +=
                e =>
                {
                    mouseX = (e.CursorX - windowHalfX);
                    mouseY = (e.CursorY - windowHalfY);
                };
            #endregion

            Native.window.onframe +=
            delegate
            {
                if (IsDisposed)
                    return;

                render();

            };


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

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

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

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

            AtResize();
            #endregion

            #region requestFullscreen
            Native.document.body.ondblclick +=
                delegate
                {
                    if (IsDisposed)
                        return;

                    // http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/

                    Native.document.body.requestFullscreen();


                };
            #endregion

        }
コード例 #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:\jsc.svn\examples\javascript\WebGL\WebGLDepthOfField\WebGLDepthOfField\Application.cs
            // http://threejs.org/examples/#webgl_postprocessing_dof
            // "X:\opensource\github\three.js\examples\webgl_postprocessing_dof.html"

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


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

            var scene = new THREE.Scene();

            var renderer = new THREE.WebGLRenderer(new { antialias = false });
            renderer.setSize(Native.window.Width, Native.window.Height);
            renderer.domElement.AttachToDocument();
            renderer.sortObjects = false;

            //var material_depth = new THREE.MeshDepthMaterial();


            var urls = new[] {
                            new px().src, new nx().src,
                            new py().src, new ny().src,
                            new pz().src, new nz().src,
                         };

            var textureCube = THREE.ImageUtils.loadTextureCube(urls);

            //var parameters = new { color = 0xff1100, envMap = textureCube, shading = THREE.FlatShading };
            // red vs yellow

            var parameters = new { color = 0xffff00, envMap = textureCube, shading = THREE.FlatShading };
            var cubeMaterial = new THREE.MeshBasicMaterial(parameters);

            var geo = new THREE.SphereGeometry(1, 20, 10);

            var xgrid = 14;
            var ygrid = 9;
            var zgrid = 14;

            var nobjects = xgrid * ygrid * zgrid;

            var c = 0;

            //var s = 0.25;
            var s = 60;

            for (var i = 0; i < xgrid; i++)
                for (var j = 0; j < ygrid; j++)
                    for (var k = 0; k < zgrid; k++)
                    {
                        var mesh = new THREE.Mesh(geo, cubeMaterial);

                        var x = 200 * (i - xgrid / 2);
                        var y = 200 * (j - ygrid / 2);
                        var z = 200 * (k - zgrid / 2);

                        mesh.position.set(x, y, z);
                        mesh.scale.set(s, s, s);

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

                        scene.add(mesh);
                        //objects.push(mesh);

                        c++;

                    }

            //scene.matrixAutoUpdate = false;

            var renderPass = new THREE.RenderPass(scene, camera);

            // THREE.BokehPass relies on THREE.BokehShader
            var bokehPass = new THREE.BokehPass(scene, camera, new
            {
                focus = 1.0,
                aperture = 0.025,
                maxblur = 1.0,

                width = Native.window.Width,
                height = Native.window.Height
            });

            bokehPass.renderToScreen = true;


            // maskpass
            // THREE.EffectComposer relies on THREE.CopyShader
            var composer = new THREE.EffectComposer(renderer);

            composer.addPass(renderPass);
            composer.addPass(bokehPass);

            renderer.autoClear = false;

            var effectController = new
            {
                focus = 1.0,
                aperture = 0.025,
                maxblur = 1.0
            };

            //var matChanger = function() {

            //        postprocessing.bokeh.uniforms["focus"].value = effectController.focus;
            //        postprocessing.bokeh.uniforms["aperture"].value = effectController.aperture;
            //        postprocessing.bokeh.uniforms["maxblur"].value = effectController.maxblur;

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

            #region onframe
            Native.window.onframe +=
                delegate
                {
                    controls.update();

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

                    composer.render(0.1);

                };

            #endregion


            new { }.With(
                  async delegate
                  {
                      //while (true)
                      do
                      {
                          camera.aspect = Native.window.aspect;
                          camera.updateProjectionMatrix();
                          renderer.setSize(Native.window.Width, Native.window.Height);

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

                  }
              );


        }