- Architype
- WebGL / 3B deneyim
[ HİZMET ] · WebGL & 3B web deneyimi
WebGL ve 3B web deneyimi: tarayıcıda 60fps akan interaktif siteler
Architype, markalar için WebGL ve 3B web deneyimleri tasarlayan ve kodlayan bir stüdyodur. WebGL deneyimi; fareye ve kaydırmaya tepki veren shader yüzeyler, 3B sahneler ve canvas kare dizilerinin tarayıcıda eklenti olmadan, 60fps hedefiyle çalıştığı sitedir. Desteklemeyen cihazda CSS fallback devreye girer.
- Three.js · GLSL shader
- Canvas frame-scrub
- DPR ≤ 1.5
- Lazy yükleme
- Reduced-motion
- Mobil fallback
WebGL / 3B web deneyimi, GPU'yu tarayıcı içinde kullanarak akışkan shader yüzeyler, 3B nesneler ve scroll'a senkron kare dizileri çalıştıran sitedir. Architype bunu Three.js ve özel GLSL shader'larla, sadece hero görünür olunca lazy yüklenen, ekran dışında duran ve WebGL yoksa CSS gradient'e düşen bir mimariyle kurar.
[ KISA CEVAP ] · Alıntılanabilir
Ana sayfamızın hero'su bunun canlı örneği: fareyle sıvılaşan akışkan dalga, scroll hızına bağlı chromatic aberration; Three.js sadece hero görününce yüklenir, hero ekran dışındayken render durur.
Her sahnede 3B gerekmez. Architype Roofs'ta video yerine 381 kareli WebP canvas dizisi kullandık: kaydırmaya birebir senkron, arama gecikmesi yok, tek statik dosya.
NELER
DAHİL
[ KAPSAM ] · Neler dahil
Shader tabanlı hero
Fare ve scroll'a tepki veren GLSL yüzeyler: akışkan dalga, dijital duman, RGB-split. Görsel gerekmez; doku prosedürel üretilir.
3B sahne & ürün
Model tabanlı 3B sahneler, ürün görselleştirme, kamera hareketi scroll'a bağlı. Işık ve malzeme markaya göre kurulur.
Canvas kare dizisi
Render ya da video karelerinin canvas'ta kaydırmaya senkron çizilmesi. Video arama gecikmesi yok, her kare bir sonraki boyamada yerinde.
Performans güvenliği
DPR ≤ 1.5, ekran dışında render durdurma, tek rAF, mobilde düşük çözünürlük ve parçacık kapalı. WebGL yoksa / reduced-motion ise CSS fallback; Three.js hiç yüklenmez.
NEDEN
ARCHITYPE
[ FARK ] · Neden şablon değil
Gösteri değil, anlam
3B ve shader, markanın söylediğini büyüten bir araçtır; gürültü değil. Nerede WebGL, nerede canvas, nerede sadece CSS kullanılacağına birlikte karar veriyoruz.
Ölçülü teknoloji: her efekt bir performans bütçesiyle gelir. Hedef her cihazda akıcı 60fps, düşük bellekli telefon dahil.
Sıfırdan, eklentisiz
Hazır 3B site şablonu ya da no-code WebGL aracı kullanmıyoruz. Shader'lar ve sahne kodu projeye özel yazılır; site tek statik dosya olarak da yayınlanabilir.
Web tasarımı, marka kimliği ve WebGL aynı ekipte; teknik sürprizler tasarımın sonunda değil başında çözülür.
ÜÇ
ADIM
[ SÜREÇ ] · Nasıl çalışıyoruz
Keşif
& strateji
Markanı, kitleni ve hedefini dinliyoruz. Rakip analizi, konumlandırma ve net bir yol haritası.
Tasarım
& konsept
Konsept, görsel dil, prototip. Her aşamada şeffaf geri bildirim; sürpriz değil, ortak karar.
Uygulama
& lansman
Geliştirme, test, yayın. 60fps performans, SEO ve lansman sonrası destek dahil. Tipik proje 3-7 gün.
İŞLERE
BAK
[ KANIT ] · Seçili işler
Architype Roofs
Çatı firması için sinematik, kaydırma-sürümlü marka deneyimi: 381 kareli canvas dizisi, brütalist sistem, GSAP ScrollTrigger.
(02)Architype Architecture
Mimarlık stüdyosu için editoryal, krem, tipografi-odaklı konsept site. Roofs'un tam tersi; tek kalıbımız olmadığının kanıtı.
(03)Tüm işler & vaka çalışmaları
Problem → Çözüm → Sonuç formatında vaka çalışmaları ve canlı site linkleri.
SORU
CEVAP
[ SSS ] · Sıkça sorulanlar
WebGL nedir, neden web sitesinde kullanılır?
WebGL, tarayıcının GPU'yu eklenti olmadan kullanmasını sağlayan bir standarttır. Web sitesinde akışkan shader yüzeyler, 3B nesneler ve gerçek zamanlı efektler için kullanılır; markayı bir deneyim olarak anlatmanın en güçlü yollarından biridir.
WebGL siteler mobilde çalışır mı?
Evet, doğru kurulursa. Architype mobilde shader çözünürlüğünü düşürür, parçacıkları kapatır, DPR'ı sınırlar ve kare dizilerini seyreltir. WebGL desteği yoksa ya da kullanıcı reduced-motion seçmişse CSS fallback devreye girer; Three.js hiç indirilmez.
3B web deneyimi SEO'ya zarar verir mi?
Hayır, içerik HTML'de kalırsa. Metinler, başlıklar, JSON-LD ve meta veriler canvas'ın dışında, tarayıcı ve arama motorunun okuyabildiği HTML olarak durur; WebGL yalnızca görsel katmandır.
Video yerine neden canvas kare dizisi?
Kaydırmaya bağlı sahnelerde video 'arama' (seek) gecikmesi yüzme hissi yaratır. Önceden decode edilmiş kareleri canvas'a çizmek her karenin bir sonraki boyamada yerinde olmasını sağlar. Roofs'ta 381 kare böyle çalışıyor.
Süre ve bütçe?
Kapsama göre esnek. Shader'lı bir hero birkaç gün, tam 3B sahne daha uzun sürer. İlk görüşme ve teklif ücretsiz.
[ İLETİŞİM ] · İlk görüşme ve teklif ücretsiz
GETARCHITYPED
E-posta: [email protected] · WhatsApp: +90 546 403 26 58 · Instagram/X: @getarchityped. Uzaktan, dünya geneli, TR/EN.