wandres.dev
De la matriz al shader

Domina Three.js y 3D
hasta nivel dios

Gráficos 3D en la web: el pipeline, geometría e instancing, PBR y texturas, glTF, shaders GLSL, TSL con WebGPURenderer y producción.

La ruta

53 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa del 3D en la web

La visión aérea: qué es un motor de render, dónde encaja Three.js, WebGL frente a WebGPU, y todo el territorio.

Mapa mentalOntologíaMotor

Cómo se dibuja un píxel Nivel 1 · El pipeline gráfico

De vértices a fragmentos: las etapas del pipeline, qué hace la GPU en cada una, y por qué existe esta arquitectura.

PipelineVérticesFragmentos

Matemáticas del 3D I Nivel 2 · Vectores y espacios

Vectores, producto escalar y vectorial, normalización, y los cinco espacios de coordenadas que atraviesa un vértice.

VectoresDotEspacios

Matemáticas del 3D II Nivel 3 · Matrices y transformaciones

Matrices de transformación, el orden de multiplicación, la matriz modelo-vista-proyección y por qué importa.

MatricesMVPOrden

Matemáticas del 3D III Nivel 4 · Rotaciones y cuaterniones

Euler y su gimbal lock, cuaterniones como solución, slerp, y cuándo usar cada representación.

EulerCuaternionesslerp

Primer proyecto Nivel 5 · Escena, cámara, renderer

La tríada mínima, el bucle de render, redimensionar bien, el device pixel ratio y el primer cubo girando.

SceneCameraRenderer

El grafo de escena Nivel 6 · Object3D y la jerarquía

Padres e hijos, matrices locales y globales, el orden de actualización, add y remove, y los grupos.

Object3DJerarquíaMatrix

Cámaras Nivel 7 · Perspectiva, ortográfica y el frustum

FOV, aspecto, near y far, el z-fighting, la cámara ortográfica y cuándo cada una.

FOVFrustumz-fighting

Controles Nivel 8 · Orbit, fly y los propios

OrbitControls con damping, los otros controladores, y escribir un control de cámara desde cero.

OrbitControlsDampingCustom

BufferGeometry Nivel 9 · Atributos y la memoria de la GPU

Qué es un atributo, position, normal y uv, los buffers tipados, y el índice que ahorra vértices.

BufferGeometryAtributosÍndices

Geometrías integradas Nivel 10 · El catálogo y sus parámetros

Box, sphere, plane, torus, extrude, lathe y tube: qué controla cada parámetro y su coste en triángulos.

CatálogoSegmentsCoste

Geometría propia Nivel 11 · Construir vértices a mano

Generar una malla desde cero, calcular normales, orientación de caras y el winding order.

VérticesNormalesWinding

Modificar geometría Nivel 12 · Deformar en CPU y en GPU

Mover vértices por código, morph targets, y por qué casi siempre deberías hacerlo en el vertex shader.

MorphDeformarGPU

Instancing Nivel 13 · Miles de objetos en un draw call

InstancedMesh, la matriz por instancia, colores por instancia, y el salto de rendimiento que supone.

InstancedMeshDraw callMatrices

Puntos y líneas Nivel 14 · Sistemas de partículas y trazos

Points y su material, el tamaño atenuado, Line frente a LineSegments, y por qué las líneas gruesas son difíciles.

PointsLinePartículas

Materiales Nivel 15 · El catálogo y qué modela cada uno

Basic, Lambert, Phong, Standard, Physical y Toon: el modelo de iluminación de cada uno y su coste.

MaterialesModelosCoste

PBR I Nivel 16 · La teoría del renderizado físico

La ecuación de renderizado en versión digerible, energía conservada, y qué significan metalness y roughness.

PBRMetalnessRoughness

PBR II Nivel 17 · MeshPhysicalMaterial a fondo

Clearcoat, transmission, sheen, iridescence, anisotropy: cada capa del material físico y cuándo usarla.

clearcoattransmissionsheen

Texturas I Nivel 18 · Cargar, mapear y repetir

TextureLoader, wrapping, repeat y offset, filtrado, mipmaps y anisotropía.

UVMipmapsFiltrado

Texturas II Nivel 19 · Los mapas de un material

map, normalMap, roughnessMap, aoMap, displacementMap y emissiveMap: qué hace cada canal.

normalMapaoMapCanales

Texturas III Nivel 20 · Espacios de color y compresión

sRGB frente a lineal, el color management de Three.js, KTX2 con Basis, y el ahorro real de VRAM.

sRGBKTX2VRAM

Luces Nivel 21 · El catálogo y su coste

Ambient, hemisphere, directional, point, spot y area: qué simula cada una y cuánto cuesta.

LucesRectAreaCoste

Sombras Nivel 22 · Shadow maps y sus artefactos

Cómo funciona un shadow map, acne y peter-panning, el bias, el tamaño del mapa y los tipos de filtrado.

Shadow mapbiasPCF

Entornos e IBL Nivel 23 · HDRI, envMap y la luz realista

Iluminación basada en imagen, cargar un HDRI, PMREM, y por qué un buen entorno mejora más que diez luces.

HDRIPMREMIBL

Baking y lightmaps Nivel 24 · Precalcular la luz

Qué se puede precocinar, lightmaps y ambient occlusion horneada, y el flujo desde Blender.

BakingLightmapBlender

glTF Nivel 25 · El formato estándar del 3D en la web

La estructura del formato, glTF frente a GLB, las extensiones, y por qué ganó a OBJ y FBX.

glTFGLBExtensiones

