परिचय
मैंने अपने कुछ प्रयोगों के लिए Three.js का इस्तेमाल किया है. यह ब्राउज़र में 3D का इस्तेमाल करने से जुड़ी समस्याओं को हल करने में काफ़ी मददगार है. इसकी मदद से कैमरे, ऑब्जेक्ट, लाइट, मटीरियल वगैरह बनाए जा सकते हैं. साथ ही, आपके पास रेंडरर चुनने का विकल्प होता है. इसका मतलब है कि आपके पास यह तय करने का विकल्प होता है कि आपको अपना सीन, एचटीएमएल 5 के कैनवस, वेबजीएल या एसवीजी का इस्तेमाल करके ड्रॉ करना है या नहीं. साथ ही, यह ओपन सोर्स है, इसलिए आपके पास इस प्रोजेक्ट में शामिल होने का विकल्प भी है. हालांकि, फ़िलहाल, मैं इस बात पर फ़ोकस करूंगा कि इंजन के तौर पर इसे इस्तेमाल करके मुझे क्या-क्या पता चला. साथ ही, आपको इसके बारे में कुछ बुनियादी बातें बताऊंगा.
Three.js बहुत ही बेहतरीन टूल है, लेकिन कभी-कभी आपको इसमें समस्याएं आ सकती हैं. आम तौर पर, आपको उदाहरणों, रिवर्स इंजीनियरिंग, और (मेरे मामले में ज़रूर) किसी खास फ़ंक्शन को ढूंढने में काफ़ी समय बिताना होगा. साथ ही, कभी-कभी GitHub के ज़रिए सवाल पूछने होंगे. अगर आपको कुछ पूछना है, तो Mr. doob और AlteredQualia से संपर्क करें.
1. बुनियादी बातें
हम मानते हैं कि आपके पास 3D के बारे में कम से कम बुनियादी जानकारी है और आप JavaScript का इस्तेमाल करने में थोड़े-बहुत माहिर हैं. अगर आपको इस बारे में जानकारी नहीं है, तो इस बारे में थोड़ा जानने के बाद ही इनका इस्तेमाल करें. ऐसा इसलिए, क्योंकि इनका इस्तेमाल करना थोड़ा मुश्किल हो सकता है.
हमारे 3D वर्ल्ड में, इनमें से कुछ चीज़ें होंगी. हम आपको इनके बनाने का तरीका बताएंगे:
- कोई सीन
- रेंडरर
- कैमरा
- एक या दो ऑब्जेक्ट (सामग्री के साथ)
ज़रूर, कुछ शानदार चीज़ें की जा सकती हैं. मुझे उम्मीद है कि आप ऐसा करेंगे और अपने ब्राउज़र में 3D के साथ प्रयोग करना शुरू करेंगे.
2. सहायता
ब्राउज़र में सहायता के बारे में खास जानकारी. मेरे अनुभव के हिसाब से, Google का Chrome ब्राउज़र, काम करने के लिए सबसे बेहतर ब्राउज़र है. इसकी वजह यह है कि इसमें कई रेंडरर काम करते हैं और JavaScript इंजन की स्पीड भी बेहतर होती है. Chrome, कैनवस, WebGL, और SVG के साथ काम करता है. साथ ही, यह बहुत तेज़ है. Firefox, चौथे वर्शन के आने के बाद, दूसरे नंबर पर है. ऐसा लगता है कि इसका JavaScript इंजन, Chrome के इंजन से थोड़ा धीमा है. हालांकि, रेंडर करने की टेक्नोलॉजी के लिए इसका सपोर्ट बेहतरीन है. Opera और Safari, WebGL की सुविधा जोड़ने की प्रोसेस में हैं. हालांकि, उनके मौजूदा वर्शन सिर्फ़ कैनवस के साथ काम करते हैं. Internet Explorer (9 और उसके बाद के वर्शन) सिर्फ़ कैनवस रेंडरिंग के साथ काम करता है. मुझे इस बारे में कुछ नहीं पता कि Microsoft, WebGL की सुविधाएं जोड़ने की योजना बना रहा है या नहीं.
3. सीन सेट करना
हम मानते हैं कि आपने ऐसा ब्राउज़र चुना है जो रेंडर करने की सभी टेक्नोलॉजी के साथ काम करता है. साथ ही, आपको कैनवस या WebGL के साथ रेंडर करना है, क्योंकि ये स्टैंडर्ड विकल्प हैं. कैनवस, WebGL के मुकाबले ज़्यादा डिवाइसों पर काम करता है. हालांकि, यह ध्यान रखना ज़रूरी है कि WebGL आपके ग्राफ़िक्स कार्ड के जीपीयू पर काम करता है. इसका मतलब है कि आपका सीपीयू, रेंडरिंग से जुड़े कामों के बजाय, अन्य कामों पर ध्यान दे सकता है. जैसे, कोई फ़िज़िक्स या उपयोगकर्ता इंटरैक्शन.
आपने जो भी रेंडरर चुना है, आपको यह ध्यान रखना होगा कि परफ़ॉर्मेंस के लिए JavaScript को ऑप्टिमाइज़ करना होगा. ब्राउज़र के लिए 3D आसान काम नहीं है (और यह शानदार है कि यह संभव है), इसलिए ध्यान से देखें कि आपके कोड में कहां कोई समस्या है और अगर हो सके, तो उन्हें हटा दें!
इस बात को ध्यान में रखते हुए कि आपने डाउनलोड किया है और अपनी एचटीएमएल फ़ाइल में three.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 का विकल्प चुना है). हालांकि, हमारे पास असल में कुछ भी नहीं है. Three.js में, कुछ अलग-अलग स्टैंडर्ड फ़ाइल टाइप लोड करने की सुविधा होती है. यह सुविधा तब काफ़ी काम की होती है, जब Blender, Maya, Cinema4D या किसी अन्य सॉफ़्टवेयर से मॉडल आउटपुट किए जा रहे हों. चीज़ों को आसान बनाएं (आखिरकार, यह शुरू करने के बारे में है!) मैं प्राइमिटिव के बारे में बताऊँगा. प्राइमिटिव, ज्यामितीय मेश होते हैं. ये गोले, प्लैन, क्यूब, और सिलेंडर जैसे बुनियादी मेश होते हैं. Three.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 में आपको रेंडर की जा रही हर चीज़ के लिए शेडर लिखने पड़ते हैं. शेडर एक बहुत बड़ा विषय है, लेकिन कम शब्दों में कहें, तो इन्हें GLSL (OpenGL शेडर लैंग्वेज) में लिखा जाता है. इससे GPU को पता चलता है कि किसी चीज़ को कैसा दिखना चाहिए. इसका मतलब है कि आपको लाइटिंग, परावर्तन वगैरह के गणित को दोहराना होगा. यह बहुत जल्दी बहुत मुश्किल हो सकता है. Three.js की मदद से, आपको ऐसा करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि यह आपके लिए यह काम करता है. हालांकि, अगर आपको शेडर लिखने हैं, तो MeshShaderMaterial की मदद से भी ऐसा किया जा सकता है. इसलिए, यह सेटअप आसान है.
हालांकि, अभी के लिए, गोले पर एक लेंबर्ट मटीरियल लागू करें:
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
// a gorgeous red.
color: 0xCC0000
});
यह भी ध्यान देने वाली बात है कि मेटल बनाते समय, रंग के अलावा अन्य प्रॉपर्टी भी तय की जा सकती हैं. जैसे, स्मूद करने या एनवायरमेंट मैप करने की सुविधा. आपको विकी पेज पर जाएं और उन अलग-अलग प्रॉपर्टी के बारे में जानें जिन्हें आपके पास, मटीरियल और इंजन के ज़रिए उपलब्ध कराए गए किसी भी ऑब्जेक्ट पर सेट करने का विकल्प है. हाल ही में threejs.org भी लॉन्च हुआ है. यह एपीआई का ज़्यादा आकर्षक व्यू दिखाता है.
6. लाइटें!
अगर अभी सीन को रेंडर किया जाता है, तो आपको लाल रंग का एक गोला दिखेगा. भले ही, हमने Lambert मटीरियल लागू किया है, लेकिन सीन में कोई लाइट नहीं है. इसलिए, डिफ़ॉल्ट रूप से Three.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. सामान्य ऑब्जेक्ट प्रॉपर्टी
अगर आपने Three.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. डर्टी लिटल सीक्रेट
हम आपको Three.js के बारे में एक अहम जानकारी देना चाहते हैं. उदाहरण के लिए, अगर किसी मेश के वर्टिसेस में बदलाव किया जाता है, तो आपको अपने रेंडर लूप में दिखेगा कि कुछ भी नहीं बदला है. क्यों? ऐसा इसलिए है, क्योंकि मेरे हिसाब से Three.js, किसी मेश के डेटा को ऑप्टिमाइज़ेशन के तौर पर कैश मेमोरी में सेव करता है. आपको बस Three.js को यह फ़्लैग करना होगा कि कुछ बदल गया है, ताकि वह ज़रूरत के हिसाब से फिर से कैलकुलेट कर सके. इसके लिए, इनका इस्तेमाल करें:
// changes to the vertices
sphere.geometry.__dirtyVertices = true;
// changes to the normals
sphere.geometry.__dirtyNormals = true;
इसके अलावा, और भी तरीके हैं. हालांकि, मुझे ये दो तरीके सबसे ज़्यादा काम के लगे. आपको सिर्फ़ उन चीज़ों को फ़्लैग करना चाहिए जिनमें बदलाव हुआ है, ताकि गलत कैलकुलेशन न हो.
नतीजा
हमें उम्मीद है कि आपको Three.js के बारे में यह छोटा सा परिचय मददगार लगा होगा. खुद कुछ करने और आज़माने से बढ़िया कुछ नहीं है. इसलिए, इसे ज़रूर आज़माएं. ब्राउज़र में नेटिव तौर पर 3D ऐप्लिकेशन चलाना बहुत मज़ेदार है. साथ ही, Three.js जैसे इंजन का इस्तेमाल करने से, आपको कई समस्याओं से छुटकारा मिलता है और बेहतरीन चीज़ें बनाने में मदद मिलती है. आपकी मदद करने के लिए, मैंने इस लैब लेख में सोर्स कोड को रैप किया है, ताकि आप उसका रेफ़रंस के तौर पर इस्तेमाल कर सकें. अगर आपको यह लेख पसंद आया है, तो हमें Twitter पर बताएं. आपसे बात करना हमेशा अच्छा लगता है!