How to create liquid effects with WebGL

कई वेब डिज़ाइनर अपने साइट डिज़ाइनों पर एक बड़ा प्रभाव जोड़ने के तरीकों की तलाश करते हैं, ताकि वे अपने उपयोगकर्ताओं का ध्यान आकर्षित कर सकें। पिछले कुछ वर्षों में, एक हेडर ग्राफ़िक का उपयोग करने से, एक शीर्षलेख ग्राफिक का उपयोग करने से, लैंडिंग पृष्ठ मेनू के तहत एक स्लाइड शो रखने के लिए, पूर्ण ब्राउज़र चौड़ाई बनने के लिए - और अब अधिकांश साइटें इसी प्रारूप का पालन करती हैं (अपने स्वयं को आसानी से बनाएं वेबसाइट निर्माता )।

आज, विभिन्न वेब पुरस्कार साइटों पर 'दिन की साइट' जीतने वाले डिज़ाइन आम तौर पर कुछ और अद्वितीय कुछ करने की कोशिश करते हैं, और वेबजीजीएल इसके लिए बहुत अच्छा है। एक इंटरैक्टिव तत्व जोड़ना वास्तव में उपयोगकर्ताओं के ध्यान को पकड़ सकता है और यह दिखाता है कि यह अन्य साइटों के समान नहीं है जो उन्होंने अभी देखी हैं। यह एक विशाल स्लाइड शो और कुछ होने से कहीं अधिक दिलचस्प बनाता है लंबलक्स स्क्रॉलिंग । यदि आपके पास जटिल आवश्यकताओं वाली साइट है, तो सुनिश्चित करें कि आपका वेब होस्टिंग सेवा बिंदु पर है।

• 14 ग्रेट लैंडिंग पेज डिज़ाइन

01. प्रारंभिक चर जोड़ें [5 9]

प्रोजेक्ट फ़ाइलों से स्टार्ट फ़ोल्डर खोलें और इसे अपने कोड संपादक में खींचें। खुला हुआ ' index.html 'और आप देखेंगे कि जावास्क्रिप्ट पुस्तकालयों को पहले ही आपके लिए जोड़ा जा चुका है। खाली स्क्रिप्ट टैग के अंदर वह जगह है जहां कोड जाएगा। यहां वेबजीएल को यह सुनिश्चित करने के लिए पता चला है कि प्रोजेक्ट चलाया जा सकता है, फिर चर की एक पूरी श्रृंखला को जोड़ा जाता है जिसका उपयोग दृश्य में किया जाएगा।

 अगर (! डिटेक्टर.वेबगली) डिटेक्टर.एडगेटवेबग्लमेसेज ();
var screen_width = window.innerwidth;
var screen_height = window.innerheight;
var rendener, कैमरा, दृश्य, मोवर समूह, foolgeometry, slowormaterial, pointlight, portight2, pgeometry;
var floor_res = 60;
var floor_ht = 650;
var stepcount = 0;
var noisescale = 9.5;
var noiseseed = math.random () * 100; 

02. अधिक चर बनाएँ [5 9]

चर का अगला ब्लॉक संभालता है कि पानी की मंजिल कितनी बड़ी होनी चाहिए और गति जो प्रारंभिक माउस पदों के साथ आगे बढ़ेगी। स्क्रीन का केंद्र तैयार किया गया है और पानी की सतह बनाने के लिए बेहतर शोर पुस्तकालय का उपयोग किया जा रहा है।

 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.innerhehight / 2;
var snoise = नया सुधार ();
var textureloader = नया तीन.textureloader (); 

03. माउस की गणना करें [5 9]

कुछ अंतिम चर दृश्य के बाद प्रसंस्करण प्रभाव के लिए जोड़े जाते हैं। एक ईवेंट श्रोता जोड़ा जाता है जो माउस आंदोलन की जांच करता है। यह दृश्य माउस आंदोलन पर प्रतिक्रिया करने के लिए डिस्प्ले पोर्ट में स्थानांतरित होने जा रहा है। यहां जो फ़ंक्शन जोड़ा गया है वह आंदोलन की अनुमति की अनुमति देता है।

