วิธีสร้างเอฟเฟกต์ของเหลวกับ WebGL

นักออกแบบเว็บไซต์จำนวนมากมองหาวิธีเพิ่มผลกระทบอย่างมากต่อการออกแบบเว็บไซต์ของพวกเขาเพื่อที่พวกเขาจะดึงดูดความสนใจของผู้ใช้ วิธีการมีวิวัฒนาการในช่วงหลายปีที่ผ่านมาจากการใช้กราฟิกส่วนหัวเพื่อวางสไลด์โชว์ใต้เมนูหน้า Landing Page ให้กลายเป็นความกว้างของเบราว์เซอร์แบบเต็ม - และตอนนี้เว็บไซต์ส่วนใหญ่ที่มีรูปแบบเดียวกันนี้ (สร้างของคุณเองได้อย่างง่ายดายด้วย สร้างเว็บไซต์ .

วันนี้การออกแบบที่ชนะ 'เว็บไซต์ของวัน' ในเว็บไซต์เว็บที่แตกต่างกันโดยทั่วไปลองทำสิ่งที่มีเอกลักษณ์มากขึ้นและ WebGL นั้นยอดเยี่ยมสำหรับสิ่งนี้ การเพิ่มองค์ประกอบแบบอินเทอร์แอคทีฟสามารถดึงดูดความสนใจของผู้ใช้และแสดงว่าสิ่งนี้ไม่เหมือนกับเว็บไซต์อื่น ๆ ที่พวกเขาเพิ่งเยี่ยมชม มันทำให้เว็บไซต์น่าสนใจยิ่งกว่าการสไลด์โชว์ยักษ์และบางอย่าง Parallax Scrolling . หากคุณมีเว็บไซต์ที่มีความต้องการที่ซับซ้อนตรวจสอบให้แน่ใจ เว็บโฮสติ้ง บริการอยู่ในจุด

• 14 การออกแบบหน้าลงจอดที่ยอดเยี่ยม

เพื่อให้เอฟเฟกต์สแปลชในบทช่วยสอนนี้เป็นของเหลวพื้นผิวสะท้อนแสงจะถูกเพิ่มและสิ่งนี้จะเคลื่อนไหวต่อกล้องที่มีคลื่นกลิ้งก้าวไปข้างหน้า นอกจากนี้ยังมีอนุภาคที่ก้าวไปข้างหน้าเพื่อให้รูปลักษณ์และความรู้สึกเสร็จสมบูรณ์ ในศูนย์จะเป็นโลโก้ของไซต์และฉากทั้งหมดจะตอบสนองต่อการเคลื่อนไหวของเมาส์ของผู้ใช้เพื่อให้เนื้อหาเปลี่ยนและทำให้ 3D โดดเด่นจริงๆ

ที่ ออกแบบโลโก้ แสดงผลเป็น png โปร่งใส (ทำให้ปลอดภัยใน การจัดเก็บเมฆ ) ดังนั้นสิ่งนี้สามารถปรับแต่งได้อย่างง่ายดายในการออกแบบของคุณเอง ไฟจะเคลื่อนไหวด้วยเพื่อให้สีจะโคจรรอบและเน้นคลื่นที่แตกต่างกันภายในฉาก

ดาวน์โหลดไฟล์ สำหรับการกวดวิชานี้

01. เพิ่มตัวแปรเริ่มต้น

เปิดโฟลเดอร์เริ่มต้นจากไฟล์โครงการและลากสิ่งนี้ลงในโปรแกรมแก้ไขโค้ดของคุณ เปิด ' index.html 'และคุณจะเห็นว่าห้องสมุด JavaScript ได้เชื่อมโยงกับคุณแล้ว ภายในแท็กสคริปต์ที่ว่างเปล่าเป็นที่ที่รหัสจะไป ตรวจพบ WebGL ที่นี่เพื่อให้แน่ใจว่าโครงการสามารถเรียกใช้ได้จากนั้นมีการเพิ่มตัวแปรทั้งหมดที่จะใช้ในฉาก

 ถ้า (! เครื่องตรวจจับ. webgl) detector.addgetwebglmessage ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
var renderer, กล้อง, ที่เกิดเหตุ, ผู้ movergroup, พื้น, flosorialial, pliptlight, pliptlight2, pgeometry;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
Var Noisescale = 9.5;
Var Noiseseed = Math.Random () * 100; 

02. สร้างตัวแปรเพิ่มเติม

บล็อกตัวแปรต่อไปจัดการขนาดของพื้นน้ำที่ควรจะเป็นและความเร็วที่จะเคลื่อนที่พร้อมกับตำแหน่งเมาส์เริ่มต้น ศูนย์กลางของหน้าจอทำงานออกมาและมีการใช้ไลบรารีเสียงรบกวนที่ดีขึ้นเพื่อสร้างพื้นผิวของน้ำ

 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 = New Improvednoise ();
Var TextURELoader = New Three.TextureLoader (); 

03. คำนวณเมาส์

ตัวแปรสุดท้ายบางตัวถูกเพิ่มสำหรับผลการประมวลผลโพสต์ของฉาก มีการเพิ่มผู้ฟังเหตุการณ์ที่ตรวจสอบการเคลื่อนไหวของเมาส์ ฉากกำลังจะย้ายไปอยู่ในพอร์ตจอแสดงผลเพื่อตอบสนองต่อการเคลื่อนไหวของเมาส์ ฟังก์ชั่นที่เพิ่มเข้ามาในที่นี้ใช้จำนวนการเคลื่อนไหวที่ได้รับอนุญาต

04. เปลี่ยนการตั้งค่าการประมวลผลโพสต์

' พารามิเตอร์ ฟังก์ชั่น 'เป็นที่ที่การตั้งค่าทั้งหมดสำหรับเอฟเฟกต์การประมวลผลโพสต์จะถูกเก็บไว้ หากคุณต้องการเปลี่ยนอะไรนี่คือสถานที่ที่จะทำ การเปลี่ยนการเอียงเบลอได้รับการคุ้มครองในสี่บรรทัดแรกจากนั้นฟิล์มจะผ่านในบรรทัดที่เหลือ นี่คือส่วนใหญ่สำหรับความเข้มของหน้าจอและความเข้มของเสียงรบกวน

05. ตั้งค่าพารามิเตอร์สุดท้าย

พารามิเตอร์สุดท้ายนี้มีไว้สำหรับภาพย่อที่มืดรอบขอบของหน้าจอ ' ในนั้น 'และ' ทำให้เคลื่อนไหว ฟังก์ชั่นเรียกว่าการทำงาน ' ทำให้เคลื่อนไหว 'ฟังก์ชั่นจะถูกสร้างขึ้นในภายหลังในบทช่วยสอน แต่' ในนั้น 'ฟังก์ชั่นถูกสร้างขึ้นที่นี่ ตั้งค่ากล้องและฉากเพื่อให้สามารถดูเนื้อหา 3 มิติ

 EffectVignette.uniforms ["ออฟเซ็ต"] ค่า = 1.0;
  EffectVignette.uniforms ["ความมืด"].Value = 1.3;
}
ในนั้น();
Animate ();
ฟังก์ชั่น init () {
  กล้อง = ใหม่ three.perspectiveCamera (70, window.innerwidth / window.innerheight, 1, 4000);
  camera.position.z = 2750;
  ฉาก = ใหม่สาม.Scene ();
  scene.fog = ใหม่สาม.fogexp2 (0x1c3c4a, 0.00045); 

06. ปล่อยให้แสงเข้า

เพื่อที่จะเห็นเนื้อหาของฉากสี่ไฟจะถูกวางไว้ ครั้งแรกคือแสงซีกโลกซึ่งใช้เพื่อให้ได้บรรยากาศขั้นพื้นฐานของฉาก ถัดไปเป็นแสงกลางที่เพิ่มแสงสีฟ้าอ่อนในกลางของฉาก สิ่งนี้ถูกตั้งค่าไปยังด้านหนึ่งเพื่อให้แสงสว่างแก่ฉากทั้งหมด

 Var Hemispherelight = ใหม่สาม. Hemispherelight (0xE3Feff, 0xE6DDC8, 0.7);
Scene.add (hemispherelight);
Hemispherelight.position.y = 300;
var centerlight = new three.spotlight (0xb7f9ff, ​​1);
scene.add (centerlight);
centerlight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
centerlight.decay = 5; 

07. ไฟเคลื่อนไหว

สองไฟถัดไปที่จะเพิ่ม ' จุดไฟ 'และ' POINTLIGHT2 'เป็นไฟสีที่จะวนเวียนในทิศทางตรงกันข้ามรอบ ๆ ฉากเพื่อให้แสงสว่างเปลี่ยนไปในมุมมองอย่างต่อเนื่อง ครั้งแรกคือแสงสีชมพูและที่สองคือแสงสีส้ม เส้นทางและรูปแบบสำหรับภาพสะท้อนถูกตั้งค่าในสองบรรทัดสุดท้าย

 POINTLIGHT = ใหม่สามจุดไฟ (0xE07BFF, 1.5);
POINTLIGHT.Position.z = 200;
Scene.add (จุดไฟ);
POINTLIGHT2 = ใหม่สามจุดไฟ (0xFF4E00, 1.2);
pointlight2.position.z = 200;
scene.add (pointlight2);
var path = "img /";
รูปแบบ var = '.jpg'; 

08. พื้นผิวมันวาว

พื้นผิวของเหลวจะมีพื้นผิวสะท้อนแสงเงางามและสิ่งนี้ทำได้โดยการสร้างลูกบาศก์สะท้อน นี่คือลูกบาศก์ที่มี Skybox 360 องศาวางอยู่ภายในซึ่งจะสะท้อนให้เห็นบนพื้นผิวของของเหลว ' URL 'อาร์เรย์มีรูปภาพที่จะโหลดแล้ววัสดุจะถูกตั้งค่า

09. ตั้งกลุ่มบางกลุ่ม

กลุ่มผู้เสนอญัตติจะมีอนุภาคบางอย่างที่จะเพิ่มในภายหลังในขณะที่กลุ่มพื้นจะมีพื้นผิวของของเหลว สร้างวัตถุ 3 มิติใหม่ที่จะเก็บพื้นผิวนั้นไว้ จะมีสองพื้นผิวของเหลว หนึ่งจะมีวัสดุสะท้อนแสงและที่สองจะมีโครงลวด ' ทางลอยน้ำ 'ตามที่กำหนดไว้ที่นี่

 movergroup = ใหม่สาม.Object3D ();
Scene.add (ผู้ movergroup);
var floorgroup = ใหม่สาม.Object3D ();
var florormaterial = ใหม่สาม. eshphongmaterial ({
สี: 0xeeeeee, side: three.double ไซด์, การผสม: สาม.AdduenceBlending, Wireframe: True
});
FloorGeometry = New Three.planeGeometry (floor_width + 1200, floor_depth, floor_res, floor_res); 

10. สร้างพื้นผิว

พื้นผิวของเหลวสองตัวถูกสร้างขึ้นที่นี่เป็น ' น้ำมูกลูก 'และ' floormesh2 . พวกเขาอยู่ในตำแหน่งและวางอยู่ภายใน ' กลุ่ม 'จากนั้นหมุนไปที่มุมมองที่ดีต่อหน้ากล้อง นี่ไม่ได้แบนโดยตรง แต่ทำมุมเล็กน้อยเมื่อดูดีขึ้นเช่นนั้น

 var floormesh = ใหม่สาม.Mesh (FloorGeometry, CubeMaterial);
Var Floormesh2 = ใหม่สาม.Mesh (FloorGeometry, Flosormaterial);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
floorgroup.add (floormesh);
floorgroup.add (floormesh2);
Scene.add (floorgroup);
floormesh.rotation.x = math.pi / 1.65;
floormesh2.rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; 

11. เพิ่มอนุภาคลอยน้ำ

ส่วนของรหัสที่นี่สร้างวัตถุรูปทรงเรขาคณิตที่ว่างเปล่าแล้ววางลงในจุดยอด 2,000 จุดที่ทำหน้าที่เป็นอนุภาค เหล่านี้กระจายอยู่ในตำแหน่งสุ่มบนแกน X, Y และ Z สิ่งเหล่านี้จะลอยอยู่เหนือพื้นผิวของพื้นเหลว

 PGEOMETRY = ใหม่สาม.30;
Sprite = textureloader.load ("img / sprite.png");
สำหรับ (i = 0; i & lt; 2000; i ++) {
  Var Vertex = New Three.Vector3 ();
  Vertex.x = 4000 * Math.Random () - 2000;
  Vertex.y = -200 + Math.Random () * 700;
  Vertex.z = 5000 * Math.Random () - 2000;
  Pgeometry.vertices.push (จุดสุดยอด);
} 

12. สร้างรูปลักษณ์

วัสดุที่กำหนดไว้ที่นี่จะตั้งวิธีการดูอนุภาค รูปภาพถูกโหลดในขั้นตอนก่อนหน้านี้และใช้เป็นภาพในแต่ละอนุภาคเมื่อสร้างวัสดุ สิ่งนี้จะถูกนำไปใช้กับแต่ละจุดของรูปทรงเรขาคณิตสำหรับอนุภาคทั้งหมด จากนั้นจะเพิ่มเข้าไปในฉาก

13. เพิ่มโลโก้

โลโก้จะถูกวางไว้ในกึ่งกลางของหน้าจอและสิ่งนี้จะถูกเพิ่มลงบนระนาบแบนที่จะเผชิญกับกล้อง โลโก้ทำโปร่งใสเล็กน้อยและได้รับการผสมผสานสารเติมแต่งเพื่อให้มองเห็นได้มากขึ้นเมื่อวัตถุที่มีน้ำหนักเบาผ่านไป นี่คือตำแหน่งและวางลงในฉาก

 Sprite = textureloader.load ("img / logo.png");
เรขาคณิต = ใหม่สาม planeBuffergeometry (500, 640, 1);
วัสดุ = ใหม่สาม.Meshlambertmaterial ({
  โปร่งใส: TRUE, ความทึบแสง: 0.8, การผสม: Three.Addufferation, แผนที่: Sprite, Side: Three.DoubleSide
});
Var Plane = ใหม่สามเครื่อง (เรขาคณิตวัสดุ);
plane.position.set (0, 70, 1800);
Scene.add (เครื่องบิน); 

14. เพิ่มการตั้งค่าการแสดงผล

Renderer ถูกตั้งค่าให้มีขอบเรียบต่อต้านนามแฝงและตอนนี้สีพื้นหลังถูกตั้งค่า สิ่งนี้ถูกเพิ่มเข้าไปในเนื้อหาของเอกสารเพื่อให้ฉากอยู่ในหน้า HTML เอฟเฟ็กต์การประมวลผลโพสต์จะถูกตั้งค่าโดยการทำให้เรนเดอร์และ Shader ผ่านการเริ่มต้น

15. ทำผ่าน

เมื่อมีการเพิ่มฟิล์มและความผิดพลาดของนักแต่งเพลงเอฟเฟกเซอร์จะถูกสร้างขึ้นซึ่งประกอบไปด้วยการผ่านทั้งหมดเข้าด้วยกัน สิ่งเหล่านี้จะถูกเพิ่มทีละคนให้กับนักแต่งเพลงและในที่สุดก็จะถูกแสดงผลในหน้าจอสำหรับการแสดงผู้ชม

16. ปิดฟังก์ชั่น 'เริ่มต้น'

การตั้งค่าไม่กี่ครั้งสุดท้ายจะถูกเพิ่มสำหรับการเริ่มต้นของฉาก พารามิเตอร์สำหรับการประมวลผลโพสต์ถูกตั้งค่าการตั้งค่าของคลื่นเรียกว่าและมีการเพิ่มผู้ฟังเหตุการณ์สำหรับทุกครั้งที่เบราว์เซอร์ถูกปรับขนาด สิ่งนี้ทำให้จอแสดงผลสามารถอัปเดตเพื่อให้พอดีกับมิติใหม่

17. ตั้งค่าคลื่น

คลื่นถูกสร้างขึ้นในขณะนี้สำหรับพื้นผิวของของเหลว สิ่งนี้ทำได้โดยการเคลื่อนย้ายผ่านจุดสุดยอดของพื้นเรขาคณิตบนแกน x และ z และขยับขึ้นบนแกน Y ในขั้นตอนนี้ ' สำหรับ 'ลูปถูกสร้างขึ้นสำหรับแกน X และ Z

 ฟังก์ชั่น setwaves () {
  ลูกหมาก ++;
  movergroup.position.z = -move_spd;
  var i, ipos;
  var offset = stepcount * move_spd / floor_depth * floers_res;
  สำหรับ (i = 0; i & lt; floor_res + 1; i ++) {
  สำหรับ (var j = 0; j & lt; floor_res + 1; j ++) {
  ipos = i + ชดเชย; 

18. ทำคลื่น

จุดยอดไม่ทั้งหมดจะถูกปรับขนาดขึ้นในลักษณะเดียวกัน ผู้ที่อยู่ไกลที่สุดจากกล้องจะมีขนาดใหญ่แล้วด้านข้างจะน้อยกว่าเล็กน้อยและใกล้ที่สุดกล้องจะถูกปรับขนาดอย่างน้อยที่สุด สิ่งนี้ทำให้ด้านหลังและด้านข้างน่าสนใจเล็กน้อยที่จะดู

 ถ้า ((ฉัน & gt; 30) || (J & LT; 12) || (J & GT; 48)) {
  FloorGeometry.Vertices [I * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * floor_ht;
  } อื่นถ้า (ฉัน & 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);
  } อื่น {
  FloorGeometry.Vertices [I * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floor_res * noisescale, noiseseed) * (floor_ht / 2);
  }
  }
  }
  FloorGeometry.VertIESSNEEDDATE = TRUE;
} 

19. ปรับขนาดและเคลื่อนไหว

เมื่อหน้าต่างถูกปรับขนาดฟังก์ชันที่นี่ถูกเรียกจากผู้ฟังที่ตั้งค่าในขั้นตอนที่ 16 กล้องเรนเดอร์และนักแต่งเพลงจะถูกรีเซ็ตทั้งหมดที่นี่เพื่อให้ตรงกับมิติใหม่ของหน้าต่างของเบราว์เซอร์ ฟังก์ชั่นเคลื่อนไหวเพียงแค่ตั้งค่าตัวเองที่ 60fps เรียกฟังก์ชั่นการแสดงผลเพื่ออัปเดตจอแสดงผล

 ฟังก์ชั่น onwindowresize () {
  camera.aspect = window.innerwidth / window.innerheight;
  Camera.UpDateProunionMatrix ();
  renderer.setsize (window.innerwidth, window.innerHeight);
  composer.setsize (window.innerwidth, window.innerheight);
}
ฟังก์ชั่นเคลื่อนไหว () {
  SecureSimationFrame (Animate);
  แสดงผล ();
} 

20. ตั้งค่าทุกเฟรมของการกระทำ

ฟังก์ชั่นการแสดงผลเรียกว่าทุกเฟรม ไฟจุดถูกตั้งค่าเป็นวงโคจรรอบ ๆ ในฉากและกล้องอยู่ในตำแหน่งตามการเคลื่อนไหวของเมาส์ด้วยการผ่อนคลายเล็กน้อยเพื่อให้มันเคลื่อนไหวค่อยๆเข้าที่ กล้องถูกตั้งค่าให้ดูที่ศูนย์กลางของฉากเสมอ

ฟังก์ชั่นแสดงผล () {
  Var Timer = -0.0002 * Date.now ();
  pointlight.position.x = 2400 * math.cos (ตัวจับเวลา);
  pointlight.position.z = 2400 * math.sin (ตัวจับเวลา);
  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. ทำให้ฉาก

ในขั้นตอนสุดท้ายของอนุภาคจะถูกย้ายไปข้างหน้าในจุดสุดยอดของแต่ละบุคคลและหากพวกเขาไปที่กล้องพวกเขาจะถูกวางไว้ในระยะทาง นี่คือการปรับปรุงและ ' setwaves ' ฟังก์ชั่นถูกเรียกให้ทำให้คลื่นหมุนไปข้างหน้า ฉากจะแสดงผลโดยนักแต่งเพลงเอฟเฟกต์

บทความนี้ได้รับการตีพิมพ์ในนิตยสารออกแบบเว็บสร้างสรรค์ นักออกแบบเว็บไซต์ . สมัครสมาชิกกับนักออกแบบเว็บไซต์ที่นี่ .

บทความที่เกี่ยวข้อง:

• เริ่มต้นกับ WebGL โดยใช้ Three.js
• 11 ขั้นตอนในการสร้างโลโก้ที่ดีกว่า
• 18 ช่อง YouTube ออกแบบเว็บที่คุณต้องการดู