<canvas id="canvas"></canvas>

<script id="vertexShader" type="x-shader/x-vertex">
  varying vec2 vUv;
  varying vec3 vNormal;
  varying vec3 vPosition;

  void main() {
    vUv = uv;
    vNormal = normal;
    vPosition = position;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  varying vec2 vUv;
  varying vec3 vNormal;
  varying vec3 vPosition;
  uniform float time;
  
  void main() {
    float p = sin(time);
    
    gl_FragColor = vec4(vPosition, 1.0);
  }
</script>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

import * as THREE from "https://esm.sh/three";

const scene = new THREE.Scene();
const camera = new THREE.OrthographicCamera(-0.5, 0.5, 0.5, -0.5, -10, 10);
camera.position.z = 1;

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true,
  canvas: document.querySelector("canvas")
});

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(devicePixelRatio);
window.addEventListener("resize", onWindowResize, false);

const uniforms = {
  time: { value: 1.0 },
  scale: { value: new THREE.Vector2(1, 1) }
};

const geometry = new THREE.PlaneGeometry(1, 1);

const material = new THREE.ShaderMaterial({
  uniforms: uniforms,
  side: THREE.DoubleSide,
  vertexShader: document.getElementById("vertexShader").textContent,
  fragmentShader: document.getElementById("fragmentShader").textContent
});

const plane = new THREE.Mesh(geometry, material);
plane.position.set(0, 0, 0);
scene.add(plane);

const clock = new THREE.Clock();

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  let delta = clock.getDelta();
  uniforms.time.value += delta;
}
animate();

function onWindowResize() {
  renderer.setSize(window.innerWidth, window.innerHeight);
}