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