const engine = new BABYLON.Engine(elCanvas, true);
const scene = (() => {
    const scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);
    scene.autoClear = true;

    // 
    // gold mat
    //

    const mat0 = new BABYLON.PBRMetallicRoughnessMaterial('mat0', scene);
    mat0.metallic = 1;
    mat0.roughness = 0.2;
    mat0.baseColor = new BABYLON.Color3(0.9, 0.2, 0);

    //
    // torusknot
    //

    const mesh0 = BABYLON.MeshBuilder.CreateTorusKnot('mesh0', {p:1, q:2, radius: 2, radialSegments: 300, tubularSegments: 100 }, scene);
    mesh0.material = mat0;
    mesh0.position = new BABYLON.Vector3(0, 5, -5);
    mesh0.rotation.x = Math.PI / 4;

    // 
    // plate
    // 
    const mesh1 = BABYLON.MeshBuilder.CreateCylinder('mesh1', {
        diameterTop: 6,
        diameterBottom: 2,
        height: 2,
        tessellation: 100,
    }, scene);
    mesh1.material = mat0;
    mesh1.position = new BABYLON.Vector3(0, 1, -5);

    //
    // ground
    //
    const ground = BABYLON.MeshBuilder.CreateGround('ground', { width: 1000, height: 1000 }, scene);
    const mat1 = new BABYLON.PBRMaterial('mat1', scene);
    mat1.reflectionTexture = new BABYLON.MirrorTexture('tex1', 2 ** 10, scene, true);
    mat1.reflectionTexture.mirrorPlane = new BABYLON.Plane(0, -1, 0, 0); 
    // mirrorplane normal is pointing towards "mirror image" 
    //
    //   O       <--mirror faces to human |
    //  /|\                               |--> mirrorplane normal
    //   |\                               |
    //
    mat1.reflectionTexture.level = 0.5;
    mat1.reflectivityColor = new BABYLON.Color3(0.2, 0.2, 0.2);
    mat1.albedoColor = new BABYLON.Color3(0, 0.2, 0.9);
    ground.material = mat1;

    //
    // mirror
    // 
    const plane0 = BABYLON.MeshBuilder.CreatePlane('plane0', { width: 20, height: 20,
    sideOrientation:BABYLON.Mesh.DOUBLESIDE }, scene);
    plane0.rotation.x = Math.PI / 180 * -15;
    let mat2
    {
        // transform normal {
        plane0.computeWorldMatrix(true); // <------- == apply transformation NOW
        const [nx, ny, nz] = plane0.getVerticesData(BABYLON.VertexBuffer.NormalKind); // [24] 8vertices' normal data
        const normal = new BABYLON.Vector3(nx, ny, nz); // (?must be)  v3(0 0 -1)
        const mtx = plane0.getWorldMatrix();
        const newNormal = BABYLON.Vector3.TransformNormal(normal, mtx); // return new normal (length=1)
        // }

        mat2 = new BABYLON.PBRMaterial('mat2', scene);
        mat2.reflectionTexture = new BABYLON.MirrorTexture('tex2', 2**10, scene, true);
        mat2.reflectionTexture.renderList = [mesh0, ground];
        mat2.reflectionTexture.mirrorPlane = BABYLON.Plane.FromPositionAndNormal(plane0.position, newNormal.negate());
        mat2.reflectionTexture.adaptiveBlurKernel = 32; // blur 
        mat2.reflectionTexture.level = 0.9; // intensity of texture
        mat2.reflectivityColor = new BABYLON.Color3(0.9, 0.9, 0.9); // (?)
        mat2.albedoColor = new BABYLON.Color3(0, 0.2, 0.9); // (?)
        plane0.material = mat2;
    }

    //
    // optin meshes for reflectionTexture(s)
    //
    mat1.reflectionTexture.renderList = [plane0, mesh0, mesh1]; // ground mat
    mat2.reflectionTexture.renderList = [mesh0, mesh1, ground]; // mirror mat

    // 
    // lights and shadow
    //
    const light0 = new BABYLON.SpotLight('light0', new BABYLON.Vector3(0, 20, -20),
        BABYLON.Vector3.Zero(),
        Math.PI / 180 * 130, 1, scene);
    light0.direction = BABYLON.Vector3.Normalize(light0.position.negate());
    light0.intensity = 40000;
    light0.diffuse = new BABYLON.Color3(0.3, 0.3, 0.3);

    ground.receiveShadows = true;
    plane0.receiveShadows = true;
    mesh0.receiveShadows = true;
    mesh1.receiveShadows = true;
    const sg = new BABYLON.ShadowGenerator(2 ** 11, light0);
    sg.usePercentageCloserFiltering = true;
    sg.filteringQuality = BABYLON.ShadowGenerator.QUALITY_HIGH;
    sg.addShadowCaster(plane0);
    sg.addShadowCaster(mesh0);
    sg.addShadowCaster(mesh1);

    //
    // camera
    //
    const camera0 = new BABYLON.ArcRotateCamera('camera0', Math.PI / 180 * -135, Math.PI / 180 * 60, 25, new BABYLON.Vector3(0,2,0), scene);
    camera0.attachControl(elCanvas);
    camera0.lowerRadiusLimit = 20;
    camera0.upperRadiusLimit = 40;
    camera0.lowerBetaLimit = Math.PI/ 180 * 60;
    camera0.upperBetaLimit = Math.PI / 180 * 92;
    camera0.lowerAlphaLimit = Math.PI / 180 * -165;
    camera0.upperAlphaLimit = Math.PI / 180 * -15;

    // 
    // animations
    // 
    BABYLON.Animation.CreateAndStartAnimation('anim0', mesh0, 'rotation.y', 5, 30, 0, Math.PI * 2,
        BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

    //scene.debugLayer.show();
    return scene;
})();

engine.runRenderLoop(() => {
    scene.render();
});

addEventListener('resize', () => {
    engine.resize();
});