Animación de Shaders WebGL Vinculada al Progreso del Desplazamiento

BarbaraEberle

Requisitos Previos
Asegúrate de tener instalados los siguientes componentes:
- Node.js y npm
- Un entorno de desarrollo adecuado (por ejemplo, Visual Studio Code)

Paso 1: Configuración del Proyecto
1. Crea una nueva carpeta para tu proyecto y navega dentro de ella:

Código [Seleccionar]

bash
    mkdir shader-scroll
    cd shader-scroll

2. Inicializa un nuevo proyecto de Node.js:

Código [Seleccionar]

bash
    npm init -y

3. Instala las dependencias necesarias:

Código [Seleccionar]

bash
    npm install pug sass three gsap

Paso 2: Configuración de Pug
1. Crea una carpeta llamada `src` dentro de tu proyecto.
2. Dentro de `src`, crea una carpeta llamada `views` y dentro de ella un archivo llamado `index.pug`.
3. En `index.pug`, agrega el siguiente código:

Código [Seleccionar]

pug
    doctype html
    html(lang="en")
      head
        meta(charset="UTF-8")
        meta(name="viewport" content="width=device-width, initial-scale=1.0")
        title Shader Scroll
        link(rel="stylesheet" href="styles.css")
      body
        main
          each section in sections
            section(id=section.id class=section.class)
        script(src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js")
        script(src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js")
        script(src="scripts.js")

Paso 3: Configuración de Sass
1. Dentro de `src`, crea una carpeta llamada `styles` y dentro de ella un archivo llamado `styles.scss`.
2. En `styles.scss`, agrega el siguiente código:

Código [Seleccionar]

scss
    body {
      margin: 0;
      padding: 0;
      font-family: Arial, sans-serif;
    }
    main {
      height: 300vh;
    }
    section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #333;
      color: white;
      font-size: 2rem;
    }

3. Compila el archivo `styles.scss` a `styles.css` utilizando Sass:

Código [Seleccionar]

bash
    sass src/styles/styles.scss src/styles/styles.css

Paso 4: Configuración de Three.js y GSAP
1. Dentro de `src`, crea un archivo llamado `scripts.js`.
2. En `scripts.js`, agrega el siguiente código:

Código [Seleccionar]

js
    import * as THREE from 'three';
    import gsap from 'gsap';

    const sections = document.querySelectorAll('section');
    const renderer = new THREE.WebGLRenderer();
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    document.body.appendChild(renderer.domElement);
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.position.z = 5;

    const geometry = new THREE.PlaneGeometry(2, 2, 20, 20);
    const material = new THREE.ShaderMaterial({
      vertexShader: `...`, // Aquí va tu shader de vértices
      fragmentShader: `...`, // Aquí va tu shader de fragmentos
      uniforms: {
        u_time: { value: 0.0 },
        u_scroll: { value: 0.0 }
      }
    });

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

    function animate() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }

    animate();

    window.addEventListener('scroll', () => {
      const scrollY = window.scrollY;
      const scrollMax = document.body.scrollHeight - window.innerHeight;
      material.uniforms.u_scroll.value = scrollY / scrollMax;
    });

Paso 5: Ejecutar el Proyecto
1. En el archivo `package.json`, agrega un script para compilar Pug y Sass:

Código [Seleccionar]

    json
    "scripts": {
      "build": "pug src/views/index.pug --out dist && sass src/styles/styles.scss dist/styles.css"
    }

2. Ejecuta el script para compilar los archivos:

Código [Seleccionar]

bash
    npm run build

3. Abre el archivo `dist/index.html` en tu navegador para ver tu animación.

Animación de Shaders WebGL Vinculada al Progreso del Desplazamiento

BarbaraEberle

Aportación rápida

Actualizaciones

Open Access