html, body { margin: 0; }

import { Random, range } from "https://esm.sh/@byloth/core";

import { Color, Mesh, MeshBasicNodeMaterial, NearestFilter, PlaneGeometry, PerspectiveCamera, Scene, TextureLoader, WebGPURenderer } from "https://esm.sh/three/webgpu";
import { Fn, mix, oscSine, texture, uv, vec2, vec4 } from "https://esm.sh/three/tsl";

import { OrbitControls } from "https://esm.sh/three/addons/controls/OrbitControls.js";

async function main()
{
    const renderer = new WebGPURenderer({ antialias: true });

    renderer.setClearColor(new Color(0x3f5f7f));
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

    const scene = new Scene();
    const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.z = 5;

    const controls = new OrbitControls(camera, renderer.domElement);

    window.addEventListener("resize", () =>
    {
        renderer.setSize(window.innerWidth, window.innerHeight);

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    });

    const STAGE_WIDTH = 5;
    const STAGE_HEIGHT = 5;

    const STAGE_TILES_X = 4;
    const STAGE_TILES_Y = 4;

    const geometry = new PlaneGeometry(STAGE_WIDTH, STAGE_HEIGHT, STAGE_TILES_X, STAGE_TILES_Y);
    const map = await new TextureLoader().loadAsync("https://files.byloth.dev/test-cmbw.png");

    // map.magFilter = NearestFilter;
    // map.minFilter = NearestFilter;

    const material = new MeshBasicNodeMaterial({ precision: "highp", transparent: true });

    material.colorNode = Fn(() =>
    {
        const texColor = texture(map, uv()).toVar();
        const genColor = vec4(uv(), 1, 1).toVar();
      
        return mix(texColor, genColor, oscSine());

    })();

    scene.add(new Mesh(geometry, material));

    renderer.setAnimationLoop(() =>
    {
        controls.update();
        renderer.render(scene, camera);
    });
}

window.addEventListener("DOMContentLoaded", main);