सीखना WebGL और तीन। Js [बंद]


143

मैं नया हूं और वेब ब्राउज़र में 3 डी कंप्यूटर ग्राफिक्स के बारे में सीखना शुरू कर रहा हूं। मुझे एक ब्राउज़र में 3 डी गेम बनाने में दिलचस्पी है। किसी के लिए भी जिन्होंने WebGL और तीन.js सीखे हैं ...

  1. क्या WebGL का ज्ञान तीन.js का उपयोग करने के लिए आवश्यक है?

  2. तीन.जेएस बनाम वेबजीएल का उपयोग करने के क्या फायदे हैं?


10
तीन .js का प्रयोग करें। अवधि। यह वही है जो पश्चिम नीचे कहता है, जबकि सिद्धांत में सरल है, खरोंच से वेबजीएल लिखना एक दर्द है। ऐसी बहुत सी चीजें हैं जो लगभग हर WebGL एप्लिकेशन को करने / करने की आवश्यकता होगी। ये चीजें आपसे दूर हो सकती हैं। इसके अलावा, तीन .js एक अद्भुत पुस्तकालय में परिपक्व हो गए हैं। यदि आप Google रुझान या SO प्रश्न की संख्या की जांच करते हैं, तो आप देखेंगे कि इसने प्रतियोगिता से बहुत आगे खींच लिया है।
दिबांग

4
@GeorgeStocker वास्तव में, इस सवाल का जवाब मुख्य रूप से राय पर नहीं , बल्कि तथ्यों, संदर्भों और विशिष्ट विशेषज्ञता पर आधारित है। यह वहाँ समुदाय के लिए एक मूल्यवान पद रहा है, और सवाल का हिस्सा (2) निश्चित रूप से स्वीकार्य है। आप इसे फिर से दर्ज करने की अनुशंसा कैसे करेंगे ताकि यह आपके लिए स्वीकार्य हो - अर्थात, प्रश्न के अर्थ / इरादे को बदले बिना?
वेस्टलैंग्ली

@WestLangley मैंने कुछ भी नहीं सुना है, लेकिन दिए गए उत्तरों में राय; "लाइब्रेरी [] का उपयोग करने के लिए" पेशेवरों और विपक्षों का उल्लेख नहीं करना "स्टैक ओवरफ्लो के लिए थोड़ा व्यापक है।
जॉर्ज स्टॉकर

2
@GeorgeStocker आपका उत्तर स्वयं एक राय है, और मैं इससे पूरी तरह असहमत हूं। आप पोस्ट को फिर से दर्ज करने की अनुशंसा कैसे करेंगे ताकि यह आपके लिए स्वीकार्य हो?
वेस्टलैंग्ली

1
शायद सवाल यह पूछने के लिए कहा जा सकता है कि थ्रीजी को प्रयोग करने के लिए वेबजीएल सीखना कितना फायदेमंद है। इसका उत्तर तथ्यों, संदर्भों और विशेषज्ञता द्वारा समर्थित होगा।
zz85

जवाबों:


203

चूंकि आपकी बड़ी महत्वाकांक्षाएं हैं, इसलिए आपको फंडामेंटल सीखने का समय निवेश करना होगा। यह कोई बात नहीं है कि आप पहले क्या सीखते हैं - यदि आप चाहें तो आप उन्हें एक साथ सीख सकते हैं। (वही मैंने किया।)

इसका मतलब है कि आपको समझने की आवश्यकता है:

  1. वेबलॉग अवधारणाएँ
  2. Three.js
  3. अंतर्निहित गणितीय अवधारणाएं

Three.js। तीन.जेएस वेबलॉग के कई विवरणों को दूर करने का एक उत्कृष्ट काम करता है, इसलिए व्यक्तिगत रूप से, मैं आपके प्रोजेक्ट के लिए तीन.जेएस का उपयोग करने का सुझाव दूंगा। लेकिन याद रखें, थ्री। जेएस अल्फा में है , और यह बार-बार बदल रहा है, इसलिए आपको इसके लिए तैयार रहना होगा। ज्यादातर लोग उदाहरणों का अध्ययन करके थ्रीज सीखते हैं। पुरानी पुस्तकों और ट्यूटोरियल से बचें, और नेट से उदाहरणों से बचें जो लाइब्रेरी के पुराने संस्करणों से लिंक करते हैं।

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