04. पोस्ट प्रोसेसिंग सेटिंग्स बदलें [5 9]

' पैरामीटर 'फ़ंक्शन वह जगह है जहां पोस्ट प्रोसेसिंग प्रभावों के लिए सभी सेटिंग्स संग्रहीत की जाएंगी। यदि आपको कुछ भी बदलने की जरूरत है, तो यह करने के लिए यह जगह है। झुकाव शिफ्ट ब्लर पहली चार लाइनों में शामिल है, फिर फिल्म शेष लाइनों में गुजरती है। यह मुख्य रूप से स्क्रीन तीव्रता और शोर तीव्रता के लिए है।

05. अंतिम पैरामीटर सेट करें [5 9]

पैरामीटर का अंतिम भाग स्क्रीन के किनारे के चारों ओर अंधेरे विग्नेट के लिए है। ' इस में ' तथा ' चेतन 'कार्यों को चलाने के लिए बुलाया जाता है। ' चेतन 'फ़ंक्शन को बाद में ट्यूटोरियल में बनाया जाएगा, लेकिन' इस में 'समारोह यहां बनाया गया है। 3 डी सामग्री को देखने की अनुमति देने के लिए कैमरा और दृश्य स्थापित किए गए हैं।

 EffectVignette.Uniforms ["ऑफ़सेट"]। मान = 1.0;
  EffectVignette.Uniforms ["अंधेरा"].वल्यू = 1.3;
}
इस में();
एनिमेट ();
समारोह init () {
  कैमरा = नया तीन। PerspectiveCamera (70, window.innerwidth / window.innerhehight, 1, 4000);
  camera.position.z = 2750;
  दृश्य = नया तीन.सीन ();
  scene.fog = नया तीन.fogexp2 (0x1c3c4a, 0.00045); 

06. प्रकाश को अंदर जाने दें [5 9]

दृश्य की सामग्री को देखने के लिए, चार रोशनी रखी जाएगी। पहला एक गोलार्द्ध प्रकाश है, जिसका उपयोग दृश्य के बुनियादी वातावरण को प्राप्त करने के लिए किया जाता है। अगला केंद्र प्रकाश है जो दृश्य के बीच में एक हल्का नीली रोशनी जोड़ रहा है। पूरे दृश्य में कुछ प्रकाश देने के लिए यह एक तरफ सेट किया गया है।

 var hemispherelight = new three.hemispherelight (0xe3feff, 0xe6dc8, 0.7);
scene.add (गोल्थरलाइट);
hemispherelight.position.y = 300;
var centerlight = नया तीन.स्पॉटलाइट (0xb7f9ff, ​​1);
scene.add (केंद्रलाइट);
centerlight.position.set (2500, 300, 2000);
centerlight.penumbra = 1;
centerlight.decay = 5; 

07. एनिमेट लाइट्स [5 9]

अगली दो रोशनी को जोड़ा जाना चाहिए। ' प्वाइंटलाइट ' तथा ' पॉइंटलाइट 2 'रंगीन रोशनी हैं जो दृश्य के चारों ओर विपरीत दिशाओं में सर्कल होंगी ताकि प्रकाश लगातार दृश्य में बदल सके। पहला गुलाबी रोशनी है और दूसरा एक नारंगी प्रकाश है। प्रतिबिंब छवियों के लिए पथ और प्रारूप पिछले दो पंक्तियों में सेट हैं।

 पॉइंटलाइट = नया तीन.पॉइंटलाइट (0xE07BFF, 1.5);
pointlig.position.z = 200;
scene.add (पॉइंटलाइट);
पॉइंटलाइट 2 = नया तीन.पॉइंटलाइट (0xff4e00, 1.2);
pointight2.position.z = 200;
scene.add (पॉइंटलाइट 2);
var पथ = "img /";
var प्रारूप = '.jpg'; 

08. चमकदार सतह [5 9]

तरल सतह में एक प्रतिबिंबित, चमकदार सतह होगी और यह एक प्रतिबिंब घन बनाकर किया जाता है। यह एक घन है जिसमें 360 डिग्री स्काईबॉक्स है, जो तरल की सतह पर दिखाई देगा। ' यूआरएल 'सरणी में छवियों को लोड किया जाना चाहिए, फिर सामग्री स्थापित की गई है।

09. कुछ समूहों को सेट करें [5 9]

प्रेमी समूह में कुछ कण होंगे जो बाद में जोड़े जाएंगे, जबकि फर्श समूह में तरल की सतह होगी। एक नई 3 डी ऑब्जेक्ट बनाई गई है जो उस सतह को पकड़ लेगी। दो तरल सतहें होंगी; एक प्रतिबिंबित सामग्री होगी और दूसरे में वायरफ्रेम होगा ' फ्लेरमटेरियल ', जैसा कि यहां परिभाषित किया गया है।

 Movergroup = नया तीन। Object3D ();
scene.add (मुवर समूह);
var floorgroup = नया तीन.Object3D ();
var flowormaterial = नया तीन.मेशोंगमटेरियल ({
रंग: 0xeeeeeee, पक्ष: तीन. डबलबल्साइड, मिश्रण: तीन. एडडिटिवब्लेंडिंग, वायरफ्रेम: सत्य
});
foologeometry = नई तीन। planegeometry (floor_width + 1200, floor_depth, floor_res, floor_res); 

10. सतहों को बनाओ [5 9]

दो तरल सतहों को यहां बनाया गया है ' फ़्लोशेश ' तथा ' Floormesh2 '।' वे तैनात हैं और अंदर रखे गए हैं ' फर्श समूह 'फिर कैमरे के सामने एक अच्छे देखने कोण के लिए घुमाया गया। यह सीधे फ्लैट नहीं है, लेकिन थोड़ा कोण जैसा कि यह बेहतर दिखता है।

 var floormesh = नए तीन.श (फर्श फार्मेट्री, क्यूबेमेटेरियल);
var floormesh2 = नया तीन। हेश (फ़्लोरगेमेट्री, फ्लोर्डटेरियल);
floormesh2.position.y = 20;
floormesh2.position.z = 5;
तल समूह। जोड़ें (Floormesh);
तल समूह। जोड़ें (Floormesh2);
scene.add (फर्श समूह);
floormesh.rotation.x = math.pi / 1.65;
floormesh2.rotation.x = math.pi / 1.65;
floorgroup.position.y = 180; 

11. फ्लोटिंग कण जोड़ें [5 9]

यहां कोड का अनुभाग एक खाली ज्यामिति वस्तु बनाता है और फिर 2,000 शिखर में स्थानों में स्थानों के रूप में कार्य करता है। ये एक्स, वाई और जेड अक्ष पर यादृच्छिक पदों पर वितरित किए जाते हैं। ये तरल तल की सतह से ऊपर तैरेंगे।

 पेजोमेट्री = नई तीन.जोमेट्री ();
स्प्राइट = textureloader.load ("img / sprite.png");
के लिए (i = 0; i & lt; 2000; i ++) {
  var vertex = नया तीन .vector3 ();
  vertex.x = 4000 * math.random () - 2000;
  vertex.y = -200 + math.random () * 700;
  vertex.z = 5000 * math.random () - 2000;
  pgeometry.vertices.push (वर्टेक्स);
} 

12. देखो [5 9]

यहां परिभाषित सामग्री सेट करेगा कि कण कैसे दिखते हैं। एक छवि पिछले चरण में लोड की गई थी और सामग्री के निर्माण के बाद, प्रत्येक कण पर छवि के रूप में उपयोग किया जाता है। यह तब सभी कणों के लिए ज्यामिति के प्रत्येक बिंदु पर लागू होता है। ये तब दृश्य में जोड़े जाते हैं।

13. लोगो जोड़ें [5 9]

[1 9 1] [1 9 2] [1 9 3]

एक लोगो स्क्रीन के केंद्र में रखा जाएगा और यह एक फ्लैट विमान पर जोड़ा जाएगा जो कैमरे का सामना करेगा। लोगो को थोड़ा पारदर्शी बना दिया जाता है और एक योजक मिश्रण दिया जाता है ताकि हल्के ऑब्जेक्ट्स इसके पीछे गुजरते समय यह अधिक दिखाई दे। यह तैनात है और दृश्य में रखा गया है।

 स्प्राइट = textureloader.load ("img / logo.png");
ज्यामिति = नया तीन। प्लेनबफेग्रेजेट्री (500, 640, 1);
सामग्री = नया तीन.शामबरटमटेरियल ({
  पारदर्शी: सही, अस्पष्टता: 0.8, मिश्रण: तीन. एडडिटिविंग, मानचित्र: स्प्राइट, साइड: थ्री। डबल्साइड
});
var cornt = नया तीन। हेश (ज्यामिति, सामग्री);
lett.position.set (0, 70, 1800);
scene.add (विमान); 

14. रेंडर सेटिंग्स जोड़ें [5 9]

रेंडरर को चिकनी, एंटी-एलाइज्ड किनारों के लिए स्थापित किया गया है और अब पृष्ठभूमि रंग सेट है। यह दस्तावेज़ के शरीर में जोड़ा जाता है ताकि दृश्य HTML पृष्ठ पर हो। पोस्ट प्रोसेसिंग प्रभाव विभिन्न प्रस्तुत करने और शेडर पास शुरू करके स्थापित किए जाते हैं।

15. पास करें [5 9]

एक बार फिल्म और ग्लिच पास जोड़े जाने के बाद, एक प्रभाव संगीतकार बनाया जाता है जो सभी पासों को एक साथ जोड़ता है। इन्हें एक-एक करके संगीतकार में जोड़ा जाता है और अंततः यह दर्शकों के प्रदर्शन के लिए स्क्रीन पर प्रस्तुत किया जाएगा।

16. 'init' फ़ंक्शन बंद करें [5 9]

दृश्य की प्रारंभिकरण के लिए अंतिम कुछ सेटिंग्स जोड़े जाते हैं। पोस्ट प्रोसेसिंग के लिए पैरामीटर सेट हैं, लहरों की सेटिंग को कॉल किया जाता है और जब भी ब्राउज़र का आकार बदलता है तो एक इवेंट श्रोता जोड़ा जाता है। यह प्रदर्शन को नए आयामों को फिट करने के लिए अद्यतन करने में सक्षम बनाता है।

17. लहरें सेट करें [5 9]

लहरें अब तरल की सतह के लिए बनाई गई हैं। यह एक्स और जेड अक्ष पर फर्श ज्यामिति के प्रत्येक शीर्षक के माध्यम से आगे बढ़कर और वाई अक्ष पर ऊपर की ओर बढ़ रहा है। इस स्तर पर ' के लिये 'लूप्स एक्स और जेड अक्ष के लिए बनाए जाते हैं।

 समारोह setwaves () {
  StepCount ++;
  movergroup.position.z = -move_spd;
  var i, ipos;
  var offset = stepcount * move_spd / floor_depth * floor_res;
  के लिए (i = 0; i & lt; floor_res + 1; I ++) {
  के लिए (var j = 0; j & lt; floor_res + 1; j ++) {
  ipos = i + ऑफ़सेट; 

18. लहरें बनाओ [5 9]

सभी कोने को उसी तरह से ऊपर की ओर बढ़ाया जाएगा। कैमरे से दूर लोग बड़े होंगे, फिर पक्ष थोड़ा कम होंगे, और कैमरे के निकटतम लोग कम से कम स्केल किए जाएंगे। यह पीछे और किनारे को देखने के लिए थोड़ा और दिलचस्प बनाता है।

 अगर ((मैं & gt; 30) || (J & Lt; 12) || (J & GT; 48) {
  foolegeometry.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) {
  foologeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floin_res * noisescale, noiseseed) * (floin_ht / 1.2);
  } अन्य {
  foologeometry.vertices [i * (floor_res + 1) + j] .z = snoise.noise (ipos / floor_res * noisescale, j / floin_res * noisescale, noiseseed) * (floor_ht / 2);
  }
  }
  }
  flowgeometry.verticesneedupdate = सत्य;
} 

19. आकार बदलें और एनिमेट करें [5 9]

जब विंडो का आकार बदलता है, तो यहां फ़ंक्शन को श्रोता से कहा जाता है जिसे चरण 16 में स्थापित किया गया था। ब्राउज़र की विंडो के नए आयामों से मेल खाने के लिए कैमरा, रेंडरर और संगीतकार सभी यहां रीसेट कर रहे हैं। एनिमेट फ़ंक्शन बस 60fps पर सेट करता है, प्रदर्शन को अद्यतन करने के लिए रेंडर फ़ंक्शन को कॉल करता है।

 फ़ंक्शन ऑनविंडोइज़ाइज () {
  कैमरा.aspect = window.innerwidth / window.innerheight;
  कैमरा। अपडेट प्रोपेक्शनमेट्रिक्स ();
  renderer.setsize (window.innerwidth, window.innerheight);
  संगीतकार। Ssetize (window.innerwidth, window.innerheight);
}
समारोह एनिमेट () {
  RequestAnimationFrame (एनिमेट);
  प्रस्तुत करना();
} 

20. कार्रवाई के हर फ्रेम को सेट करें [5 9]

रेंडर फ़ंक्शन को हर फ्रेम कहा जाता है। बिंदु रोशनी दृश्य में चारों ओर कक्षा में सेट की जाती हैं और कैमरा माउस आंदोलन के अनुसार तैनात होता है, जिसमें थोड़ा आसान होता है ताकि यह धीरे-धीरे स्थान पर हो। कैमरा हमेशा दृश्य के केंद्र को देखने के लिए तैयार है।

फंक्शन रेंडर () {
  var timer = -0.0002 * DATE.NOW ();
  pointlig.position.x = 2400 * math.cos (टाइमर);
  pointlight.position.z = 2400 * math.sin (टाइमर);
  pointlight2.position.x = 1800 * math.cos (-टिमर * 1.5);
  pointlight2.position.z = 1800 * math.sin (-टिमर * 1.5);
  camera.position.x + = (माउसक्स - कैमरा.पोसिशन.एक्स) * .05;
  camera.position.y + = (-माहाउस - कैमरा.पोसिशन.यू) * .05;
camera.lookat (scene.position); 

21. दृश्य प्रस्तुत करना [5 9]

अंतिम चरण में कणों को अपने व्यक्तिगत वर्टेक्स पर आगे बढ़ाया जाता है, और यदि वे कैमरे तक पहुंच जाते हैं, तो उन्हें दूरी में वापस रखा जाता है। यह अद्यतन किया गया है और ' setwaves ' फंक्शन को लहरों को आगे बढ़ाने के लिए कहा जाता है। दृश्य प्रभाव संगीतकार द्वारा प्रस्तुत किया जाता है।

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित किया गया था वेब डिजाइनर । [2 9 8] वेब डिजाइनर की सदस्यता लें

संबंधित आलेख:

• Three.js का उपयोग करके वेबजीएल के साथ शुरू करें
• बेहतर लोगो बनाने के लिए 11 कदम
• 18 वेब डिज़ाइन यूट्यूब चैनल आपको देखने की जरूरत है