Design
Walls, Openings, Roof — narzędzia, które rysują i zmieniają budynek. Te drzwi uzbrajają też edycję; na starcie jest wyłączona, żeby udostępniony projekt otwierał się jak skończony.
WebGL2 · Three.js · moduły ES
Wszystko,w jednej karcie.
Builder to pełnowymiarowy projektant domu 3D, który po prostu mieszka w karcie przeglądarki. Three.js r183 na WebGL2, moduły ES serwowane przez importmap — bez bundlera, bez builda, bez instalacji. Jedenaście kinowych przebiegów na każdą klatkę, w sztywnej bramce 60 FPS.
Sześć drzwi. To cały interfejs.
Projekt jest stroną: szyna sześciu drzwi — Design, Outside, Plan, Furnish, Light, Share — a narzędzia żyją w środku jako karty. Wszystko unosi się nad kanwą; nic nie zabiera jej szerokości. Otworzysz drzwi, a narzędzia, których potrzebujesz, są już na miejscu.
Outside
Terrain, Garden, Roads: ukształtuj działkę, sadź z wiatrem, układaj drogi trzymające się terenu, wybierz otaczający krajobraz.
Plan
Przeczytaj budynek: rzut, pomieszczenia obliczone przez graf ścian, przekrój i widoki warstw.
Furnish
Katalog 381 modeli i materiały — rozmieszczaj z geometryczną kontrolą poprawności, wykańczaj 64 proceduralnymi wzornikami.
Light
Panel Sun: miejsce, data, godzina; odtwórz dobę w 15 / 45 / 120 sekund; na wierzchu grading filmowy.
Share
Pokoje, role, obszary uprawnień, głos — i link ?design=, który otwiera ten sam dom na czyimś innym ekranie.
Architektura
Bez bundlera. Bez builda. Bez instalacji.
Aplikacja jest dostarczana jako moduły ES, serwowane bezpośrednio i spięte importmapą. Three.js r183 ładuje się prosto do karty; strona jest aplikacją. Nie ma pipeline'u builda, który mógłby się zepsuć — i nie ma nic do pobierania.
Importmap, nie bundler
Moduły rozwiązują się po nazwie przez importmapę — linkowanie robi przeglądarka, serwer po prostu serwuje pliki.
WebGL2, jak trzeba
Three.js r183 celuje w WebGL2 — instancing, tekstury zmiennoprzecinkowe i cała praca cieni idą nowoczesną ścieżką.
URL jest aplikacją
Otwórz
builder.castomo.com/editor/, a dom buduje się sam. Parametry?fresh=1,?empty=1,?quality=i?reveal=0|1zmieniają jego zachowanie.Zapisane tam, gdzie pracujesz
Autosave do localStorage, projekty trzymane po stronie serwera,
*.webhome.jsonw obie strony,Ctrl+Skiedy chcesz.
Funkcja · W przeglądarce
Bramka to obietnica: 60 FPS.
Pod obciążeniem testowym — 1 fundament, 2 kondygnacje, 15 ścian, 8 otworów, w tym trójkątne, 50 obiektów — bramka trzyma 60 FPS, poniżej 300 draw calli i 250 MB sterty. Zmierzono na Apple M4: 286 draw calli, 60 fps, 28 MB na jakości medium z pełnym stosem 11 przebiegów.
Zobacz, jak działaJedenaście przebiegów, jedna klatka, sześćdziesiąt razy na sekundę.
Stos kinowy to nie preset nałożony przy eksporcie — działa na każdej klatce, na którą patrzysz: okluzja otoczenia GTAO, promienie boskie, anamorficzne smugi, HDR bloom, motion blur, heksagonalna głębia ostrości z autofocusem, tonowanie ACES, filmowy grading 3D LUT, halacja, winieta, ziarno, aberracja chromatyczna i wyostrzanie oraz antyaliasing SMAA — a na przeszkleniach jeszcze odbicia w screen-space.
- 7 film looks — natural, cinematic, golden, overcast, dusk, bleach (+ neutral) — zapisywane razem z projektem
- 4096² miękka mapa cieni PCF dopasowana do działki — około 2 cm/texel w promieniu 45 m
- Dokładnie jedno światło rzucające cień naraz — słońce w dzień, księżyc w nocy
- Światło dzienne we wnętrzach: każdy doświetlony otwór wnosi do pomieszczenia RectAreaLight — pokoje oświetlają się poprawnie, zamiast świecić równomiernie
- 4 poziomy jakości: low, medium, high, ultra (2× supersampling)
- Kompas obraca się z kamerą; na nim siedzą znaczniki słońca i księżyca; kliknij, by spojrzeć na północ
„Silnik renderujący był kiedyś farmą renderów. Dziś jest pętlą klatek — i nadąża.”
— Builder, z założeniaDlaczego to musi być na żywo
Projektant nie może użyć zapieczonego światła.
Showroomy z zapieczonymi renderami fotografują jedną chwilę i zamrażają ją. Projektant edytuje żywą geometrię — przesuń ścianę, wydłuż dach, wytnij okno, a każdy cień, każde odbicie, każdy promień boski musi przeliczyć się w tej samej sekundzie. Builder renderuje prawdziwe słońce (serie niskiej precyzji Meeusa, dokładność około 0,01°) na tym, czym bryła jest właśnie teraz. Nic nie jest zapieczone, bo nic nie stoi w miejscu: światło liczy się na każdą klatkę, więc pozostaje uczciwe, gdy projekt zmienia się pod nim.
- Wybierz miejsce, datę i godzinę — cienie to te, które budynek naprawdę rzuciłby na tę działkę tego dnia
- Odtwórz dobę w 15 / 45 / 120 sekund; noc jest prawdziwa: światło księżyca skalowane oświetloną częścią tarczy, 1400 gwiazd wyłaniających się w zmierzchu cywilnym
- Kolor słońca kluczowany wysokością nad horyzontem — białe południe, złoto na 12°, pomarańcz na horyzoncie; światło hemisferyczne i mgła idą tą samą krzywą
- Studia drogi słońca przez cały rok — pytania przesileń odpowiadane, zanim wyleje się fundament
- QA sprawdza fizykę: południe przesilenia a nachylenie osi Ziemi, wschód równonocy dokładnie na wschodzie, ekstrema równania czasu, dzień i noc polarna, środek lata w Warszawie 04:14–21:01
Otwórz kartę.
Zaprojektuj dom.
WebGL2, moduły ES, jedenaście kinowych przebiegów — i nic do instalowania.