Saltar al contenido
wandres.dev
Iniciar sesión

Three.js y 3D

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

53 unidades · 265 temasEmpezar la ruta
  1. 00

    Nivel 0

    5 temas
    1. 01Qué hace un motor de render y qué no hacehechoen curso
    2. 02Las capas: del silicio a tu código, y dónde entra Three.jshechoen curso
    3. 03WebGL2 y WebGPU: dos contratos, no dos versioneshechoen curso
    4. 04Babylon, PlayCanvas y escribir el tuyo: cuándo Three.js no es la respuestahechoen curso
    5. 05El mapa del territorio: siete regiones del 3D en la webhechoen curso
  2. 01

    Nivel 1

    5 temas
    1. 01Por qué el dibujado está partido en etapas y no en una funciónhechoen curso
    2. 02Ensamblado de vértices y vertex shaderhechoen curso
    3. 03Teselación y geometría: las etapas que la web decidió no tenerhechoen curso
    4. 04Rasterización: del espacio de recorte a los fragmentoshechoen curso
    5. 05Fragment shader, pruebas por fragmento y mezclahechoen curso
  3. 02

    Nivel 2

    5 temas
    1. 01Vectores: desplazamientos, no posicioneshechoen curso
    2. 02El producto escalar: la medida de alineaciónhechoen curso
    3. 03El producto vectorial: la fábrica de perpendiculareshechoen curso
    4. 04Los cinco espacios que atraviesa un vérticehechoen curso
    5. 05Cambiar de espacio en Three.js sin equivocarsehechoen curso
  4. 03

    Nivel 3

    5 temas
    1. 01Qué es una transformación lineal y por qué se escribe como matrizhechoen curso
    2. 02Coordenadas homogéneas: por qué hacen falta cuatro dimensioneshechoen curso
    3. 03Componer transformaciones: el producto no es conmutativohechoen curso
    4. 04La matriz modelo-vista-proyecciónhechoen curso
    5. 05La matriz normal: por qué las normales no usan la matriz de modelohechoen curso
  5. 04

    Nivel 4

    5 temas
    1. 01Ángulos de Euler: tres números y doce convencioneshechoen curso
    2. 02Gimbal lock: la demostración, no la anécdotahechoen curso
    3. 03Cuaterniones: qué son esos cuatro númeroshechoen curso
    4. 04Interpolar orientaciones: slerp frente a lerphechoen curso
    5. 05Rotaciones en Three.js: qué método usar en cada casohechoen curso
  6. 05

    Nivel 5

    5 temas
    1. 01Escena, cámara y renderer: la tríada mínimahechoen curso
    2. 02El bucle de render: setAnimationLoop y por qué no tu propio rAFhechoen curso
    3. 03Redimensionar bien: las tres cosas que hay que actualizarhechoen curso
    4. 04devicePixelRatio: la decisión de rendimiento más rentablehechoen curso
    5. 05Delta time: el primer objeto girando de verdadhechoen curso
  7. 06

    Nivel 6

    5 temas
    1. 01Object3D: la anatomía del nodohechoen curso
    2. 02Jerarquía: add, remove, attach y el árbol de la escenahechoen curso
    3. 03Matrices locales y globales: cuándo se actualizanhechoen curso
    4. 04Grupos y pivotes: rotar alrededor de lo que no es el origenhechoen curso
    5. 05Recorrer la escena: traverse y las recetas que resuelvehechoen curso
  8. 07

    Nivel 7

    5 temas
    1. 01PerspectiveCamera: FOV vertical, aspecto y el frustumhechoen curso
    2. 02Qué cabe dentro del frustum: culling y volúmenes envolventeshechoen curso
    3. 03Z-fighting: la culpa es de near, no de farhechoen curso
    4. 04OrthographicCamera: isométrico, sombras y editoreshechoen curso
    5. 05ArrayCamera y StereoCamera: varias vistas de una escenahechoen curso
  9. 08

    Nivel 8

    5 temas
    1. 01OrbitControls y el damping: por qué hay que llamar a update()hechoen curso
    2. 02Acotar OrbitControls: ángulos, distancias y estadohechoen curso
    3. 03MapControls y FlyControls: recorrer en lugar de orbitarhechoen curso
    4. 04PointerLockControls y TrackballControlshechoen curso
    5. 05Escribir un control de cámara desde cerohechoen curso
  10. 09

    Nivel 9

    5 temas
    1. 01Qué es un atributo y cómo llega a la GPUhechoen curso
    2. 02position, normal, uv y los atributos propioshechoen curso
    3. 03BufferAttribute y los arrays tipadoshechoen curso
    4. 04El índice y lo que ahorra de verdadhechoen curso
    5. 05setDrawRange, volúmenes envolventes, grupos y disposehechoen curso
  11. 10

    Nivel 10

    5 temas
    1. 01El catálogo, la caja y el plano: aprender a contar triánguloshechoen curso
    2. 02SphereGeometry frente a IcosahedronGeometryhechoen curso
    3. 03Cilindro, cono, toro y compañía: los sólidos de revoluciónhechoen curso
    4. 04Extrusión, torno y tubo: geometría a partir de curvashechoen curso
    5. 05TextGeometry y el presupuesto de triánguloshechoen curso
  12. 11

    Nivel 11

    5 temas
    1. 01Construir una malla vértice a vérticehechoen curso
    2. 02Winding order y el descarte de caras traserashechoen curso
    3. 03Calcular normales a mano o con computeVertexNormalshechoen curso
    4. 04Aristas duras: por qué un cubo tiene 24 vértices y no 8hechoen curso
    5. 05Generar coordenadas de texturahechoen curso
  13. 12

    Nivel 12

    5 temas
    1. 01Deformar en la CPU: mover el array de posicioneshechoen curso
    2. 02Por qué deformar en la CPU casi siempre es la opción equivocadahechoen curso
    3. 03Morph targets: interpolar entre poses fijashechoen curso
    4. 04Desplazar en el vertex shader: la respuesta correctahechoen curso
    5. 05Las normales después de deformar: las tres maneras de recalcularlashechoen curso
  14. 13

    Nivel 13

    5 temas
    1. 01El problema de la llamada de dibujohechoen curso
    2. 02InstancedMesh y la matriz por instanciahechoen curso
    3. 03Color y datos propios por instanciahechoen curso
    4. 04El frustum culling que deja de funcionar por instanciahechoen curso
    5. 05BatchedMesh: geometrías distintas en un solo lotehechoen curso
  15. 14

    Nivel 14

    5 temas
    1. 01Points y PointsMaterial: un vértice, un cuadradohechoen curso
    2. 02El tamaño de un punto: sizeAttenuation y el techo del hardwarehechoen curso
    3. 03Texturas de partícula: gl_PointCoord, alfa y el orden que nunca cuadrahechoen curso
    4. 04Line, LineSegments y LineLoop: tres formas de unir vérticeshechoen curso
    5. 05Por qué no puedes engordar una líneahechoen curso
  16. 15

    Nivel 15

    5 temas
    1. 01Basic, Lambert y Phong: los materiales anteriores al PBRhechoen curso
    2. 02Standard y Physical: los dos materiales PBRhechoen curso
    3. 03Toon, Matcap, Normal y Depth: estilo y depuraciónhechoen curso
    4. 04Lo que comparten todos: side, transparent, alphaTest y depthWritehechoen curso
    5. 05Elegir material: el árbol de decisión y la tabla de costehechoen curso
  17. 16

    Nivel 16

    5 temas
    1. 01La ecuación de renderizado, en versión digeriblehechoen curso
    2. 02Qué es una BRDF y qué tiene que cumplirhechoen curso
    3. 03Conservación de energía y por qué importa tantohechoen curso
    4. 04Metallic-roughness frente a specular-glossinesshechoen curso
    5. 05Metalness es binario: los valores intermedios que arruinan una escenahechoen curso
  18. 17

    Nivel 17

    5 temas
    1. 01clearcoat: la capa de laca que va encima de todohechoen curso
    2. 02transmission, thickness e ior: vidrio de verdadhechoen curso
    3. 03sheen: por qué un tejido no es un MeshStandardMaterialhechoen curso
    4. 04iridescence y anisotropy: interferencia y metal cepilladohechoen curso
    5. 05specularIntensity, specularColor y el coste de cada capahechoen curso
  19. 18

    Nivel 18

    5 temas
    1. 01TextureLoader y LoadingManager: cargar sin mentirhechoen curso
    2. 02Coordenadas UV: de dónde salen y por qué se tuercenhechoen curso
    3. 03wrapS, wrapT, repeat, offset y rotation: la matriz UVhechoen curso
    4. 04Filtrado y mipmaps: el problema que resuelven de verdadhechoen curso
    5. 05Anisotropía: el suelo que deja de verse borrosohechoen curso
  20. 19

    Nivel 19

    5 temas
    1. 01map, alphaMap y emissiveMap: el color y lo que se vehechoen curso
    2. 02normalMap y el espacio tangentehechoen curso
    3. 03roughnessMap, metalnessMap y el empaquetado ORMhechoen curso
    4. 04aoMap y lightMap: por qué exigen un segundo juego de UVshechoen curso
    5. 05displacementMap: geometría de verdad y su preciohechoen curso
  21. 20

    Nivel 20

    5 temas
    1. 01sRGB frente a lineal: por qué existe la curvahechoen curso
    2. 02Color o dato: la regla que evita el error silenciosohechoen curso
    3. 03El camino del color, del fichero al píxelhechoen curso
    4. 04Tone mapping: las seis curvas y cuál elegirhechoen curso
    5. 05KTX2 y Basis Universal: el ahorro real de VRAMhechoen curso
  22. 21

    Nivel 21

    5 temas
    1. 01El modelo de iluminación de Three.js y sus unidadeshechoen curso
    2. 02AmbientLight y HemisphereLight: las dos luces que no son luceshechoen curso
    3. 03DirectionalLight: la fuente que está infinitamente lejoshechoen curso
    4. 04PointLight y SpotLight: la atenuación, el cono y la penumbrahechoen curso
    5. 05RectAreaLight, la tabla de costes y los helpers de luzhechoen curso
  23. 22

    Nivel 22

    5 temas
    1. 01Cómo funciona un shadow map, paso a pasohechoen curso
    2. 02Shadow acne y peter-panning: la causa geométrica y la curahechoen curso
    3. 03La cámara de sombra: el ajuste que lo cambia todohechoen curso
    4. 04Tamaño del mapa, memoria y sombras que no se recalculanhechoen curso
    5. 05Los cuatro tipos de filtrado de sombrashechoen curso
  24. 23

    Nivel 23

    5 temas
    1. 01Por qué un entorno ilumina mejor que diez luceshechoen curso
    2. 02HDRI, rango dinámico y los cargadores que existen en r184hechoen curso
    3. 03PMREMGenerator: qué precomputa exactamente y por quéhechoen curso
    4. 04scene.environment frente a scene.background, y los seis mandoshechoen curso
    5. 05Entornos procedurales: RoomEnvironment y fromScenehechoen curso
  25. 24

    Nivel 24

    5 temas
    1. 01Qué luz se puede precalcular y cuál nohechoen curso
    2. 02Lightmaps y el segundo juego de UVs que exigenhechoen curso
    3. 03Ambient occlusion horneado: qué es y qué no eshechoen curso
    4. 04El flujo desde Blender: unwrap, bake, exportarhechoen curso
    5. 05Tiempo real o horneado: el criterio con númeroshechoen curso
  26. 25

    Nivel 25

    5 temas
    1. 01Por qué glTF ganó a OBJ, FBX y COLLADAhechoen curso
    2. 02La estructura de un glTF: escenas, nodos, mallas, primitivashechoen curso
    3. 03Accesores, buffer views y buffers: cómo viaja la geometríahechoen curso
    4. 04.gltf frente a .glb: el contenedor binario por dentrohechoen curso
    5. 05El sistema de extensiones y las que de verdad importanhechoen curso
  27. 26

    Nivel 26

    5 temas
    1. 01GLTFLoader con sus tres decodificadoreshechoen curso
    2. 02Draco: qué comprime, cuánto y a qué preciohechoen curso
    3. 03KTX2 y Basis Universal: el ahorro que se nota en VRAMhechoen curso
    4. 04Meshopt frente a Draco: dos filosofías de compresiónhechoen curso
    5. 05Un pipeline real de optimización, con los númeroshechoen curso
  28. 27

    Nivel 27

    5 temas
    1. 01El modelo del sistema de animación: mixer, clip y actionhechoen curso
    2. 02AnimationClip y las pistas de keyframeshechoen curso
    3. 03Controlar una acción: play, stop, pausa y velocidadhechoen curso
    4. 04Pesos, crossfade y mezcla aditivahechoen curso
    5. 05Modos de bucle, el evento finished y la limpiezahechoen curso
  29. 28

    Nivel 28

    5 temas
    1. 01SkinnedMesh, Skeleton y Bone: las tres piezashechoen curso
    2. 02skinIndex y skinWeight: cuatro influencias por vérticehechoen curso
    3. 03La matriz de bind y su inversahechoen curso
    4. 04Skinning lineal por mezcla y el candy wrapperhechoen curso
    5. 05El coste real del skinning y cómo depurarlohechoen curso
  30. 29

    Nivel 29

    5 temas
    1. 01TextGeometry: texto que es geometría de verdadhechoen curso
    2. 02Sprites de texto: pintar en un canvas y pegarlohechoen curso
    3. 03troika-three-text y los campos de distancia con signohechoen curso
    4. 04HTML superpuesto: CSS2DRenderer y CSS3DRendererhechoen curso
    5. 05Elegir entre las cuatro técnicas de textohechoen curso
  31. 30

    Nivel 30

    5 temas
    1. 01Qué es un shader y dónde se ejecuta de verdadhechoen curso
    2. 02Vertex frente a fragment: dos etapas, dos escalashechoen curso
    3. 03Paralelismo masivo: miles de invocaciones que no se hablanhechoen curso
    4. 04La ejecución divergente: por qué un if no es un ifhechoen curso
    5. 05Sin estado: dónde vive la memoria de un shaderhechoen curso
  32. 31

    Nivel 31

    5 temas
    1. 01ShaderMaterial frente a RawShaderMaterialhechoen curso
    2. 02Uniforms: el canal de la CPU al shaderhechoen curso
    3. 03Attributes: de dónde vienen los datos por vérticehechoen curso
    4. 04Varyings: el puente interpolado entre las dos etapashechoen curso
    5. 05El tiempo como uniform y las constantes con defineshechoen curso
  33. 32

    Nivel 32

    5 temas
    1. 01Tipos y precisión en GLSLhechoen curso
    2. 02Swizzling: reordenar componentes sin costehechoen curso
    3. 03step, smoothstep y mix: la condicional que no divergehechoen curso
    4. 04El catálogo de funciones que de verdad se usanhechoen curso
    5. 05Pensar en distancias y en máscarashechoen curso
  34. 33

    Nivel 33

    5 temas
    1. 01Random determinista y la fragilidad de fract sinhechoen curso
    2. 02Ruido de valor y ruido de gradientehechoen curso
    3. 03Perlin y simplex: en qué se diferencian de verdadhechoen curso
    4. 04FBM: sumar octavas para obtener detallehechoen curso
    5. 05Domain warping y patrones que se ven bienhechoen curso
  35. 34

    Nivel 34

    5 temas
    1. 01Deformar la malla con una funciónhechoen curso
    2. 02Desplazamiento por texturahechoen curso
    3. 03Morphing: interpolar entre dos formashechoen curso
    4. 04Recalcular normales I: la vía analíticahechoen curso
    5. 05Recalcular normales II: la vía numéricahechoen curso
  36. 35

    Nivel 35

    5 temas
    1. 01Un detalle propio sin renunciar al PBRhechoen curso
    2. 02onBeforeCompile: la firma realhechoen curso
    3. 03ShaderChunk, ShaderLib y el punto de inserciónhechoen curso
    4. 04La fragilidad de sustituir cadenashechoen curso
    5. 05customProgramCacheKey y el sucesorhechoen curso
  37. 36

    Nivel 36

    5 temas
    1. 01Campos de distancia con signohechoen curso
    2. 02El bucle de marcha y su criterio de paradahechoen curso
    3. 03Primitivas y operaciones booleanashechoen curso
    4. 04Normales por gradiente y sombreadohechoen curso
    5. 05El coste real y el quad a pantalla completahechoen curso
  38. 37

    Nivel 37

    5 temas
    1. 01EffectComposer y el modelo de passeshechoen curso
    2. 02Render targets y el ping-ponghechoen curso
    3. 03RenderPass, ShaderPass y uno propiohechoen curso
    4. 04El catálogo de efectos y su costehechoen curso
    5. 05El orden correcto de la cadenahechoen curso
  39. 38

    Nivel 38

    5 temas
    1. 01Qué es Three.js Shading Languagehechoen curso
    2. 02Dos backends, dos lenguajeshechoen curso
    3. 03El grafo de nodos y su compilaciónhechoen curso
    4. 04El primer shader en TSLhechoen curso
    5. 05Qué ganas y qué pierdes frente a GLSLhechoen curso
  40. 39

    Nivel 39

    5 temas
    1. 01Operadores y encadenamientohechoen curso
    2. 02uniform, attribute y varyinghechoen curso
    3. 03Fn: funciones reutilizableshechoen curso
    4. 04Control de flujo: If, Switch y Loophechoen curso
    5. 05Tabla de equivalencias con GLSLhechoen curso
  41. 40

    Nivel 40

    5 temas
    1. 01La familia de node materialshechoen curso
    2. 02Los slots de superficiehechoen curso
    3. 03positionNode y la geometríahechoen curso
    4. 04Reemplazar sin perder el PBRhechoen curso
    5. 05Los nodos de utilidad integradoshechoen curso
  42. 41

    Nivel 41

    5 temas
    1. 01Migrar desde WebGLRendererhechoen curso
    2. 02La inicialización asíncronahechoen curso
    3. 03El fallback automático a WebGLhechoen curso
    4. 04Lo que solo existe con WebGPUhechoen curso
    5. 05Soporte real y mejora progresivahechoen curso
  43. 42

    Nivel 42

    5 temas
    1. 01El modelo de cómputo de Three.jshechoen curso
    2. 02Storage buffers: instancedArray, attributeArray y storagehechoen curso
    3. 03El kernel: Fn, workgroups y el tamaño del despachohechoen curso
    4. 04Doble buffer y un sistema de partículas entero en GPUhechoen curso
    5. 05GPGPU clásico: render targets y GPUComputationRendererhechoen curso
  44. 43

    Nivel 43

    5 temas
    1. 01El Raycaster y su modelohechoen curso
    2. 02De píxeles a coordenadas normalizadas de dispositivohechoen curso
    3. 03El objeto de intersección, campo a campohechoen curso
    4. 04El coste real de un raycasthechoen curso
    5. 05Capas, raycast propio, BVH y picking por GPUhechoen curso
  45. 44

    Nivel 44

    5 temas
    1. 01Integrar un motor de física: Rapier y el mundohechoen curso
    2. 02Cuerpos rígidos: dinámico, cinemático y fijohechoen curso
    3. 03Colliders y la malla de colisiónhechoen curso
    4. 04El bucle de tiempo fijo con acumuladorhechoen curso
    5. 05Interpolación entre pasos y sincronizar con la escenahechoen curso
  46. 45

    Nivel 45

    5 temas
    1. 01Seguimiento suave: la cámara que persiguehechoen curso
    2. 02Damping independiente del framerate: la fórmula correctahechoen curso
    3. 03Shake procedural con ruidohechoen curso
    4. 04Transiciones entre cámarashechoen curso
    5. 05Encuadre automático: calcular la distancia y fitToBoxhechoen curso
  47. 46

    Nivel 46

    5 temas
    1. 01LOD: niveles de detallehechoen curso
    2. 02Frustum culling: qué hace Three.js por defectohechoen curso
    3. 03Occlusion culling y por qué no es gratishechoen curso
    4. 04Cargar el mundo por trozos sin bloquear el hilohechoen curso
    5. 05Estructuras espaciales: rejilla, octree y qué elegirhechoen curso
  48. 47

    Nivel 47

    5 temas
    1. 01renderer.info: qué significa cada contadorhechoen curso
    2. 02Stats y el panel de rendimiento del navegadorhechoen curso
    3. 03CPU o GPU: la pregunta que decide todo lo demáshechoen curso
    4. 04Inspeccionar un frame: Spector.js y el Inspector de Three.jshechoen curso
    5. 05Un protocolo de medición que no mientehechoen curso
  49. 48

    Nivel 48

    5 temas
    1. 01Fusionar, instanciar o agrupar: los tres caminos a un draw callhechoen curso
    2. 02Compartir materiales y el coste real de un programa de shaderhechoen curso
    3. 03Texture atlas: unir texturas sin romper los bordeshechoen curso
    4. 04Overdraw, early-z y el orden en que Three dibujahechoen curso
    5. 05El coste de la transparencia y las optimizaciones que son mitohechoen curso
  50. 49

    Nivel 49

    5 temas
    1. 01El patrón de montaje y desmontaje de una escenahechoen curso
    2. 02dispose de verdad: la fuga de memoria de GPU que mata la pestañahechoen curso
    3. 03El bucle de render frente al ciclo de vida del componentehechoen curso
    4. 04Integrar con Solid y con Astro: señales sin re-render e islas sin SSRhechoen curso
    5. 05El modelo declarativo: qué aporta React Three Fiber y qué escondehechoen curso
  51. 50

    Nivel 50

    5 temas
    1. 01El modo XR de Three.js y las sesiones inmersivashechoen curso
    2. 02Los botones de entrada: VRButton, ARButton y XRButtonhechoen curso
    3. 03Controladores, modelos de mando y seguimiento de manoshechoen curso
    4. 04Espacios de referencia y hit testing en ARhechoen curso
    5. 05Rendimiento en visores: dos ojos, noventa hercios y lo que quedahechoen curso
  52. 51

    Nivel 51

    5 temas
    1. 01La pantalla de carga honesta: LoadingManager y progreso realhechoen curso
    2. 02Detectar la capacidad del dispositivo y degradar con dignidadhechoen curso
    3. 03Cuando no hay WebGL: detección, contexto perdido y fallbackhechoen curso
    4. 04La accesibilidad del 3D: alternativa, teclado y movimientohechoen curso
    5. 05El presupuesto de peso y de memoria de una experiencia 3Dhechoen curso
  53. 52

    Nivel 52

    5 temas
    1. 01La arquitectura de una experiencia 3D, de principio a finhechoen curso
    2. 02El mapa de decisiones técnicas del track completohechoen curso
    3. 03Los errores que ya no deberías cometerhechoen curso
    4. 04Hacia dónde va el 3D en la webhechoen curso
    5. 05El proyecto que demuestra el track enterohechoen curso