WebGL, Three.js và GLSL shader: từ cơ bản đến nâng cao

<canvas id="gl-canvas" width="320" height="180"></canvas>
<script>
  const canvas = document.getElementById("gl-canvas");
  const gl = canvas.getContext("webgl2") || canvas.getContext("webgl");

  // Vertex shader: đưa mỗi đỉnh thẳng ra tọa độ clip-space [-1, 1].
  const vertexSrc = `
    attribute vec2 position;
    void main() {
      gl_Position = vec4(position, 0.0, 1.0);
    }`;

  // Fragment shader: mỗi pixel một màu, đổi theo uTime.
  const fragmentSrc = `
    precision mediump float;
    uniform float uTime;
    uniform vec2 uResolution;
    void main() {
      vec2 uv = gl_FragCoord.xy / uResolution;
      vec3 color = 0.5 + 0.5 * cos(uTime + uv.xyx + vec3(0.0, 2.0, 4.0));
      gl_FragColor = vec4(color, 1.0);
    }`;

  function compile(type, src) {
    const shader = gl.createShader(type);
    gl.shaderSource(shader, src);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      throw new Error(gl.getShaderInfoLog(shader));
    }
    return shader;
  }

  const program = gl.createProgram();
  gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSrc));
  gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSrc));
  gl.linkProgram(program);
  gl.useProgram(program);

  // Hai tam giác tạo thành một hình chữ nhật phủ kín canvas.
  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
    -1, -1, 1, -1, -1, 1,
    -1, 1, 1, -1, 1, 1,
  ]), gl.STATIC_DRAW);

  const loc = gl.getAttribLocation(program, "position");
  gl.enableVertexAttribArray(loc);
  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);

  gl.uniform2f(gl.getUniformLocation(program, "uResolution"), canvas.width, canvas.height);
  const uTime = gl.getUniformLocation(program, "uTime");

  function render(t) {
    gl.uniform1f(uTime, t * 0.001);
    gl.drawArrays(gl.TRIANGLES, 0, 6);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
</script>

<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";
  document.body.textContent = "Three.js r" + THREE.REVISION + " đã sẵn sàng";
</script>

<canvas id="scene-basic" width="320" height="220"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("scene-basic");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(320, 220, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 320 / 220, 0.1, 100);
  camera.position.z = 3;

  const geometry = new THREE.IcosahedronGeometry(1, 0);
  const material = new THREE.MeshStandardMaterial({ color: 0x4aa8ff, flatShading: true });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  scene.add(new THREE.AmbientLight(0xffffff, 0.4));
  const key = new THREE.DirectionalLight(0xffffff, 2.5);
  key.position.set(2, 3, 4);
  scene.add(key);

  renderer.setAnimationLoop((t) => {
    mesh.rotation.x = t * 0.0004;
    mesh.rotation.y = t * 0.0008;
    renderer.render(scene, camera);
  });
</script>

<canvas id="scene-tri" width="320" height="220"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("scene-tri");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(320, 220, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 320 / 220, 0.1, 100);
  camera.position.z = 3;

  const geometry = new THREE.BufferGeometry();

  // Một tam giác: 3 đỉnh × 3 số = 9 phần tử.
  const positions = new Float32Array([
    0.0, 1.0, 0.0, // đỉnh trên
    -1.0, -1.0, 0.0, // đỉnh trái dưới
    1.0, -1.0, 0.0, // đỉnh phải dưới
  ]);

  // itemSize = 3 vì mỗi đỉnh gồm 3 con số (x, y, z).
  geometry.setAttribute("position", new THREE.BufferAttribute(positions, 3));

  const mesh = new THREE.Mesh(
    geometry,
    new THREE.MeshBasicMaterial({ color: 0xc7ff50, side: THREE.DoubleSide }),
  );
  scene.add(mesh);

  renderer.setAnimationLoop((t) => {
    mesh.rotation.y = Math.sin(t * 0.0008) * 0.6; // lắc nhẹ cho thấy đây là mesh thật
    renderer.render(scene, camera);
  });
</script>

<canvas id="scene-shader" width="320" height="220"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("scene-shader");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(320, 220, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 320 / 220, 0.1, 100);
  camera.position.z = 3;

  const material = new THREE.ShaderMaterial({
    uniforms: { uTime: { value: 0 } },
    vertexShader: `
      varying vec2 vUv;
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }`,
    fragmentShader: `
      uniform float uTime;
      varying vec2 vUv;
      void main() {
        vec3 colorA = vec3(0.05, 0.3, 0.9);
        vec3 colorB = vec3(0.9, 0.2, 0.5);
        float t = 0.5 + 0.5 * sin(vUv.x * 6.2831 + uTime);
        gl_FragColor = vec4(mix(colorA, colorB, t), 1.0);
      }`,
  });

  const mesh = new THREE.Mesh(new THREE.SphereGeometry(1, 64, 64), material);
  scene.add(mesh);

  renderer.setAnimationLoop((t) => {
    material.uniforms.uTime.value = t * 0.001;
    mesh.rotation.y = t * 0.0003;
    renderer.render(scene, camera);
  });
</script>

<canvas id="fx-circle" width="260" height="260"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("fx-circle");
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(260, 260, false);

  const scene = new THREE.Scene();
  const camera = new THREE.Camera(); // quad phủ màn hình: không cần phối cảnh

  const uResolution = new THREE.Vector2();
  renderer.getDrawingBufferSize(uResolution);

  const material = new THREE.ShaderMaterial({
    uniforms: { uResolution: { value: uResolution } },
    vertexShader: `
      void main() { gl_Position = vec4(position, 1.0); }`,
    fragmentShader: `
      uniform vec2 uResolution;
      void main() {
        vec2 uv = gl_FragCoord.xy / uResolution;
        float dist = distance(uv, vec2(0.5)); // khoảng cách tới tâm canvas
        // Trong bán kính 0.28 → 1.0, ngoài 0.3 → 0.0, ở giữa chuyển mượt.
        float circle = 1.0 - smoothstep(0.28, 0.3, dist);
        gl_FragColor = vec4(vec3(circle), 1.0);
      }`,
  });

  const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
  quad.frustumCulled = false; // quad phủ clip-space, tắt culling cho chắc
  scene.add(quad);
  renderer.render(scene, camera);
</script>

<canvas id="fx-noise" width="260" height="260"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("fx-noise");
  const renderer = new THREE.WebGLRenderer({ canvas });
  renderer.setSize(260, 260, false);

  const scene = new THREE.Scene();
  const camera = new THREE.Camera(); // quad phủ màn hình: không cần phối cảnh

  const uResolution = new THREE.Vector2();
  renderer.getDrawingBufferSize(uResolution);

  const material = new THREE.ShaderMaterial({
    uniforms: { uResolution: { value: uResolution } },
    vertexShader: `
      void main() { gl_Position = vec4(position, 1.0); }`,
    fragmentShader: `
      // Pseudo-random 2D → 1D: đủ dùng cho hiệu ứng hạt, nhiễu.
      float random(vec2 st) {
        return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453);
      }

      uniform vec2 uResolution;
      void main() {
        vec2 uv = gl_FragCoord.xy / uResolution;
        float n = random(floor(uv * 20.0)); // chia lưới 20×20 ô nhiễu
        gl_FragColor = vec4(vec3(n), 1.0);
      }`,
  });

  const quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
  quad.frustumCulled = false;
  scene.add(quad);
  renderer.render(scene, camera);
</script>

<canvas id="fx-wave" width="320" height="220"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("fx-wave");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(320, 220, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 320 / 220, 0.1, 100);
  camera.position.set(0, 1.4, 2.2);
  camera.lookAt(0, 0, 0);

  const material = new THREE.ShaderMaterial({
    wireframe: true,
    uniforms: { uTime: { value: 0 } },
    vertexShader: `
      uniform float uTime;
      void main() {
        vec3 pos = position;
        pos.y += sin(pos.x * 4.0 + uTime) * 0.2; // đẩy đỉnh lên/xuống theo sóng
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      }`,
    fragmentShader: `
      void main() { gl_FragColor = vec4(0.78, 1.0, 0.31, 1.0); }`,
  });

  // PlaneGeometry nằm trong mặt phẳng XY; xoay -90° quanh X để thành mặt phẳng ngang.
  const geometry = new THREE.PlaneGeometry(3, 3, 48, 48);
  geometry.rotateX(-Math.PI / 2);
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer.setAnimationLoop((t) => {
    material.uniforms.uTime.value = t * 0.002;
    renderer.render(scene, camera);
  });
</script>

<canvas id="fx-rim" width="320" height="260"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("fx-rim");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(320, 260, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 320 / 260, 0.1, 100);
  camera.position.z = 3;

  const material = new THREE.ShaderMaterial({
    vertexShader: `
      varying vec3 vNormal;
      varying vec3 vViewDir;
      void main() {
        vNormal = normalize(normalMatrix * normal);
        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
        vViewDir = normalize(-mvPosition.xyz); // hướng từ bề mặt về camera
        gl_Position = projectionMatrix * mvPosition;
      }`,
    fragmentShader: `
      varying vec3 vNormal;
      varying vec3 vViewDir;
      void main() {
        float rim = 1.0 - max(dot(normalize(vNormal), normalize(vViewDir)), 0.0);
        rim = smoothstep(0.4, 1.0, rim); // siết cho viền gọn
        vec3 base = vec3(0.03, 0.07, 0.15);
        vec3 rimColor = vec3(0.4, 0.9, 1.0);
        gl_FragColor = vec4(base + rimColor * rim, 1.0);
      }`,
  });

  const mesh = new THREE.Mesh(new THREE.IcosahedronGeometry(1, 20), material);
  scene.add(mesh);

  renderer.setAnimationLoop((t) => {
    mesh.rotation.y = t * 0.0004;
    mesh.rotation.x = t * 0.0002;
    renderer.render(scene, camera);
  });
</script>

<canvas id="fx-organic" width="320" height="220"></canvas>
<script type="importmap">
  { "imports": { "three": "https://esm.sh/three@0.185.1" } }
</script>
<script type="module">
  import * as THREE from "three";

  const canvas = document.getElementById("fx-organic");
  const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
  renderer.setSize(320, 220, false);
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(45, 320 / 220, 0.1, 100);
  camera.position.set(0, 1.4, 2.2);
  camera.lookAt(0, 0, 0);

  const geometry = new THREE.PlaneGeometry(3, 3, 48, 48);
  geometry.rotateX(-Math.PI / 2);

  // Custom attribute: mỗi vertex một pha ngẫu nhiên.
  const count = geometry.attributes.position.count;
  const offsets = new Float32Array(count);
  for (let i = 0; i < count; i++) {
    offsets[i] = Math.random() * Math.PI * 2;
  }
  geometry.setAttribute("aOffset", new THREE.BufferAttribute(offsets, 1));

  const material = new THREE.ShaderMaterial({
    wireframe: true,
    uniforms: { uTime: { value: 0 } },
    vertexShader: `
      uniform float uTime;
      attribute float aOffset;
      void main() {
        vec3 pos = position;
        // cộng pha riêng của mỗi đỉnh → nhấp nhô lệch nhau, chuyển động hữu cơ
        pos.y += sin(pos.x * 4.0 + uTime + aOffset) * 0.2;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
      }`,
    fragmentShader: `
      void main() { gl_FragColor = vec4(0.75, 0.55, 1.0, 1.0); }`,
  });

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer.setAnimationLoop((t) => {
    material.uniforms.uTime.value = t * 0.002;
    renderer.render(scene, camera);
  });
</script>