ProyectosProyectos personales
Rastrojero
Simulador off-road en el navegador con un Rastrojero 1971 modelado en Blender: físicas de vehículo con Rapier, render con WebGPU y un modo edición para armar tu propio circuito de pruebas.
- Estado
- En desarrollo
- Periodo
- 2025.09 — actualidad
- Tipo
- Simulación
- Rol
- Proyecto individual, Física y simulación, Modelado 3D
- Tecnologías
- Three.js
- WebGPU
- TSL
- Rapier
- Blender
- Enlaces
- Log de desarrollo
- 24 entradas
Contexto y objetivo
El Rastrojero es la camioneta utilitaria que se fabricó en Argentina a partir de los años cincuenta. Modelé la versión de 1971 en Blender y la llevé a Three.js para manejarla con físicas reales: suspensión, tracción trasera y frenos.
La idea fue creciendo de a poco: primero el manejo, después un terreno para probarlo y por último un editor para que cada uno arme su propio circuito con conos, rampas, carteles, barreras y una zona de carga. El proceso está documentado en el log de abajo.
Demo
Manejo: W / ↑ acelerar · S / ↓ marcha atrás · A D / ← → girar · Espacio freno · B balizas · L luces.
Edición: activá EDIT MODE en el panel de arriba a la derecha. Se recomienda Chrome o Edge (WebGPU); en otros navegadores usa WebGL2.
Descripción técnica
- Vehículo: el
DynamicRayCastVehicleControllerde Rapier, con cuatro ruedas, tracción y freno atrás y dirección adelante (hasta 30°, suavizada). Los frenos traseros pierden fuerza en marcha atrás, y al soltar el acelerador hay freno motor. Colliders: la cabina usa dos convex hulls generados desde el GLB, y la caja trasera, cuboids armados desde código, para poder usarla como caja de carga. - Render:
WebGPURenderer(con WebGL2 como respaldo), MSAA ×4 en la pasada de escena, bloom para las luces y una resolución adaptativa que baja el pixel ratio cuando los FPS no alcanzan. Materiales TSL: la grilla del suelo (con presets Dark, Contrast, Blueprint, Retro, Neon…), el borde que marca el área de manejo y la zona de carga. El concreto combina texturas de tsl-textures.
this.controller.setWheelSuspensionRestLength(i, 0.7)\nthis.controller.setWheelMaxSuspensionTravel(i, 0.6)\nthis.controller.setWheelSuspensionStiffness(i, 85)
Modo edición
Un panel de Tweakpane controla el suelo, la cámara y los assets. Cada asset se coloca con una vista previa que sigue al mouse y rota de a 22,5° con la rueda. Una vez colocado, se mueve y se rota con un gizmo propio, y tiene física, así que los objetos se empujan entre sí mientras se editan.
La zona de carga tiene una plataforma con 16 cajas. Cuando la caja de la camioneta entra en la zona, la luz pasa de rojo a verde y las cajas se pueden arrastrar hasta la camioneta. La configuración se guarda en el localStorage del navegador.
Modelo
La camioneta está modelada en Blender. Una retopología bajó el modelo de 80.000 a 22.000 vértices, y el ambient occlusion se horneó en Blender.
Resultados y limitaciones
- Sigue en desarrollo.
- Los circuitos se guardan en cada navegador (
localStorage): no se pueden compartir. - Pendiente: superficies como agua, tierra y barro que cambien el manejo.
Créditos
- Modelo del Rastrojero y assets: Pablo Mesquida (Blender).
- Rapier de Dimforge para las físicas.
- tsl-textures de Pavel Boytchev para el patrón del concreto.
- Tweakpane para el panel de edición.
Log de desarrollo
Zona de carga configurable
La zona de carga se arma con assets que se arrastran hasta la camioneta.
Zona de carga y descarga
Una zona donde la camioneta puede cargar los objetos de una tarima.
Nuevo collider para la camioneta
Un convex hull para la parte delantera y cuatro cuboids para la caja trasera.
Colliders más precisos para los assets
Ajusté los colliders de varios assets para que sigan mejor la forma de los objetos.
Modo edición rehecho, con gizmos nuevos
Rehice varias partes del modo edición y sumé gizmos nuevos para mover y rotar.
Guardar la configuración de los assets
Los assets colocados ahora se guardan en el navegador.
Assets nuevos: señales, neumáticos, barreras y reductores
Nuevos assets para el circuito y una vista alejada para colocarlos.
Bug del spawn resuelto
Después de un buen rato, el bug en la aparición de la camioneta quedó resuelto.
Edición para distintos assets
El panel admite distintos assets, la cámara se arrastra y los objetos colocados se pueden mover y rotar.
Panel de edición
Un panel para colocar conos y editar el suelo y los límites.
Los primeros objetos: conos
Los conos son el primer asset del circuito de pruebas.
Suelo con grilla y límites
El material del suelo suma la grilla con presets y un shader que marca los límites del área de manejo.
Dirección ajustada: lo básico está listo
Con el steering ajustado, el manejo básico está listo.
Ambient occlusion desde Blender
Exporté el ambient occlusion desde Blender y el resultado me gusta más.
Frenos traseros
Frenos que aplican fuerza distinta según la dirección y frenado suave al soltar el acelerador.
Sistema de luces
Frontales, freno, balizas y reversa funcionando.
Materiales y suspensión con Rapier
De vuelta en Three.js: los materiales del modelo y una suspensión estable.
Retopología: de 80.000 a 22.000 vértices
Rehice la geometría del modelo para que sea más liviana en el navegador.
Primera prueba en Three.js
El modelo del Rastrojero, ya dentro de Three.js.
Rastrojero 1971 en Blender
El modelo terminado, por ahora: un Rastrojero 1971 hecho en Blender.
Caja, ruedas y color
Tercer avance en Blender: la camioneta suma la caja de madera, las ruedas y el color celeste.
La cabina toma forma
Segundo avance en Blender: la cabina suma materiales, parrilla, faros y paragolpes.
Modelando el Rastrojero en Blender
Con la física andando, empecé a modelar la camioneta: primero la carrocería de la cabina.
Primeros pasos: del cubo al chasis con ruedas
El punto de partida del Rastrojero: probar las físicas con Rapier antes de tener el modelo.