Alfais Adilkhan
Кейс

Осы сайт

WebGPU-де жасалған айналдырмалы портфолио: курсормен сүртіп тазалайтын мұзды Жер, әлемнің үстіндегі мәтін бағаны және орбитадағы финал. Бір камера желісі, бір айналдыру мәні, склейкасыз.

2026

Сыни жолда 8 МБ-тан аз, 300-ден аз сурет салу шақыруы

Рөл

Дизайн, код және мәтін. Бір адам.

Нәтиже

  • Сыни жол 8 МБ-тан аз
  • Алты бөлімнің бәрінде 300-ден аз сурет салу шақыруы
  • Қозғалысты азайту және пернетақта режимдері шыққан күннен бері бар

Шарттар

  • Алты түс, қатаң шектеу; кадрда бір акцент
  • 300-ден аз мөлдір емес сурет салу шақыруы; көлеңке карталары жоқ
  • Әр 3D нысан міндетті емес: жоқ файл қате емес, процедуралық баламамен ауыстырылады
  • Барлық мәтін мазмұн файлдарында; сахна кодында өмірбаян жоқ

Процесс

  1. Алдымен қарапайым геометрия: әр камера сәті, әрекет және ауысу модельдер пайда болғанға дейін жасалды.
  2. Бір айналдыру мәнімен басқарылатын бір Catmull-Rom камера желісі; Lenis пен рендер циклі бір тикерді бөліседі, сондықтан DOM мен WebGL ешқашан алшақтамайды.
  3. Шейдерлер TSL-де бір рет жазылып, WGSL мен GLSL-ге компиляцияланады: WebGPU рендері WebGL2-ге автоматты түрде ауысады.
  4. AgX тонмаппингі, процедуралық полярлық түн ортасы және мәтін бағанының артындағы тереңдікке негізделген бұлыңғырлау.