Bukan cuma denah di kertas. Ini paket desain rumah tipe 21 yang lengkap: 15 lembar gambar kerja yang bisa dicetak, model 3D yang bisa diputar dan dibedah per kamar, spesifikasi bahan, jadwal pelaksanaan, dan RAB — semuanya ada di dalam satu halaman HTML statis.
Pratinjau di atas adalah aplikasinya yang asli, bukan rekaman. Untuk kontrol keyboard (WASD), klik dulu di dalam pratinjau supaya fokus pindah ke iframe — perilaku bawaan peramban. Dari ponsel, pratinjau terasa sempit; tombol hijau di atas membukanya di tab sendiri.
Kenapa tipe 21
Tipe 21 itu luas bangunan 21 m². Angka itu terdengar mustahil untuk satu rumah yang layak, dan memang di situlah seluruh persoalannya. Hampir semua desain tipe 21 di pasaran gagal di satu titik yang sama: kamar tidur tidak punya dinding luar, jadi tidak ada jendela, jadi rumahnya pengap.
Di desain ini masalah itu dipecahkan dengan urutan terbalik. Saya mulai dari yang tidak bisa dikompromikan:
- Kamar tidur wajib menyentuh dinding luar. Tidak bisa ditawar.
- Dinding barat adalah dinding kopel — menempel tetangga, jadi tidak boleh dan tidak perlu ada bukaan.
- Maka koridor diletakkan menempel dinding kopel (koridor memang tidak butuh jendela), dan kamar tidur didorong ke dinding timur yang terbuka.
Dari situ semuanya jatuh ke tempatnya sendiri.
| # | Ruang | As-ke-as (m) | Bruto (m²) | Bersih (m) | Bersih (m²) |
|---|---|---|---|---|---|
| 1 | Teras Sambut | 3,00 × 0,90 | 2,70 | 2,92 × 0,82 | 2,41 |
| 2 | Ruang Tamu + Keluarga | 3,00 × 2,10 | 6,30 | 2,85 × 1,95 | 5,56 |
| 3 | Koridor | 0,95 × 2,50 | 2,38 | 0,80 × 2,42 | 1,94 |
| 4 | Kamar Tidur | 2,05 × 2,50 | 5,13 | 1,90 × 2,35 | 4,46 |
| 5 | Dapur & Area Cuci | 1,65 × 1,50 | 2,48 | 1,50 × 1,35 | 2,03 |
| 6 | Kamar Mandi | 1,35 × 1,50 | 2,03 | 1,20 × 1,35 | 1,62 |
| Total | 21,00 | 18,02 |
Tapak 3,00 × 7,00 m di kavling 6 × 12 m (72 m²), GSB 3 m, KDB 50 %, KLB 0,29, plafon 2,80 m (Kepmen Kimpraswil 403/2002), atap pelana 30° dengan puncak +3,88 m.
Kompromi yang saya ambil dan tidak saya sembunyikan:
- Kamar mandi diakses dari area dapur/servis. Dengan lebar 3 m, koridor 0,80 m hanya bisa menjangkau satu ruang di baris belakang. Ini lazim di rumah tipe 21–36 dan tetap higienis selama dapur punya exhaust fan sendiri. Kalau tidak suka, ada toggle varian ensuite di tab 3D yang memindahkan pintu KM ke dalam kamar tidur.
- Kasur maksimal 120 × 200 cm. Kamar tidurnya 4,46 m² bersih. Kasur 160 × 200 tidak muat — ini kesalahan paling sering terjadi di rumah tipe ini, dan sudah saya tulis eksplisit di kartu ruangnya.
Isi aplikasinya
| Tab | Isi |
|---|---|
| 01 Ringkasan | Parameter utama, rekapitulasi luas, 8 catatan rasional desain |
| 02 Model 3D | Model 3D interaktif di HTML Canvas — 8 mode, 7 sudut pandang, pilih per kamar |
| 03 Detail Ruang | Kartu per ruang: dimensi as & bersih, material tiap permukaan, daftar furnitur berspesifikasi, titik lampu & saklar, catatan desain |
| 04 Blueprint | 15 lembar gambar A3 (SVG) siap cetak |
| 05 Spesifikasi | 9 kelompok spesifikasi teknis, dari galian pondasi sampai finishing |
| 06 RAB & Jadwal | RAB 9 kategori, rekapitulasi lingkup, 6 termin, kurva-S, 5 milestone, tabel pengendalian mutu |
| 07 Catatan | 8 kesalahan umum, 8 trik rumah mungil, roadmap pengembangan, checklist perawatan, acuan SNI |
Model 3D — kontrol
| Aksi | Cara |
|---|---|
| Putar | Seret mouse / satu jari |
| Zoom | Roda mouse / cubit dua jari |
| Geser (pan) | Tombol kanan seret, atau Shift + seret |
| Jalan | W A S D (maju · kiri · mundur · kanan), Q E (turun · naik) |
| Percepat | Tahan Shift (2,6×) |
| Kembalikan sudut pandang | R |
| Pilih ruang | Klik ruangan di model, atau klik daftar ruang di panel kiri |
Kamera bergerak relatif terhadap arah hadap, jadi W selalu ke arah pandang dan D selalu ke kanan layar. Kecepatannya menyesuaikan jarak kamera — dekat jadi halus, jauh jadi cepat.
Delapan mode tampilan: Seluruh Rumah · Potongan (cutaway) · Tapak & Lingkungan · Struktur · Instalasi Listrik · Air Bersih · Air Kotor & Sanitasi · Bidang Atap. Ditambah slider angkat atap 0–3 m, toggle varian KM, mode malam, wireframe, putar otomatis, dan ekspor PNG.
15 lembar blueprint
| No. | Gambar | Skala |
|---|---|---|
| A-01 | Denah Bangunan + tabel ruang | 1:50 |
| A-02 | Denah Tapak & Situasi + data tapak + key plan | 1:80 |
| A-03 | Tampak Depan | 1:40 |
| A-04 | Tampak Belakang | 1:40 |
| A-05 | Tampak Samping Kanan | 1:32 |
| A-06 | Potongan A-A (melintang) | 1:38 |
| A-07 | Potongan B-B (memanjang, dengan kuda-kuda) | 1:32 |
| A-08 | Rencana Atap + perhitungan material | 1:40 |
| A-09 | Rencana Pondasi & Sloof + volume galian | 1:40 |
| A-10 | Rencana Plafon & Titik Lampu | 1:40 |
| A-11 | Detail & Jadwal Kusen (8 tipe) | 1:20 |
| A-12 | Detail Konstruksi (kolom, kuda-kuda, lantai, sanitasi) | 1:20 / 1:25 |
| ME-01 | Instalasi Listrik + pembagian grup | 1:40 |
| ME-02 | Instalasi Air Bersih + skema hidrolik | 1:40 |
| ME-03 | Instalasi Air Kotor, Air Hujan & Sanitasi | 1:40 |
Sisi teknis
Seluruh halaman statis dan mandiri: tidak ada backend, tidak ada build step, tidak ada framework. Bukan React, bukan Three.js, bukan D3. Nol dependensi.
- 5.283 baris / 316 KB, 7 file JS + 1 HTML. Buka
index.htmllangsung dari disk, dari flashdisk, atau dari CDN — sama saja. - Satu sumber data.
js/model.jsmemegang semua angka. Denah, tampak, potongan, geometri 3D, jadwal kusen, tabel ruang, dan RAB semuanya diturunkan dari file itu. Ubah lebar satu ruang, dan 15 gambar + model 3D + RAB ikut berubah. - Renderer 3D ditulis sendiri. Transformasi, back-face culling, near-plane clipping, penyortiran kedalaman (painter’s algorithm), dan flat shading dengan key + fill + hemisphere light — semuanya di canvas 2D. Sekitar 300 baris.
- Bidang atap dipecah 8 strip memanjang. Ini bukan hiasan: painter’s algorithm gagal pada poligon besar yang saling menindih dengan timpak, dan pemecahan itu yang menyelesaikannya.
- 2.628 bidang digambar dalam ± 8 ms per frame — cukup untuk orbit dan WASD yang mulus.
- Blueprint digambar sebagai SVG, jadi tajam di zoom berapa pun dan bisa langsung dicetak A3 lewat
window.print(). - Animasi kamera tidak bergantung pada
requestAnimationFrame(dijeda browser saat tab tidak aktif), tapi pada timer — supaya tampilan tidak pernah “beku” saat pindah tab.
Yang masih perlu diverifikasi sebelum dibangun
Saya perlu jujur soal batasnya. Ini gambar kerja pra-DED, bukan gambar tender.
- Harga RAB bersifat indikatif (Jabodetabek, awal 2026) dan harus diverifikasi dengan penawaran kontraktor setempat. Angkanya Rp 210 juta untuk paket lengkap — bandingkan dengan patokan pasar “Rp 4–5 juta/m²” yang biasanya hanya mencakup bangunan inti tanpa pagar, gerbang, carport, septictank, tandon, lansekap, perizinan, pengawasan, dan cadangan risiko. Perbandingan per kelompok ada di tab RAB → Rekapitulasi Ruang Lingkup, supaya angkanya tidak menyesatkan.
- Penyelidikan tanah (sondir) belum ada. Pondasi batu belah trapesium 60/25 diasumsikan tanah keras pada −0,85 m.
- Perhitungan struktur oleh ahli struktur, dan pengesahan PBG/IMT dari dinas setempat.
- Peraturan daerah setempat soal KDB/KLB/GSB bisa berbeda dari asumsi di sini.
Semua asumsi itu saya tulis terbuka di README.md di dalam folder aplikasinya, bukan disembunyikan.
Repo
Aplikasinya ada di /apps/home-design-arch/ di situs ini — tanpa proses build, tanpa minifikasi, tanpa bundling. Lihat js/model.js kalau mau mengubah desainnya.