गणित। फिर, आपको कम से कम अवधारणाओं को समझने की आवश्यकता है। तीन अच्छी किताबें हैं:

  1. ग्राफिक्स और गेम डेवलपमेंट फॉर फ्लेचर डन और इयान परबेरी द्वारा 3 डी मैथ प्राइमर

  2. गेम्स और इंटरेक्टिव एप्लिकेशन के लिए आवश्यक गणित: जेम्स एम। वैन वर्थ और लार्स एम। बिशप द्वारा एक प्रोग्रामर गाइड

  3. एरिक लेनगिल द्वारा 3 डी गेम प्रोग्रामिंग और कंप्यूटर ग्राफिक्स के लिए गणित

मैं उम्मीद करता हूँ यह आप के लिए उपयोगी है। सौभाग्य।


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

पोस्ट के मुख्य भाग में लर्निंग वेबजीएल ट्यूटोरियल का लिंक देखें।
वेस्टलैंगले

22

एक बहुत अच्छा ऑनलाइन पाठ्यक्रम है - इंटरएक्टिव 3 डी ग्राफिक्स https://www.udacity.com/course/cs291 पर THREE.js। इस कोर्स में हाथों पर अनुभव प्राप्त करने के लिए असाइनमेंट भी शामिल हैं। यह तीन.js और कंप्यूटर ग्राफिक्स की सभी बुनियादी अवधारणाओं को शामिल करता है


13

मेरे व्यक्तिगत विचार निम्नलिखित हैं:

  • यदि आपके पास पर्याप्त समय है, तो आप दोनों सीख सकते हैं, लेकिन ध्यान दें कि WebGL तीन.js की तुलना में बहुत कम स्तर है।
  • पहले 3 डी प्रोजेक्ट के लिए, विशेषज्ञों का सुझाव है कि शर्तों और सामान्य 3 डी मॉडल का उपयोग करने के लिए थ्री.जेएस जैसी लाइब्रेरी का उपयोग करें।

3
मैं इससे सहमत हु। इस बिंदु पर ऐसा लगता है कि आपके टूलबेल में दोनों होना एक अच्छी बात हो सकती है। मैं थ्री.जेएस सीखकर शुरू होता हूं, फिर जीएलएसएल के साथ कुछ शेड्स करता हूं और वेबजीएल के बारे में अधिक जानने की कोशिश करता रहता हूं।
Cory Gross

11

आप जिस भी दिशा में जाना चाहते हैं, मेरा सुझाव है कि आप अपने रैखिक बीजगणित कौशल को सीखें / पॉलिश करें । फिर आगे बढ़ें और जानें और एमवीपी आयाम (मॉडल व्यू प्रोजेक्शन) के बारे में अपनी समझ को पॉलिश करें । तीन.JS उस से बहुत दूर कर सकते हैं, लेकिन मुझे लगता है कि यह महत्वपूर्ण है कि कोई भी 3 डी विकास के बारे में गंभीर होने से पहले उन अवधारणाओं को अच्छी तरह से समझता है।

मैंने MVP के बारे में एक परिचयात्मक लेख लिखा था जब मैं पहली बार OpenGL के साथ 3D प्रोग्रामिंग सीख रहा था। मुझे एहसास हुआ कि जब तक मैं यह समझाने में सक्षम नहीं था कि वे परिवर्तन मैट्रिसेस क्या हैं, और वे विभिन्न आयामों / रिक्त स्थान से कैसे संबंधित हैं, तो मुझे वास्तव में किसी भी 3 डी प्रोग्रामिंग का पता नहीं था , हालांकि मैं स्क्रीन पर वस्तुओं को प्रस्तुत कर सकता था।

चूंकि आपका लक्ष्य गेम बनाना है, इसलिए मुझे लगता है कि आपको पहले कुछ कच्चे वेबजीएल सीखने से बहुत लाभ होगा, भले ही आप तीन.जेएस जैसी रूपरेखा का उपयोग करके अंत में अपना कोड लिखने में मदद करें।


10

"WebGL एक 2D API है न कि 3D API"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

यह आलेख WebGL और 3D पुस्तकालयों के बीच तीन.js जैसे मूलभूत अंतरों का वर्णन करता है।
जिसने वेबजीएल या थ्री.जेएस के बीच मेरी पसंद को नो ब्रेनर बना दिया।


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

6