Cargar y optimizar assets Nivel 26 · Draco, Meshopt y gltf-transform

Comprimir geometría, el coste de descompresión, y un pipeline real de optimización de modelos.

DracoMeshoptPipeline

Animación de modelos Nivel 27 · AnimationMixer y clips

El sistema de animación, mezclar clips, crossfade, pesos, y controlar la reproducción.

MixerClipsCrossfade

Skinning y rigging Nivel 28 · Personajes con esqueleto

SkinnedMesh, los huesos, los pesos de vértice, el coste del skinning y las restricciones prácticas.

SkinnedMeshBonesWeights

Texto en 3D Nivel 29 · Geometría, sprites y SDF

TextGeometry y su coste, los sprites de texto, troika-three-text con SDF, y el HTML superpuesto.

TextGeometrySDFtroika

Shaders I Nivel 30 · GLSL y el modelo mental

Qué es un shader, vertex frente a fragment, el paralelismo masivo, y por qué no puedes usar un if como en JS.

GLSLVertexFragment

Shaders II Nivel 31 · ShaderMaterial, uniforms y varyings

Pasar datos desde JS, uniforms y attributes, varyings interpoladas, y el tiempo como uniform.

uniformsvaryingattribute

Shaders III Nivel 32 · El lenguaje GLSL

Tipos, swizzling, las funciones integradas, step, smoothstep, mix y clamp como caja de herramientas.

Swizzlesmoothstepmix

Shaders IV Nivel 33 · Ruido y patrones

Random determinista, Perlin y simplex, FBM, y construir patrones procedurales que se ven bien.

NoisePerlinFBM

Shaders V Nivel 34 · Vertex shaders creativos

Ondas, desplazamiento por textura, morphing, y recalcular normales tras deformar.

DisplacementOndasNormales

Shaders VI Nivel 35 · Extender los materiales de Three

onBeforeCompile, los chunks de shader, y modificar el MeshStandardMaterial sin reescribirlo entero.

onBeforeCompileChunksExtender

Raymarching Nivel 36 · SDF y geometría implícita

Distance fields, el bucle de marcha, las operaciones booleanas suaves, y el coste de esta técnica.

SDFRaymarchBooleanas

Post-procesado Nivel 37 · EffectComposer y los passes

El render target, la cadena de passes, bloom, DOF, SSAO, y el orden correcto en el pipeline.

ComposerBloomPasses

TSL I Nivel 38 · El lenguaje de shading de Three.js

Qué es Three.js Shading Language, por qué existe, y cómo un mismo grafo compila a GLSL y a WGSL.

TSLGrafoPortable

TSL II Nivel 39 · Nodos y composición

La API de nodos, las operaciones encadenadas, uniforms y attributes en TSL, y el equivalente de cada función GLSL.

Nodosuniform()Fn()

TSL III Nivel 40 · Node materials

MeshStandardNodeMaterial, colorNode, positionNode y normalNode: reemplazar partes sin perder el PBR.

NodeMaterialcolorNodepositionNode

WebGPURenderer Nivel 41 · El renderer moderno de Three.js

Migrar de WebGLRenderer, qué cambia, el fallback automático a WebGL, y qué features solo existen aquí.

WebGPURendererFallbackMigrar

Compute en Three.js Nivel 42 · GPGPU con TSL

computeAsync, los storage buffers, partículas simuladas en GPU, y el patrón de doble buffer.

ComputeStorageGPGPU

Raycasting Nivel 43 · Detectar el clic en 3D

El Raycaster, coordenadas normalizadas, el coste de raycast, y optimizar con bounding volumes y BVH.

RaycasterNDCBVH

Física Nivel 44 · Rapier y el mundo simulado

Integrar un motor de física, cuerpos rígidos y colliders, el bucle fijo, y sincronizar con el render.

RapierCollidersFixed step

Cámaras y cinemática Nivel 45 · Movimiento con intención

Seguimiento suave, lerp y damping independientes del framerate, shake, y transiciones de cámara.

DampingLerpShake

Mundos grandes Nivel 46 · LOD, culling y streaming

Level of detail, frustum culling, occlusion, y cargar el mundo por trozos sin bloquear el hilo.

LODCullingStreaming

Rendimiento I Nivel 47 · Medir antes de optimizar

Draw calls, triángulos, el panel de estadísticas, el spector, y encontrar si el cuello está en CPU o GPU.

Draw callsStatsPerfilar

Rendimiento II Nivel 48 · Las optimizaciones que valen

Merge frente a instancing, compartir materiales, texture atlas, reducir el overdraw y el coste de transparencia.

InstancingAtlasOverdraw

Three.js en frameworks Nivel 49 · Integración y ciclo de vida

El patrón de montaje y limpieza, dispose de verdad, y la integración con Solid, React y Astro.

disposeCicloIntegración

WebXR Nivel 50 · Realidad virtual y aumentada

El modo XR de Three.js, las sesiones, los controladores, hit testing en AR, y el rendimiento en visores.

WebXRVRAR

Producción Nivel 51 · Carga, accesibilidad y fallback

La pantalla de carga honesta, detectar capacidad del dispositivo, degradar con dignidad y la accesibilidad del 3D.

LoadingDegradarA11y

Nivel Dios Nivel 52 · Síntesis del 3D en la web

La arquitectura de una experiencia 3D completa, el mapa de decisiones técnicas, y hacia dónde va el 3D web.

SíntesisArquitecturaFuturo
265lecciones
53niveles
0→∞de cero a dios

¿Listo para dominar Three.js y 3D?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →