Bu site: web sitesi, yazılım

Şu an baktığınız site. Girişte işlerin yüzlerine basılı dönen bir küp, sonra kameranın aralarından geçtiği bir galeri — hepsi kendi shader'larıyla.

• 2 mod
• Özel shader
• Telefonda 18 KB
• Kendi altyapım

Sorun neydi

Portfolyo sitesinin iki işi var ve bu ikisi genelde birbirini yer: yetenek göstermek ve telefondan açan müşteriyi kaçırmamak. Gösterişli site telefonda ağır açılır, hızlı site sıradan görünür. Bu sitenin en çok açıldığı yer ise Armut sohbeti, yani telefon.

Ne yaptım

• Three.js sahnesi; düzlemler ve elmaslar için ayrı vertex ve fragment shader'ları
• Girişte altı işin yüzlerine basılı, kaydırmayla dönen küp
• Kaydırma hızına bağlı büküm ve renk kayması, sınırlandırılmış hız
• Cihaza göre 3B / 2B mod seçimi — tek karar noktası, tek içerik kaynağı
• Yerleşik CSS kaydırma animasyonu, desteklenmeyen tarayıcıda Intersection Observer
• Beş gizli etkileşim; konsol, 404, boş durma, hover ve klavye
• Yayın öncesi kendi QA aracından geçiyor

Zor kısım

Karar tek noktaya toplandı: cihazın çekirdek sayısı, belleği, ağ hızı, işaretçi türü ve hareket tercihi okunuyor; biri bile elverişsizse Three.js hiç indirilmiyor. Sahne tarafında iki ayrı tuzak vardı — kamera düzlemlerin içinden geçerken ekran doluyordu, çıkan düzlem artık kameraya varmadan eriyor; ani kaydırmada shader patlıyordu, hız sınırlandı. İçerik her iki modda da DOM'da duruyor, yani arama motoru ve ekran okuyucu için hiçbir şey WebGL'in arkasında kaybolmuyor.

Sonuç

Masaüstünde gösteri, telefonda 18 KB betikle açılan hızlı bir site. QA dört adreste temiz: ana sayfa, iki mod ve 404.

Kullanılanlar

• Three.js
• GLSL
• Vite
• Lenis