मैं एक यूनिटी 3 डी बैकग्राउंड के साथ-साथ पैपर्विज़न 3 डी से दिन में वापस आया, इसलिए मुझे 3 डी स्पेस से कैसे निपटना है इसकी अच्छी समझ थी। तीन.js वेबलॉग परियोजनाओं से निपटने के तरीके सीखने में अपनी प्रारंभिक छलांग लगाने का तरीका है। एपीआई बहुत अच्छा है, यह बहुत शक्तिशाली है और यदि आप एक और 3 डी तकनीक से आ रहे हैं, तो आप बहुत कम समय के साथ चलेंगे।

मैंने थ्रीज्स ओआरजी के उदाहरणों के साथ बहुत समय बिताया है - उनमें से एक टन है और वे आपको बंद करने और सही दिशा में चलने में बहुत अच्छे हैं। डॉक्स पर्याप्त सभ्य हैं, खासकर यदि आप उनकी तुलना अन्य वेबजीएल 3 डी एपी से बाहर कर रहे हैं।

आप यूनिटी 3 डी के मुफ्त संस्करण और मुफ्त कोलाडा (जब मुझे यह मिला तब मुफ्त था) को अपने ऐप स्टोर (विंडो> ऐप स्टोर) से निर्यातक बनाने पर विचार कर सकते हैं। मुझे एकता में अपने दृश्य को स्थापित करने और तीन.जेएस के साथ उपयोग के लिए कोलाडा को निर्यात करने के लिए यह काफी आसान लगा।

इसके अलावा, मैंने इस वर्ग को पोस्ट किया है जिसका उपयोग मैं थ्री। जेएस के साथ करता हूं जिसे नियो ( http://rockonflash.com/webGL/three/neo.js ) कहा जाता है । बस इसे अपनी परियोजना में जोड़ें, फिर Neo.JackIntoThree () को कॉल करें और यह आपके प्रोजेक्ट में उपयोग के लिए Object3D के तरीकों / गुणों को जोड़ देगा। ड्राअलैक्सिस () जैसी चीजें अमूल्य हैं जब आपके दृश्य आदि को डीबग करना।

हालाँकि, हाथ नीचे हैं। थ्री जे एक बहुत अच्छा तरीका है - यह काफी लचीला है कि आप अपने शेडर्स / ऑब्जेक्ट्स आदि को लिख सकें, और अपने लक्ष्यों को पूरा करने में मदद करने के लिए बॉक्स के बाहर पर्याप्त शक्तिशाली हो।


3

मैंने तीन.जेएस उठाया, लेकिन जीएलएसएल में भी कूद गया और तीन.जेएस shaderMaterial के साथ बहुत प्रयोग किया। इसके बारे में जाने का एक तरीका है - तीन.js अभी भी आपके लिए बहुत कुछ सार करते हैं, लेकिन यह आपको सभी रेंडरिंग (प्रक्षेपण, एनीमेशन) क्षमताओं के लिए एक बहुत ही स्वच्छ, निम्न स्तर तक पहुंच प्रदान करता है।

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

चूंकि प्रोग्रामेबल शेड्स आधुनिक 3 डी ग्राफिक्स का सार हैं, मुझे आशा है कि मेरा उत्तर बिंदु याद नहीं कर रहा है :) इतनी जल्दी या बाद में, जो कोई भी ऐसा करता है उसे कम से कम यह समझने की जरूरत है कि हुड के नीचे क्या होता है, यह जानवर की प्रकृति है। इसके अलावा, सजातीय अंतरिक्ष में 4 वें आयाम को समझना संभवतः भी महत्वपूर्ण है।

यह पुस्तक WebGL के लिए अच्छी है।


2

मैंने बस दोनों को थोड़ा सीखा और मुझे लगता है कि वेबलॉग की मूल बातें समझें, मुझे लगता है कि वेबलॉग पर एक परिचय पर्याप्त है और फिर तीन जेएस में कूदना है। वेबलॉग की अंतर्निहित अवधारणाओं को समझने के बाद यह बहुत आसान हो जाएगा। उपयोगी कड़ियाँ:

  1. सबसे अच्छा परिचय मैंने पढ़ा है: http://dev.opera.com/articles/view/an-introduction-to-webgl/
  2. व्यापक ट्यूटोरियल: http://www.johannes-raida.de/tutorials.htm
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.