VAKA ANALİZİ 02 / BLENDER → WEB

Fudō: fotoğraflardan 3D ikiz.

GÖKHAN BIYIK · 20 EYLÜL 2026 · BLENDER 4.5 · THREE.JS · VERCEL

fudo.tattoo, Eyüp'ün İstanbul'daki dövme stüdyosunun web sitesi; ama bir "hizmetlerimiz" sayfası değil, stüdyonun kendisi. Ziyaretçi kapıdan girer, kimono ve maske duvarına bakar, koltuğa oturur, radyodan stüdyonun kendi setini dinler. Bu yazı, iki düzine telefon fotoğrafı ve bir krokiden o mekânın nasıl kurulduğunu anlatıyor.

fudo.tattoo: Fudō dövme stüdyosunun Three.js ile gezilebilen 3D ikizi, kimono ve maske duvarı — Stüdyo ikizi. Bütün ölçüler fotoğraflardaki referans nesnelerden (kapı, fayans, koltuk) çıkarıldı.

1. Ölçüyü fotoğraftan çıkarmak

Lazer ölçer yok, ama her mekânda ölçüsü bilinen nesneler var: standart kapı 2,05 m, 30×60 fayans, IKEA tabure. Kroki bu referanslarla ölçeklendi; duvarlar, nişler ve pencereler tek bir Python betiğinde (Blender'ın arka plan modunda) tanımlandı. Her nesne web'in koordinat sistemine göre (x, yükseklik, derinlik) yazılıyor, betik Blender'ın Z-yukarı sistemine çeviriyor.

# build_shop.py — bir duvar, bir niş, bir kamera durağı
wall("north", x=0, height=2.9, depth=0, width=6.4)
niche("mask-wall", x=3.1, height=1.6, depth=-.18, width=2.2, rows=3)
register("masks", zone="display", camera=(2.9, 1.55, 1.9), look=(3.1, 1.5, 0))

register() ile isimlendirilen her yer, web tarafında bir "istasyon" oluyor: menüden seçilebilen, kendi kamera açısı olan bir durak. Modelin ve navigasyonun tek kaynağı aynı betik; böylece Blender'da kaydırılan bir raf, sitede de kayıyor.

2. Yansıma pişirme ve malzeme paleti

Gerçek zamanlı yansıma pahalı. Aynalı yüzeyler ve parlak zemin için yansımalar Blender'da pişirilip küçük dokular olarak GLB'ye gömüldü; web'de yalnızca ortam haritası ile karıştırılıyor. Malzeme paleti (ahşap, siyah metal, kâğıt fenerler, kimono kumaşı) fotoğraflardan yapay zekâ yardımıyla çıkarılan altı renkle sınırlı tutuldu; bu, hem dosya boyutunu hem de görsel tutarlılığı kontrol altında tutuyor.

3. Mahalle görünümü ve z-fighting dersi

Stüdyonun dışında bir mahalle kamerası var; binaların köşelerinde iki yüzey aynı düzlemde çakışınca titreme (z-fighting) oluşuyordu. Çözüm, köşelerdeki payandaları cepheden birkaç santim öne almak; şeffaf hile yok, geometri düzeltmesi. Kamera uzak düzlemi de sahneye göre daraltıldı ki derinlik tamponu köşelerde daha hassas çalışsın.

Ders: z-fighting'i "polygonOffset" ile örtmek yerine geometride çöz. Bir sonraki kamera açısında yine karşına çıkar.

4. FUDO FM: stüdyonun kendi sesi

Radyo, stüdyonun SoundCloud setlerini çalan tek bir player'a bağlı. Ses kullanıcı dokunmadan başlamıyor; başladığında mekân sesleri (kapı, iğne, sokak) konuma göre karışıyor. Player arayüzü bilerek tek satır: set adı, çal/durdur, ses. Müzik, mekânın parçası; ayrı bir "widget" değil.

5. Neden bir dövme stüdyosu için 3D site?

Çünkü dövme kararı güven ister ve güven mekânla kurulur. Ziyaretçi stüdyoyu gezdikten sonra "randevu al" tuşuna basıyorsa, sohbetin yarısı yapılmış demektir. Site ayrıca Nexus ağının bir parçası: atölyemden bir portalla Fudō'ya geçilebiliyor, Fudō'dan da geri.

Araçlar ve açık kaynak

Blender 4.5 arka plan betikleri (build_shop.py düzeni) → GLB; Three.js 0.180 + Vite.
Aynı düzen, Nexus Kit'in templates/project/build_place.py şablonunda açık kaynak olarak var.
Barındırma: Vercel. Site içi API yok; her şey statik.