zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Shaders Library</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
        <script src="../Tools/DevLoader/BabylonLoader.js"></script>

        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
                overflow: hidden;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
            }

            #fps {
                position: absolute;
                background-color: black;
                border: 2px solid red;
                text-align: center;
                font-size: 16px;
                color: white;
                top: 15px;
                left: 10px;
                width: 60px;
                height: 20px;
            }
        </style>
    </head>

    <body>
        <div id="fps">0</div>
        <canvas id="renderCanvas"></canvas>

        <script>
            BABYLONDEVTOOLS.Loader.load(function () {
                if (BABYLON.Engine.isSupported()) {
                    var canvas = document.getElementById("renderCanvas");
                    var engine = new BABYLON.Engine(canvas, true);
                    BABYLONDEVTOOLS.Loader.debugShortcut(engine);
                    var divFps = document.getElementById("fps");

                    var scene = new BABYLON.Scene(engine);

                    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 6, 50, BABYLON.Vector3.Zero(), scene);
                    camera.attachControl(true);
                    camera.minZ = 0.1;

                    // Lights
                    var hemisphericLight = new BABYLON.HemisphericLight("hemi", new BABYLON.Vector3(0, 1, 0), scene);

                    // Create meshes
                    var sphere = BABYLON.Mesh.CreateSphere("sphere", 48, 30.0, scene);

                    var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
                    var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
                    skyboxMaterial.backFaceCulling = false;
                    skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("/Playground/textures/TropicalSunnyDay", scene);
                    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
                    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
                    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
                    skyboxMaterial.disableLighting = true;
                    skybox.material = skyboxMaterial;
                    skybox.setEnabled(false);

                    // Materials
                    sphere.material = new BABYLON.StandardMaterial("std", scene);
                    sphere.material.diffuseTexture = new BABYLON.Texture("/Playground/textures/amiga.jpg", scene);
                    sphere.material.diffuseTexture.uScale = 5;
                    sphere.material.diffuseTexture.vScale = 5;

                    // Register a render loop to repeatedly render the scene
                    engine.runRenderLoop(function () {
                        scene.render();
                        divFps.innerHTML = engine.getFps().toFixed() + " fps";
                    });

                    // Resize
                    window.addEventListener("resize", function () {
                        engine.resize();
                    });

                    // Post-processes
                    var aaPostProcess = new BABYLON.AsciiArtPostProcess("AsciiArt", camera);
                    var drPostProcess = new BABYLON.DigitalRainPostProcess("AsciiArt", camera);

                    //camera.detachPostProcess(aaPostProcess);
                    camera.detachPostProcess(drPostProcess);

                    var gui = new dat.GUI();
                    var options = {
                        postProcess: "asciiArt",
                    };

                    gui.add(options, "postProcess", ["asciiArt", "digitalRain"]).onFinishChange(function () {
                        camera.detachPostProcess(aaPostProcess);
                        camera.detachPostProcess(drPostProcess);

                        skybox.setEnabled(false);

                        switch (options.postProcess) {
                            case "asciiArt":
                                camera.attachPostProcess(aaPostProcess);
                                break;
                            case "digitalRain":
                                camera.attachPostProcess(drPostProcess);
                                break;
                        }
                    });
                }
            });
        </script>
    </body>
</html>