<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>One Sphere WebGPU</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <link rel="stylesheet" href="https://use.typekit.net/cta4xsb.css">

    <style>
        html,
        body {
            width: 100%;
            padding: 0;
            margin: 0;
            background-color: #2a2342;
            color: #ffffff;
            font-family: "acumin-pro";
        }

        #renderCanvas {
            width: 1024px;
            height: 768px;
            display: block;
            font-size: 0;
            margin: auto;
            border:none !important;
            outline:none !important;
        }

        .container {
            display: grid;
            grid-template-columns: auto 170px 754px 100px auto;
            grid-template-rows: 60px 768px;
        }

        .headerLogo {
            grid-column-start: 2;
            grid-column-end: 2;
            grid-row-start: 1;
            grid-row-end: 1;
            background-color: #201936;
        }

        .headerLogo > a > img {
            width: auto;
            height: 60px;
            margin-left: 10px;
        }

        .headerText {
            grid-column-start: 3;
            grid-column-end: 3;
            grid-row-start: 1;
            grid-row-end: 1;
            font-size: 35px;
            line-height: 60px;
            text-align: center;
            background-color: #201936;
            font-family: "acumin-pro-extra-condensed";
        }

        .headerFPS {
            grid-column-start: 4;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 1;
            font-size: 15px;
            line-height: 60px;
            text-align: center;
            background-color: #BB464B;
        }

        .content {
            grid-column-start: 2;
            grid-column-end: 4;
            grid-row-start: 2;
            grid-row-end: 2;
        }

        a {
            color: #FFFFFF;
            text-decoration: unset;
        }
        a:hover {
            color: #FFFFFF;
        }
        a:visited {
            color: #FFFFFF;
        }
        a:focus {
            color: #FFFFFF;
        }
    </style>

    <script src="https://code.jquery.com/pep/0.4.2/pep.min.js"></script>

    <script src="babylonWebGpu.max.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
</head>

<body>
    <div class="container">
        <div class="headerLogo">
            <a href="https://doc.babylonjs.com/extensions/WebGPU">
                <img src="logo.svg"></img>
            </a>
        </div>
        <div class="headerText">
            <a href="https://doc.babylonjs.com/extensions/WebGPU">
                WebGPU Experiment
            </a>
        </div>
        <div class="headerFPS" id="fps">0</div>
        <div class="content">
            <canvas id="renderCanvas" width="1024" height="768"></canvas>
        </div>
    <div>

    <script src="oneSphereWebGPUGLSLShaders.js"></script>
    <script src="oneSphereWebGPUWSLShaders.js"></script>

    <script>

    const ShaderKind = {
        vertex: "Vertex",
        fragment: "Fragment",
        compute: "Compute"
    };

    class CompileResult {
        constructor(result) {
            this.result = result;
        }

        GetErrorMessage() {
            return null;
        }

        GetBinary() {
            return this.result;
        }
    }

    class CompileOptions {
        constructor() {
        }
    }

    class Compiler {
        constructor() {
        }

        CompileGlslToSpv(source, kind, something, entryPointName, options) {
            let wslSource;
            switch (source) {
            case vertexShaderGLSL1:
                wslSource = vertexShaderWSL1;
                break;
            case fragmentShaderGLSL1:
                wslSource = fragmentShaderWSL1;
                break;
            case vertexShaderGLSL2:
                wslSource = vertexShaderWSL2;
                break;
            case fragmentShaderGLSL2:
                wslSource = fragmentShaderWSL2;
                break;
            default:
                throw new Error("Unexpected shader!");
            }
            return new CompileResult(wslSource);
        }
    }

    let Shaderc = {Compiler, CompileOptions, shader_kind: ShaderKind};

    (async function() {
        if (!navigator.gpu || GPUBufferUsage.COPY_SRC === undefined) {
            alert("WebGPU is not enabled. Are you using Safari Technology Preview 92 or above?");
            return;
        }
        const canvas = document.getElementById("renderCanvas");
        const divFps = document.getElementById("fps");

        const engine = new BABYLON.WebGPUEngine(canvas, {antialiasing: false});
        await engine.initAsync({shaderc: Shaderc});

        const scene = new BABYLON.Scene(engine);
        scene.environmentTexture = new BABYLON.CubeTexture("https://assets.babylonjs.com/environments/environmentSpecular.env", scene);

        var material = new BABYLON.PBRMetallicRoughnessMaterial("pbr", scene);
        material.roughness = 0;
        material.metallic = 0;

        var ico = BABYLON.Mesh.CreateIcoSphere("ico", {
            flat: true,
            subdivisions: 3
        }, scene);
        ico.material = material;

        scene.createDefaultCamera(true, true, true);
        scene.createDefaultSkybox(scene.environmentTexture, true, undefined, 0.3);

        engine.runRenderLoop(() => {
            scene.render();
            divFps.innerHTML = engine.getFps().toFixed() + " fps";
        });
    })();
    </script>
</body>

</html>