शुरुआती जानकारी
मैंने अपने कुछ प्रयोगों के लिए Three.js का इस्तेमाल किया है और यह ब्राउज़र में 3D के साथ काम करने में आने वाली परेशानियों को दूर करने का शानदार काम करता है. इसकी मदद से आप कैमरे, ऑब्जेक्ट, लाइट, सामग्री वगैरह बना सकते हैं. साथ ही, आपके पास रेंडरर का विकल्प होता है. इसका मतलब है कि आपके पास यह तय करने का विकल्प है कि एचटीएमएल 5 के कैनवस, WebGL या SVG का इस्तेमाल करके, सीन को किस तरह से बनाया जाए. और यह ओपन सोर्स है, इसलिए आप भी प्रोजेक्ट में शामिल हो सकते हैं. हालाँकि, अब मैं इस बात पर ध्यान दूँगी कि मैंने इसे इंजन की तरह इस्तेमाल करके क्या सीखा है. साथ ही, मैं आपको कुछ बुनियादी बातें भी बताऊँगी.
Think.js की सभी खूबियों के अलावा, कुछ ऐसे मौकों पर भी आपको मुश्किल का सामना करना पड़ सकता है. आम तौर पर, आपको उदाहरणों, रिवर्स इंजीनियरिंग और (मेरे मामले में तो) किसी खास सुविधा की खोज करने और कभी-कभी GitHub के ज़रिए सवाल पूछने में काफ़ी समय लगाना होगा. अगर आपका कोई सवाल है, तो हमें पता है कि Mr. doob और AlteredQualia आपके लिए बहुत मददगार हैं!
1. बुनियादी बातें
मैं मानूँगी कि आपके पास कम से कम 3D की अच्छी जानकारी है और JavaScript के साथ ज़रूरी जानकारी है. अगर आप ऐसा नहीं करते हैं, तो कोशिश करने से पहले इस चीज़ के साथ सीखना फ़ायदेमंद हो सकता है, क्योंकि यह आपको भ्रमित कर सकता है.
हमारी 3D दुनिया में, हमारे पास नीचे दिए गए कुछ दस्तावेज़ होंगे, जिन्हें बनाने की प्रक्रिया में हम आपका मार्गदर्शन करेंगे:
- कोई सीन
- रेंडरर
- कैमरा
- एक या दो चीज़ें (सामग्री के साथ)
आप, बेशक, कुछ अच्छे काम कर सकते हैं, और मेरी उम्मीद है कि आप इसके लिए आगे बढ़ेंगे और अपने ब्राउज़र में 3D के साथ प्रयोग करना शुरू करेंगे.
2. सपोर्ट करें
ब्राउज़र में समर्थन के बारे में बस एक छोटी सी जानकारी. मेरे हिसाब से, Google का Chrome ब्राउज़र यह सबसे अच्छा ब्राउज़र है, क्योंकि इसमें रेंडरर काम करते हैं. इसके साथ ही, मौजूदा JavaScript इंजन की रफ़्तार भी इस हिसाब से है. Chrome, Canvas, WebGL, और SVG का समर्थन करता है और यह बहुत ही तेज़ है. वर्शन 4 के आगमन के साथ Firefox दूसरा स्थान है. ऐसा लगता है कि इसका JavaScript इंजन, Chrome के मुकाबले थोड़ा धीमा है लेकिन फिर से रेंडर करने वाली टेक्नोलॉजी के साथ इसका इस्तेमाल बेहतर तरीके से किया जा सकता है. Opera और Safari WebGL का इस्तेमाल कर रहे हैं, लेकिन उनके मौजूदा वर्शन में सिर्फ़ कैनवस का इस्तेमाल किया जा सकता है. Internet Explorer (वर्शन 9+) में सिर्फ़ कैनवस रेंडरिंग की सुविधा काम करती है. मुझे Microsoft की ऐसी कोई सूचना नहीं मिली है जिसमें WebGL की सुविधाओं को जोड़ने की बात हो.
3. सीन सेट करें
मुझे लगता है कि आपने ऐसा ब्राउज़र चुना है जो रेंडरिंग की सभी टेक्नोलॉजी पर काम करता है और आपको कैनवस या WebGL से रेंडर करना है, क्योंकि वे ज़्यादा मानक विकल्प हैं. WebGL की तुलना में कैनवस ज़्यादा काम करता है, लेकिन इस पर ध्यान देना ज़रूरी है कि WebGL आपके ग्राफ़िक कार्ड के जीपीयू पर चलता है, जिसका मतलब है कि आपका CPU किसी दूसरे नॉन-रेंडरिंग टास्क पर ध्यान लगा सकता है, जैसे कि किसी भौतिकी या उपयोगकर्ता इंटरैक्शन पर.
आपको ध्यान में रखना चाहिए कि आपने रेंडरर चाहे जो भी चुना हो, JavaScript को परफ़ॉर्मेंस के लिए ऑप्टिमाइज़ करना होगा. 3D ब्राउज़र के लिए कोई आसान काम नहीं है (और यह तब भी संभव है, जब यह संभव है), इसलिए अपने कोड में किसी भी बॉटलनेक को समझने के लिए सावधान रहें और अगर हो सके, तो उन्हें हटा दें!
इस बात को ध्यान में रखते हुए, और मान लीजिए कि आपने डाउनलोड किया है और अपनी एचटीएमएल फ़ाइल में तीन.js शामिल किया है, तो कोई सीन कैसे सेट अप किया जाए? इस तरह:
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new THREE.WebGLRenderer();
var camera = new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR );
var scene = new THREE.Scene();
// the camera starts at 0,0,0 so pull it back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
सच में, यह ज़्यादा मुश्किल नहीं है!
4. मेश बनाना
हमारे पास एक सीन है, एक कैमरा है, और एक रेंडरर है (मैंने अपने सैंपल कोड में, WebGL के लिए ऑप्ट-इन किया है) लेकिन, हमारे पास बनाने के लिए कुछ नहीं है. Think.js असल में कुछ अलग-अलग स्टैंडर्ड फ़ाइल टाइप को लोड करने में मदद करता है. ब्लेंडर, माया, Cinema4D या किसी अन्य चीज़ से मॉडल आउटपुट करते समय यह बहुत अच्छा होता है. चीज़ों को आसान बनाए रखने के लिए (आखिर में, यह शुरुआत करने के बारे में है!) मैं प्रिमिटिव के बारे में बात करूंगी. प्रिमिटिव, ज्यामितीय मेश होते हैं. ये तुलनात्मक रूप से बुनियादी होते हैं, जैसे कि स्फ़ीयर, प्लान, क्यूब, और सिलिंडर. Think.js की मदद से, इस तरह के प्रिमिटिव आसानी से बनाए जा सकते हैं:
// set up the sphere vars
var radius = 50, segments = 16, rings = 16;
// create a new mesh with sphere geometry -
// we will cover the sphereMaterial next!
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(radius,
segments,
rings),
sphereMaterial);
// add the sphere to the scene
scene.add(sphere);
अच्छा, लेकिन गोले के लिए सामग्री का क्या? कोड में हमने एक वैरिएबल sphereMaterial का इस्तेमाल किया है, लेकिन हमने अभी तक इसे तय नहीं किया है. सबसे पहले, हमें सामग्री के बारे में और विस्तार से बात करनी होगी.
5. मटीरियल
बिना किसी संदेह के, यहThree.js के सबसे उपयोगी भागों में से एक है. इससे आपके लिए कई तरह की सामान्य (और बहुत आसान) सामग्री मिलती है, जिसे आप मेश पर लगा सकते हैं:
- 'बेसिक' - इसका मतलब है कि यह 'अनलिट' रेंडर करता है
- लैंबर्ट
- फ़ोंग
इसमें और भी बहुत सारी चीज़ें हैं, लेकिन फिर से सादगी को ध्यान में रखते हुए मैं आपको उनके बारे में खोजने का मौका दूंगा. WebGL के मामले में, विशेष रूप से ये सामग्री कई जानकारियों की मदद कर सकती है. ऐसा क्यों हो रहा है? ठीक है, क्योंकि WebGL में आपको रेंडर की जाने वाली हर चीज़ के लिए शेडर लिखने होंगे. शेडर अपने-आप में एक बड़ा विषय हैं. हालांकि, कम शब्दों में कहें, तो इन्हें जीएलएसएल (OpenGL शेडर लैंग्वेज) में लिखा जाता है. इससे जीपीयू को यह पता चलता है कि कोई चीज़ कैसी दिखनी चाहिए. इसका मतलब है कि आपको रोशनी, रिफ़्लेक्शन वगैरह के गणित की नकल करनी होगी. यह बहुत जल्दी मुश्किल हो जाता है. थ्री.js की बदौलत आपको ऐसा करने की ज़रूरत नहीं है, अगर ऐसा नहीं करना है, तो यह आपको बहुत छोटा लग रहा है. अगर आपको शेडर लिखने हैं, तो आप MeshShaderMaterial के साथ भी ऐसा कर सकते हैं, इसलिए यह एक लचीला सेटअप है.
हालांकि, अभी के लिए आइए, स्फ़ीयर में लैम्बर्ट की सामग्री लागू करते हैं:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
ध्यान रखें कि रंग के अलावा, और भी चीज़ें हैं, जैसे कि स्मूदिंग या एनवायरमेंट मैप आपको उन अलग-अलग प्रॉपर्टी के लिए Wiki पेज देखना चाहिए जिन्हें इन चीज़ों के लिए सेट किया जा सकता है. दरअसल, उन प्रॉपर्टी के बारे में जानने के लिए जो इंजन आपको उपलब्ध कराता है. इसके अलावा, हाल ही में threejs.org का इस्तेमाल किया गया है, जो एपीआई का ज़्यादा आकर्षक व्यू देता है.
6. लाइटें!
अगर आप अभी सीन रेंडर करना चाहते, तो आपको लाल रंग का गोला दिखेगा. भले ही, हमने लैंबर्ट मटीरियल लागू किया है, लेकिन सीन में कोई लाइट नहीं है, इसलिए डिफ़ॉल्ट रूप से थ्री.js पूरी तरह से खुली रोशनी में बदल जाएगा, जो ठीक वैसा ही है जैसा कि सपाट रंगों से बनाया गया है. आइए, इसे आसान पॉइंट की मदद से ठीक करते हैं:
// create a point light
var pointLight = new THREE.PointLight( 0xFFFFFF );
// set its position
pointLight.position.x = 10;
pointLight.position.y = 50;
pointLight.position.z = 130;
// add to the scene
scene.add(pointLight);
7. इमेज बनाएं
दरअसल, अब हमने इमेज बनाने के लिए सब कुछ सेट अप कर लिया है. कमाल का बात यह है कि हालांकि, हमें असल में आगे बढ़कर वही करना होगा:
// draw!
renderer.render(scene, camera);
हालांकि, हो सकता है कि आप एक से ज़्यादा बार रेंडर करना चाहें, इसलिए अगर आपको कोई लूप बनाना है, तो आपको requestAnimationFrame का इस्तेमाल करना चाहिए. यह ब्राउज़र में ऐनिमेशन को हैंडल करने का सबसे अच्छा तरीका है. यह इस पर अभी तक पूरी तरह से काम नहीं करता, इसलिए हमारा सुझाव है कि आप पॉल आयरिश के गाने पर एक नज़र डालें.
8. सामान्य ऑब्जेक्ट की प्रॉपर्टी
अगर आपने थ्री.js का कोड देखा है, तो आपको Object3D से कई ऑब्जेक्ट 'इनहेरिट' करने वाले दिखेंगे. यह एक बेस ऑब्जेक्ट है, जिसमें कुछ बेहद काम की प्रॉपर्टी होती हैं. जैसे, रैंक, रोटेट, और स्केल की जानकारी. खास तौर पर, हमारा स्फ़ीयर एक मेश है जो Object3D से इनहेरिट किया गया है, जिसमें यह अपनी प्रॉपर्टी जोड़ता है: ज्यामिति और सामग्री. मैं इनके बारे में क्यों बताऊँ? इस बात की संभावना बहुत कम है कि आप स्क्रीन पर सिर्फ़ एक ऐसा गोले का इस्तेमाल करें जो कुछ न करे. इन प्रॉपर्टी की जांच करने की ज़रूरत है, क्योंकि इनकी मदद से आप मेश और सामग्री के ब्यौरे में तुरंत बदलाव कर सकते हैं.
// sphere geometry
sphere.geometry
// which contains the vertices and faces
sphere.geometry.vertices // an array
sphere.geometry.faces // also an array
// its position
sphere.position // has x, y and z properties
sphere.rotation // same
sphere.scale // ... same
9. डर्टी लिटिल सीक्रेट्स
मैं जल्दी से तीन.js के लिए एक चाल के बारे में बताना चाहती हूँ, जो कि अगर बदलाव किया जाता है, जैसे कि मेश के वर्टेक्स, तो आप अपने रेंडर लूप में देखेंगे कि कुछ भी नहीं बदलता. ऐसा क्यों हो रहा है? इसलिए,थ्री.js (जहां तक मुझे पता है) किसी मेश के डेटा को ऑप्टिमाइज़ करने के लिए कैश मेमोरी में सेव करता है. असल में आपको तीन.js को फ़्लैग करना होगा कि कुछ बदलाव हुआ है, ताकि ज़रूरत पड़ने पर वह फिर से गिनती कर सके. इसके लिए, यह तरीका अपनाएं:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
फिर से और भी बहुत कुछ है, लेकिन जो दो मुझे मिले हैं वे सबसे ज़्यादा उपयोगी हैं. बिना वजह कैलकुलेशन से बचने के लिए, आपको सिर्फ़ उन चीज़ों को फ़्लैग करना चाहिए जिनमें बदलाव किए गए हैं.
नतीजा
मुझे उम्मीद है कि थ्री.js के इस संक्षिप्त परिचय से आपको मदद मिली होगी. अपने हाथों को गंदा करने और कुछ करने की कोशिश करने में ऐसा कुछ नहीं है जो ज़्यादा न हो. ब्राउज़र में मूल रूप से 3D चलाना बहुत मज़ेदार है और Think.js जैसे इंजन का इस्तेमाल करना, आपके कई सिर दर्द को दूर कर देता है और आपको कुछ बेहतरीन चीज़ें बनाने में मदद करता है. आपकी मदद के लिए, मैंने इस लैब लेख में सोर्स कोड को शामिल कर लिया है, ताकि आप इसे रेफ़रंस के तौर पर इस्तेमाल कर सकें. अगर आपको यह मौका पसंद आया है, तो Twitter पर हमें बताएं. इन्हें हल करना हमेशा अच्छा रहता है!