WebGL ile sıvı etkileri nasıl oluşturulur

Birçok web tasarımcısı, sitelerinin tasarımlarına büyük bir etki katmanın yollarını arar, böylece kullanıcılarının dikkatini çekeceklerdir. Yöntemler, bir başlık grafiğini kullanmaktan, bir başlık grafiğini kullanmaktan, açılış sayfası menüsünün altına bir slayt gösterisi koymak için, tam tarayıcı genişliği haline getirmek için - ve şimdi sitelerin büyük çoğunluğu bu aynı formatı izler ( Web Sitesi Oluşturucu ).

Bugün, farklı Web Ödülleri sitelerinde 'günün yerini' kazanan tasarımlar genellikle biraz daha benzersiz bir şey yapar ve bir şey yapar ve webgl bunun için harika. Etkileşimli bir eleman eklemek, kullanıcıların dikkatini çekebilir ve bunun yeni ziyaret ettikleri diğer sitelerle aynı olmadığını gösterebilir. Bir siteyi sadece dev bir slayt gösterisine ve bazılarına sahip olmaktan çok daha ilginç kılar. paralaks kaydırma . Karmaşık ihtiyaçları olan bir siteniz varsa, emin olun ağ sağlayıcısı Servis noktasında.

• 14 Büyük Açılış Sayfası Tasarımları

Bu eğitimde bir sıçrama etkisi yapmak için, bir sıvı, yansıtıcı bir yüzey eklenecek ve bu, kameraya doğru ilerleyen dalgalarla hareket ettirilecektir. Ayrıca görünüşü ve hisleri tamamlamak için ilerleyen parçacıklar da olacaktır. Merkezde sitenin logosu olacak ve tüm sahne kullanıcının fare hareketine tepki gösterecek, böylece içeriğin 3B'yi gerçekten öne çıkarmasıdır.

logo tasarımı şeffaf bir png olarak verilir (onu güvende tutmak Bulut depolama ), bu yüzden bu kolayca kendi tasarımınıza göre özelleştirilebilir. Işıklar aynı zamanda renklerin etrafta dolaşacak ve sahne içindeki farklı dalgaları vurgulayacak şekilde canlandıracak.

Dosyaları indirin Bu eğitim için.

01. İlk değişkenler ekleyin

Başlat klasörünü proje dosyalarından açın ve bunu kod düzenleyicinize sürükleyin. Açıkça index.html 'Ve JavaScript kütüphanelerinin zaten sizin için bağlantılı olduğunu göreceksiniz. Boş komut dosyası etiketlerinin içinde kodun gideceği yerdir. Burada WebGL, projenin çalıştırılabileceğinden emin olmak için tespit edilir, daha sonra sahnede kullanılacak bir sürü değişken aralığı eklenir.

 Eğer (! Detector.webgl) detector.addgetwebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
var renderer, kamera, sahne, movergroup, döşemeometri, floormalyal, pointlight, pointlight2, pgeometri;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var noisescale = 9.5;
var noiseseed = math.random () * 100; 

02. Daha fazla değişken oluşturun

Bir sonraki değişken bloğu, su zeminin ne kadar büyük olması gerektiğini ve ilk fare pozisyonları ile birlikte hareket edeceği hızı sağlar. Ekranın merkezi yapılır ve suyun yüzeyini oluşturmak için geliştirilmiş gürültü kütüphanesi kullanılıyor.

 var floor_width = 3600;
var floor_depth = 4800;
var move_spd = 1.9;
var mousex = 0;
var mousey = 0;
var windowhalfx = window.innerwidth / 2;
var windowhalfy = window.innerheight / 2;
var snoise = yeni prospednoise ();
var textureloader = yeni three.textureloader (); 

03. Fareyi hesaplayın

Sahnenin işleme sonrası etkileri için bazı son değişkenler eklenir. Fare hareketini kontrol eden bir olay dinleyicisi eklenir. Sahne, fare hareketine tepki vermek için ekran bağlantı noktasında hareket edecek. Buraya eklenen fonksiyon, izin verilen hareketin miktarını gösterir.

04. Mesaj İşleme Ayarlarını Değiştirin

