<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Normal Map in Babylon.js</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://dl.dropboxusercontent.com/s/r6uhslpxq36s8vu/babylon.js"></script>
    <script src="Scene.js"></script>
    <script src="main.js"></script>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
</body>

</html>
"use strict";

function main()
{
    Scene.Create("renderCanvas");
}
window.onload = main;
html, body {
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#renderCanvas {
    touch-action: none;
    width: 100%;
    height: 100%;
}
"use strict";

// http://www.babylonjs-playground.com/#AVG8L#1

var Scene = (function ()
{
    var _canvas = null;
    var _engine = null;
    var _scene = null;

    var _Create = function (canvasID)
    {
        _canvas = document.getElementById(canvasID);
        _engine = new BABYLON.Engine(_canvas, true);

        document.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);

        BABYLON.SceneLoader.Load("", "https://dl.dropboxusercontent.com/s/or8i2wso3kjpp7n/plane.babylon", _engine,
            function (newScene)
            {
                newScene.executeWhenReady(function ()
                {
                    _scene = newScene;
                    var light = new BABYLON.PointLight("light1", new BABYLON.Vector3(0, 1, 0), _scene);
                    var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, 0, 5, BABYLON.Vector3.Zero(), _scene);
                    camera.minZ = 0.1;
                    camera.wheelPrecision = 100;
                    _scene.activeCamera = camera;
                    camera.attachControl(_canvas, true);
                    //_scene.activeCamera.attachControl(_canvas);
                    var mesh = _scene.meshes[0];
                    var normalTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/0zvyycqh3ehakx7/norm.png", _scene);
                    var material = new BABYLON.StandardMaterial("planeMat", _scene);
                    material.diffuseColor = new BABYLON.Color3(0.596, 0.356, 0.164);
                    material.invertNormalMapX = true;
                    material.invertNormalMapY = true;
                    material.bumpTexture = normalTexture;
                    mesh.material = material;

                    // Skybox
                    var skybox = BABYLON.MeshBuilder.CreateBox("skybox", { size: 1000 }, _scene);
                    skybox.infiniteDistance = true;
                    var skyboxMaterial = new BABYLON.StandardMaterial("skybox", _scene);
                    skyboxMaterial.backFaceCulling = false;
                    var files = [
                        "https://dl.dropboxusercontent.com/s/d6pb1vco30tb1qd/skybox_px.jpg",
                        "https://dl.dropboxusercontent.com/s/j8r319homxctq46/skybox_py.jpg",
                        "https://dl.dropboxusercontent.com/s/owtkos3hjayv819/skybox_pz.jpg",
                        "https://dl.dropboxusercontent.com/s/fn49xqtrz18h6vn/skybox_nx.jpg",
                        "https://dl.dropboxusercontent.com/s/jdtd2cgpe13930o/skybox_ny.jpg",
                        "https://dl.dropboxusercontent.com/s/shin4itwifrypl5/skybox_nz.jpg",
                    ];
                    skyboxMaterial.reflectionTexture = BABYLON.CubeTexture.CreateFromImages(files, _scene);
                    skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
                    skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
                    skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
                    skybox.material = skyboxMaterial;

                    _Animate();
                });
            });
    };

    var _Animate = function ()
    {
        _engine.runRenderLoop(function ()
        {
            _scene.render();
        });

        window.addEventListener("resize", function ()
        {
            _engine.resize();
        });
    };

    var mPublic = {
        Create: _Create
    };
    return mPublic;
}());