zhangyupeng
/
Babylon.js


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344
							<!DOCTYPE html>
<html>
<head>
    <title>Babylon.js</title>
    <script>
        function writeViewPort() {
            var ua = navigator.userAgent;
            if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
                var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
                // targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
                if (webkitVersion < 535) {
                    document.write('<meta name="viewport" content="initial-scale=1" />');
                }
            }
        }

        writeViewPort();
    </script>
    <script>
        (function (i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date(); a = s.createElement(o),
            m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-41767310-1', 'babylonjs.com');
        ga('send', 'pageview');

    </script>
    <link href="index.css" rel="stylesheet" />
    <script src="hand.minified-1.2.js"></script>
    <script src="cannon.js"></script>
    <!--<script src="Babylon/Tools/babylon.math.js"></script>
    <script src="Babylon/Tools/babylon.database.js"></script>
    <script src="Babylon/Tools/babylon.tools.js"></script>
    <script src="Babylon/babylon.engine.js"></script>
    <script src="Babylon/babylon.node.js"></script>
    <script src="Babylon/Tools/babylon.filesInput.js"></script>
    <script src="Babylon/Collisions/babylon.pickingInfo.js"></script>
    <script src="Babylon/Culling/babylon.boundingSphere.js"></script>
    <script src="Babylon/Culling/babylon.boundingBox.js"></script>
    <script src="Babylon/Culling/babylon.boundingInfo.js"></script>
    <script src="Babylon/Lights/babylon.light.js"></script>
    <script src="Babylon/Lights/babylon.pointLight.js"></script>
    <script src="Babylon/Lights/babylon.spotLight.js"></script>
    <script src="Babylon/Lights/babylon.hemisphericLight.js"></script>
    <script src="Babylon/Lights/babylon.directionalLight.js"></script>
    <script src="Babylon/Lights/Shadows/babylon.shadowGenerator.js"></script>
    <script src="Babylon/Collisions/babylon.collider.js"></script>
    <script src="Babylon/Cameras/babylon.camera.js"></script>
    <script src="Babylon/Cameras/babylon.freeCamera.js"></script>
    <script src="Babylon/Cameras/babylon.touchCamera.js"></script>
    <script src="Babylon/Cameras/babylon.arcRotateCamera.js"></script>
    <script src="Babylon/Cameras/babylon.deviceOrientationCamera.js"></script>
    <script src="Babylon/Rendering/babylon.renderingManager.js"></script>
    <script src="Babylon/Rendering/babylon.renderingGroup.js"></script>
    <script src="Babylon/babylon.scene.js"></script>
    <script src="Babylon/Mesh/babylon.vertexBuffer.js"></script>
    <script src="Babylon/Mesh/babylon.mesh.js"></script>
    <script src="Babylon/Mesh/babylon.subMesh.js"></script>
    <script src="Babylon/Materials/textures/babylon.baseTexture.js"></script>
    <script src="Babylon/Materials/textures/babylon.texture.js"></script>
    <script src="Babylon/Materials/textures/babylon.cubeTexture.js"></script>
    <script src="Babylon/Materials/textures/babylon.renderTargetTexture.js"></script>
    <script src="Babylon/Materials/textures/babylon.mirrorTexture.js"></script>
    <script src="Babylon/Materials/textures/babylon.dynamicTexture.js"></script>
    <script src="Babylon/Materials/textures/babylon.videoTexture.js"></script>
    <script src="Babylon/Materials/babylon.effect.js"></script>
    <script src="Babylon/Materials/babylon.material.js"></script>
    <script src="Babylon/Materials/babylon.standardMaterial.js"></script>
    <script src="Babylon/Materials/babylon.multiMaterial.js"></script>
    <script src="Babylon/Tools/babylon.sceneLoader.js"></script>
    <script src="Babylon/Tools/babylon.database.js"></script>
    <script src="Babylon/Sprites/babylon.spriteManager.js"></script>
    <script src="Babylon/Sprites/babylon.sprite.js"></script>
    <script src="Babylon/Layer/babylon.layer.js"></script>
    <script src="Babylon/Particles/babylon.particle.js"></script>
    <script src="Babylon/Particles/babylon.particleSystem.js"></script>
    <script src="Babylon/Animations/babylon.animation.js"></script>
    <script src="Babylon/Animations/babylon.animatable.js"></script>
    <script src="Babylon/Culling/Octrees/babylon.octree.js"></script>
    <script src="Babylon/Culling/Octrees/babylon.octreeBlock.js"></script>
    <script src="Babylon/Bones/babylon.bone.js"></script>
    <script src="Babylon/Bones/babylon.skeleton.js"></script>
    <script src="Babylon/Bones/babylon.skeleton.js"></script>
    <script src="Babylon/PostProcess/babylon.postProcess.js"></script>
    <script src="Babylon/PostProcess/babylon.postProcessManager.js"></script>
    <script src="Babylon/PostProcess/babylon.passPostProcess.js"></script>
    <script src="Babylon/PostProcess/babylon.blurPostProcess.js"></script>
    <script src="Babylon/PostProcess/babylon.refractionPostProcess.js"></script>
    <script src="Babylon/PostProcess/babylon.blackAndWhitePostProcess.js"></script>
    <script src="Babylon/PostProcess/babylon.convolutionPostProcess.js"></script>
    <script src="Babylon/PostProcess/babylon.fxaaPostProcess.js"></script>
    <script src="Babylon/LensFlare/babylon.lensFlare.js"></script>
    <script src="Babylon/LensFlare/babylon.lensFlareSystem.js"></script>
    <script src="Babylon/Physics/babylon.physicsEngine.js"></script>-->
    <script src="babylon.js"></script>
    <script src="Scenes/Customs/test.js"></script>
    <script src="Scenes/Customs/lights_test.js"></script>
    <script src="Scenes/Customs/bump_test.js"></script>
    <script src="Scenes/Customs/fog_test.js"></script>
    <script src="Scenes/Customs/multimat.js"></script>
    <script src="Scenes/Customs/heightMap_test.js"></script>
    <script src="Scenes/Customs/shadows.js"></script>
    <script src="Scenes/Customs/charting.js"></script>
    <script src="Scenes/Customs/octree.js"></script>
    <script src="Scenes/Customs/bones.js"></script>
    <script src="Scenes/Customs/postprocessBloom.js"></script>
    <script src="Scenes/Customs/postprocessRefraction.js"></script>
    <script src="Scenes/Customs/lensFlares.js"></script>
    <script src="Scenes/Customs/physics.js"></script>
    <script src="index.js"></script>
</head>
<body>
    <div id="rootDiv">
        <div id="screen1">
            <div id="menuPanel">
                <br />
                <div id="itemsContainer">
                    <div class="header">
                        DEMOS
                    </div>
                    <div id="items"></div>
                    <div class="header">
                        <br />
                        FEATURES TESTS
                    </div>
                    <div id="testItems"></div>
                    <div class="header">
                        <br />
                        THIRD-PARTY
                    </div>
                    <div id="3rdItems"></div>
                </div>
            </div>
            <img id="back" src="Assets/BandeauEmbleme.png" />
            <img id="mainTitle" src="Assets/Logo.png" />

            <div id="gradient"></div>

            <div id="title0">WEBGL.</div>
            <div id="title1">SIMPLE.</div>
            <div id="title2">POWERFUL.</div>

            <div id="downloadText">DOWNLOAD</div>
            <a href="https://github.com/BabylonJS/Babylon.js">
                <img id="downloadLink" src="Assets/BtnDownload.png" class="button" />
            </a>
            <div id="aboutText">ABOUT</div>
            <img id="aboutLink" src="Assets/BtnAbout.png" class="button" />
            <div id="aboutPanel">
                <div id="aboutParagraph">
                    <h1>Credits</h1>
                    <p>
                        <i>3D engine:</i> David <b>CATUHE</b> (<a href="http://www.twitter.com/@deltakosh">@deltakosh</a>)<br />
                        <i>Scenes:</i> Michel <b>ROUSSEAU</b> (<a href="http://www.twitter.com/@rousseau_michel">@rousseau_michel</a>)<br />
                        <i>Game FX:</i> Pierre <b>LAGARDE</b> (<a href="http://www.twitter.com/@pierlag">@pierlag</a>)<br />
                        <i>Game FX:</i> David <b>ROUSSET</b> (<a href="http://www.twitter.com/@davrous">@davrous</a>)<br />
                        <br />
                        <i>Train scene:</i> Romuald <b>ROUHIER</b> and <a href="http://www.progiss.com/">Progiss</a><br />
                    </p>
                </div>
                <div id="aboutParagraph">
                    <h1>About babylon.js</h1>
                    Babylon.js is a 3D engine based on <b>webgl</b> and <b>javascript</b>.
                    It supports the following features:
                </div>
                <div id="features">
                    <div id="engineFeatures">
                        <ul>
                            <li>Complete scene graph with lights, cameras, materials and meshes</li>
                            <li><b>Collisions engine</b></li>
                            <li><b>Physics engine (thanks to cannon.js)</b></li>
                            <li>Scene picking</li>
                            <li>Antialiasing</li>
                            <li><b>Animations engine</b></li>
                            <li><b>Particles Systems</b></li>
                            <li>Sprites and 2D layers</li>
                            <li>
                                Optimizations engines:
                                <ul>
                                    <li>Frustum clipping</li>
                                    <li>Sub-meshes clipping</li>
                                    <li>Hardware scaling</li>
                                    <li>Selection octrees</li>
                                    <li><b>Offline mode (Assets are saved locally to prevent reloading them)</b></li>
                                    <li><b>Incremental loading</b></li>
                                </ul>
                            </li>
                            <li>
                                Standard material is a <b>per pixel</b> material that supports:
                                <ul>
                                    <li>Diffuse lightning and texture</li>
                                    <li>Ambient lightning and texture</li>
                                    <li>Specular lightning</li>
                                    <li>Opacity texture</li>
                                    <li>Reflection texture (Spheric, planar, cubic and projection)</li>
                                    <li><b>Mirror texture</b></li>
                                    <li><b>Emissive texture</b></li>
                                    <li><b>Specular texture</b></li>
                                    <li><b>Bump texture</b></li>
                                    <li>Up to 4 lights (points, directionals, spots, hemispherics)</li>
                                    <li>Custom materials</li>
                                    <li>Skybox</li>
                                    <li>Vertex color</li>
                                    <li>4 bones per vertex</li>
                                </ul>
                            </li>
                            <li>
                                Special FX
                                <ul>
                                    <li>Fog</li>
                                    <li>Alpha blending</li>
                                    <li>Alpha testing</li>
                                    <li>Billboarding</li>
                                    <li>Fullscreen mode</li>
                                    <li>Shadow Maps and Variance Shadow Maps</li>
                                    <li>Rendering layers</li>
                                    <li><b>Post-processes (blur, refraction, black'n'white, fxaa, customs...)</b></li>
                                    <li><b>Lens flares</b></li>
                                    <li><b>Multi-views</b></li>
                                </ul>
                            </li>
                            <li>
                                Textures:
                                <ul>
                                    <li>Render target textures</li>
                                    <li>Dynamic textures (canvas)</li>
                                    <li>Video textures</li>
                                </ul>
                            </li>
                            <li>
                                Cameras:
                                <ul>
                                    <li>Arc rotate camera</li>
                                    <li>Free camera</li>
                                    <li><b>Touch camera</b></li>
                                </ul>
                            </li>
                            <li>
                                Meshes:
                                <ul>
                                    <li>Mesh cloning</li>
                                    <li>Dynamic meshes</li>
                                    <li><b>Height maps</b></li>
                                    <li>Bones</li>
                                </ul>
                            </li>
                            <li>
                                Import:
                                <ul>
                                    <li>Babylon scene file can be converted from <i>.OBJ</i>, <i>.FBX</i>, <i>.MXB</i></li>
                                    <li>Exporter for Blender</li>
                                    <li>Support for drag'n'drop</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="footer">
                <a class="footerLink" href="http://www.babylonjs.com/sandbox">sandbox</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="footerLink" href="http://www.html5gamedevs.com/forum/16-babylonjs/">forum</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="footerLink" href="https://github.com/BabylonJS/Babylon.js/wiki" >wiki</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="footerLink" href="https://github.com/BabylonJS/Babylon.js">github</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="footerLink" href="http://www.sokrate.fr/documentation/babylonjs/index.html">documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;                
            </div>
        </div>
        <div id="opacityMask" class="hidden"></div>
        <div id="renderZone" class="movedRight">
            <canvas id="renderCanvas"></canvas>
            <div id="fps"></div>
            <div id="stats"></div>
            <div id="status"></div>
            <div id="controlPanel">
                <div id="controlsZone">
                    <div id="leftPart">
                        <p>
                            <label><input type="checkbox" id="wireframe" />Wireframe</label>
                        </p>
                        <p>
                            <label><input type="checkbox" id="enableStats" checked="true" />Statistics</label>
                        </p>
                        <p>
                            <label><input type="checkbox" id="collisions" checked="true" />Collisions</label>
                        </p>
                        <p>
                            <label><input type="checkbox" id="postProcess" checked="true" />Post-processes</label>
                        </p>
                        <p>
                            <label><input type="checkbox" id="mirrors" checked="true" />Mirrors</label>
                        </p>
                    </div>
                    <div id="rightPart">
                        <p>
                            Hardware scaling:
                            <select id="hardwareScalingLevel">
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                                <option>4</option>
                            </select>
                        </p>
                        <p id="extensions"></p>
                        <p>
                            <button id="fullscreen">Switch fullscreen mode</button>
                        </p>
                    </div>
                </div>
                <div class="tag">Control panel</div>
                <div class="tag" id="clickableTag"></div>
            </div>
            <div id="cameraPanel">
                <div id="cameraControlsZone">
                    Active camera:<br>
                    <select id="camerasList"></select>
                    <p>
                        Change control method:
                        <button class="buttonControlPanel" id="touchCamera">
                            <img src="Assets/CamTouchOff.png" class="buttonImg"/><div style="margin-top: 8px">Touch camera</div>
                        </button>
                        <button class="buttonControlPanel" id="deviceOrientationCamera">
                            <img src="Assets/CamDeviceOff.png" class="buttonImg" />Device orientation camera
                        </button>
                    </p>
                    <p>
                        Post-processes:
                        <button class="smallButtonControlPanel" id="toggleFxaa">Toggle FXAA (antialiasing)</button>
                        <button class="smallButtonControlPanel" id="toggleFsaa4">Toggle FSAA 4X (antialiasing)</button>
                        <button class="smallButtonControlPanel" id="toggleBandW">Toggle Black and white</button>
                        <button class="smallButtonControlPanel" id="toggleSepia">Toggle Sepia</button>
                    </p>
                </div>
                <div class="cameraTag"><img src="Assets/camera.png" /></div>
                <div class="cameraTag" id="cameraClickableTag"></div>
            </div>
        </div>
        <div id="notSupported" class="hidden">Sorry but your browser does not support WebGL...</div>
        <div id="loadingBack" class="loadingBack"></div>
        <div id="loadingText" class="loadingText"></div>
    </div>
</body>
</html>