' parametreler 'İşlev, işlem sonrası efektlerin tüm ayarlarının depolandığı yerlerdedir. Bir şeyi değiştirmeniz gerekiyorsa, bu yapmak için yer burasıdır. Eğim kayması bulanıklığı, ilk dört satırda ele alınır, ardından film kalan çizgilerde geçer. Bu, esas olarak ekran yoğunluğu ve gürültü yoğunluğu içindir.

05. Son parametreleri ayarlayın

Parametrelerin sonuncusu, ekranın kenarındaki karanlık vignette içindir. ' içinde ' ve ' canlandırmak 'fonksiyonlar çalışmaya çağrılır. ' canlandırmak 'İşlev, öğreticide çok daha sonra yaratılacak,' içinde 'İşlev burada yaratıldı. Kamera ve sahne, 3B içeriğin görüntülenmesini sağlamak için ayarlanır.

 EffectVignette.Uniforms ["ofset"]. Değer = 1.0;
  EffectVignette.Uniforms ["Darkness"].value = 1.3;
}
içinde();
canlandırmak ();
İşlev Init () {
  kamera = yeni three.Perspectivecamera (70, window.innerwidth / window.innerheight, 1, 4000);
  camera.position.z = 2750;
  sahne = yeni üç.scene ();
  sahne.fog = yeni üç.fogexp2 (0x1c3c4a, 0.00045); 

06. Işığın içeri girmesine izin verin

Sahnenin içeriğini görmek için dört ışık yerleştirilecektir. Birincisi, sadece sahnenin temel ambiyansını almak için kullanılan bir yarım küre ışığıdır. SONRA YUKARI, sahnenin ortasında açık mavi ışık ekleyen merkez ışığıdır. Bu, tüm sahneye biraz ışık vermek için bir tarafa ayrılmıştır.

 VAR HEMISPHERIGHT = Yeni üç.Hemispheright (0xe3feff, 0xe6ddc8, 0.7);
sahne.add (hemisferikight);
hemispherelight.position.y = 300;
var centerlight = yeni üç.Spotlight (0xb7f9ff, ​​1);
sahne.add (orta ışık);
centerlight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
Centerlight.decay = 5; 

07. Işıkları Animate

Eklenecek sonraki iki ışık. ' Poinlight ' ve ' Pointlight2 'Olay etrafındaki ters yönde daire içine alınacak renkli ışıklardır, böylece ışık görünümde sürekli değişir. Birincisi pembe bir ışıktır ve ikincisi turuncu bir ışıktır. Yansıma görüntülerinin yolu ve formatı son iki satırda ayarlanır.

 pointlight = yeni üç.Pointlight (0xe07bff, 1.5);
pointlight.position.z = 200;
sahne.add (pointlight);
pointlight2 = yeni üç.Pointlight (0xff4e00, 1.2);
pointlight2.position.z = 200;
sahne.add (pointlight2);
var yolu = "img /";
var formatı = '.jpg'; 

08. Parlak yüzeyler

Sıvı yüzey yansıtıcı, parlak bir yüzeye sahip olacak ve bu bir yansıma küpü oluşturarak yapılır. Bu, içine yerleştirilen 360 derecelik SkyBox'a sahip bir küpdür, bu sıvının yüzeyine yansıtılacaktır. ' URL'ler 'Dizi, yüklenecek görüntüleri içerir, daha sonra malzeme kurulur.

09. Bazı gruplar kurun

Taşıyıcı grubu daha sonra eklenecek bazı parçacıklar içerecektir, zemin grubu sıvının yüzeyini içerecektir. Bu yüzeyi tutacak olan yeni bir 3D nesne oluşturulur. İki sıvı yüzey olacaktır; Biri yansıtıcı malzemeye sahip olacak ve ikincisi tel kafes olacak ' floormalaşman ', burada tanımlandığı gibi.

 MOVERGROUP = yeni üç.Object3d ();
sahne.add (movergroup);
var zemin grubu = yeni üç.Object3d ();
var floormalyal = yeni üç.MeshphongMaterial ({
Renk: 0xeeeeee, Side: Three.Doubleside, Blending: Three.AddiTiveBlend, Wireframe: True
});
Floorgeometry = yeni üç.Planegeometri (Floor_Width + 1200, Floor_depth, Floor_res, Floor_res); 

10. Yüzeyleri yapın

İki sıvı yüzey burada oluşturulur. floormesh ' ve ' floormesh2 '. 'İçine yerleştirilir ve yerleştirilirler. yer grubu 'Daha sonra kameranın önündeki iyi bir görüş açısına döndürüldü. Bu doğrudan düz değil, ama böyle daha iyi göründüğü için hafifçe açıldı.

 var floormesh = yeni üç.Mesh (ZeminEometri, Kübemateryal);
var floormesh2 = yeni üç.Mesh (ZeminTegometri, Floormalyal);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
Zemingroup.add (floormesh);
floorgroup.add (floormesh2);
sahne.add (zemin grubu);
floormesh.Rotation.x = math.pi / 1.65;
floormesh2.Rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; 

11. Yüzer parçacıklar ekleyin

Buradaki kod bölümü boş bir geometri nesnesi oluşturur ve ardından partiküller gibi hareket eden 2.000 köşeye yerleştirilir. Bunlar, X, Y ve Z ekseni üzerindeki rastgele pozisyonlarda dağıtılır. Bunlar, sıvı zeminin yüzeyinin hemen üzerinde yüzer.

 PGEOMETRY = yeni üç.Geometri ();
sprite = textureloader.load ("img / sprite.png");
için (i = 0; I & lt; 2000; i ++) {
  VaR Vertex = Yeni Three.Vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertlex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pegometry.vertices.Push (Vertex);
} 

12. Bakışı oluşturun

Burada tanımlanan malzeme parçacıkların nasıl göründüğünü ayarlayacaktır. Önceki adımda bir görüntü yüklendi ve malzeme oluşturulduktan sonra her bir parçacıktaki görüntü olarak kullanılır. Bu daha sonra tüm parçacıklar için geometrinin her noktasına uygulanır. Bunlar daha sonra sahneye eklenir.

13. logoyu ekleyin

Ekranın ortasına bir logo yerleştirilecek ve bu, kamerayla karşılaşacak düz bir uçağa eklenecektir. Logo biraz şeffaf yapılır ve bir katkı maddesi karışımı verilir, böylece daha hafif nesneler arkasında geçerse daha görünür. Bu konumlandırılmış ve sahneye yerleştirilir.

 sprite = textureloader.load ("img / logo.png");
geometrisi = yeni üç.Planebuffergeometri (500, 640, 1);
malzeme = yeni üç.MeshlambertMaterial ({
  Şeffaf: True, opakal: 0.8, harmanlama: üç.AddiTivending, Harita: Sprite, Side: Üç.Doubleide
});
var düzlem = yeni üç.Mesh (geometri, malzeme);
uçak.position.set (0, 70, 1800);
sahne.add (uçak); 

14. Render ayarlarını ekleyin

Renderer, pürüzsüz, havalandırılmış kenarlara sahip olmalı ve şimdi arka plan rengi ayarlanmıştır. Bu, belgenin gövdesine eklenir, böylece sahne HTML sayfasında. İşleme sonrası efektler, çeşitli render ve gölgelendirici başladığından geçerek kurulur.

15. Geçidi yapın

Film ve aksaklık geçişi eklendikten sonra, tüm geçişleri bir araya getiren bir etki bestecisi oluşturulur. Bunlar birer birer besteciye eklenir ve sonunda izleyici teşhir için ekrana yapılır.

16. 'Init' işlevini kapatın

Sahnenin başlatılması için son birkaç ayar eklenir. İşleme sonrası parametreler ayarlanır, dalgaların ayarı aranır ve tarayıcı yeniden boyutlandırıldığında bir olay dinleyicisi eklenir. Bu, ekranın yeni boyutlara uyacak şekilde güncellenmesini sağlar.

17. Dalgaları ayarlayın

Dalgalar şimdi sıvının yüzeyi için oluşturulur. Bu, X ve Z ekseni üzerindeki zemin geometrisinin her bir tepesinden geçerek ve Y ekseni üzerinde yukarı doğru hareket ettirilerek yapılır. Bu aşamada ' için X ve Z ekseni için döngüler oluşturulur.

 fonksiyon setwaves () {
  stepcount ++;
  movergroup.position.z = -move_spd;
  var i, iPos;
  var ofset = stepcount * move_spd / floor_depth * Floor_res;
  için (i = 0; I & LT; Floor_res + 1; i ++) {
  için (VAR J = 0; J & LT; Floor_res + 1; J ++) {
  iPOS = i + ofset; 

18. Dalgalar yapın

Tüm köşeler aynı şekilde yukarı doğru ölçeklendirilemez. Kameradan uzakta olanlar büyük olacaktır, daha sonra taraflar biraz daha az olacaktır ve kameraya en yakın olanlar en az ölçeklendirilecektir. Bu, arkayı ve tarafları bakmak için biraz daha ilginç hale getirir.

 Eğer (((i & gt; 30) || (J "|| (J & GT; 48)) {
  floorgeometry.vertices [i * (Floor_res + 1) + J] .z = snoise.noise (iPos / Floor_res * noisescale, j / floor_res * noisescale, noiseseed) * Floor_ht;
  } Diğerse (I & GT; 25 & amp; & amp; i & lt; 30) {
  floorgeometry.vertices [i * (Floor_res + 1) + j] .z = snoise.noise (iPos / Floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (Floor_ht / 1.2);
  } Başka {
  floorgeometry.vertices [i * (Floor_res + 1) + J] .z = snoise.noise (iPos / Floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (Floor_ht / 2);
  }
  }
  }
  floorgeometry.verticesneedupdate = true;
} 

19. yeniden boyutlandır ve canlandır

Pencere yeniden boyutlandırıldığında, buradaki fonksiyon, 16. adımda ayarlanan dinleyiciden çağrılır. Kamera, oluşturucu ve besteci, tarayıcının penceresinin yeni boyutlarını eşleştirmek için burada sıfırlanır. Animate işlevi, ekranı güncellemek için Render işlevini çağıran, 60FPS'de kendini ayarlar.

 fonksiyonu onwindowresize () {
  camera.aspect = window.innerwidth / window.innerheight;
  camera.UpdateProjectionMatrix ();
  renderer.Setsize (window.innerwidth, window.innerheight);
  besteci.Setsize (window.innerwidth, window.innerheight);
}
fonksiyon animate () {
  RequestanimationFrame (animate);
  render ();
} 

20. Her eylem çerçevesini ayarlayın

Render işlevi her çerçevede denir. Nokta lambaları, sahnede etrafında yörüngede yer almakta ve kamera, yavaş yavaş yerine hareket etmesi için biraz gevşeterek, fare hareketine göre konumlandırılmıştır. Kamera her zaman sahnenin ortasına bakacak şekilde ayarlanmıştır.

fonksiyon render () {
  var zamanlayıcı = -0.0002 * date.Now ();
  pointlight.position.x = 2400 * Math.cos (zamanlayıcı);
  pointlight.position.z = 2400 * Math.Sin (zamanlayıcı);
  pointlight2.position.x = 1800 * Math.cos (-Timer * 1.5);
  pointlight2.position.z = 1800 * Math.Sin (-Timer * 1.5);
  camera.position.x + = (mousex - camera.position.x) * .05;
  camera.position.y + = (-mousey - camera.position.y) * .05;
Camera.Lookat (Scene.Position); 

21. Sahneyi render

Son adımda, parçacıklar bireysel tepe noktalarında ileriye doğru hareket ettirilir ve kameraya ulaşırlarsa, mesafeye geri yerleştirilirler. Bu güncellendi ve ' Setwaves ' Dalgaların öne doğru yuvarlanması için işlev çağrılır. Sahne, Etkileri Besteci tarafından oluşturulur.

Bu makale başlangıçta yaratıcı web tasarım dergisinde yayınlandı Web tasarımcısı . Burada web tasarımcısına abone olun .

İlgili Makaleler:

• Üç.js kullanarak webgl ile başlayın
• Daha iyi logolar oluşturmak için 11 adım
• 18 Web Tasarımı İzlemeniz Gereken YouTube Kanalları