वेबजीएल

Question

में बनावट के साथ रंग बदलें वीडियो गेम में केवल लोडिंग प्रक्रिया को गति देने में मदद के लिए रंग लागू किया जाता है। बनावट तैयार होने के बाद, वे वर्तमान रंगों को प्रतिस्थापित करते हैं। क्या WebGL में ऐसा करने का कोई तरीका है? अब तक देखे गए सभी ट्यूटोरियल केवल रंग या बनावट में लोड करने के लिए दिखाते हैं (दूसरे के बाद एक नहीं)।

मुझे लगता है कि प्रत्येक बनावट के लिए बफर को पूरी तरह से लोड होने के बाद बदलना होगा। मुझे लगता है कि यह एक AJAX कॉल के माध्यम से कुंजी है कि बनावट उपलब्ध है, फिर किसी प्रकार के जावास्क्रिप्ट फ़ंक्शन के माध्यम से लागू किया जाता है। क्या वेबजीएल एक जटिल छवि लोडिंग प्रक्रिया के बिना ऐसा करने के तरीके में बनाया गया है?

Answer 1

अधिकांश गेम जो मैंने आपके द्वारा वर्णित व्यवहार के साथ देखा है, वे आमतौर पर प्रति-वर्टेक्स रंग या बहुत कम रेज बनावट से शुरू होते हैं और जब यह उपलब्ध हो जाता है तो पूर्ण बनावट में "मिश्रण" होता है। उस तरह के चिकनी संक्रमण मुश्किल है, लेकिन यदि आप चाहते हैं कि एक से दूसरे में एक त्वरित "पॉप" है तो यह बहुत अधिक परेशानी नहीं होनी चाहिए।

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

छवि लोड का पता लगाने के लिए के रूप में, यह है कि सभी में मुश्किल नहीं है और तुम भी इसके लिए AJAX की जरूरत नहीं है:

var image = new Image(); 
image.addEventListener("load", function() { 
    // Image is done loading, push to texture 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image); 
    // Set up any other state needed, such as switching the shader for the mesh 
}, true); 
image.src = src; 

मुझे यकीन है कि कितना और अधिक मदद की मैं बिना इस विषय पर दे सकते हैं नहीं कर रहा हूँ वास्तव में बड़े कोड ब्लॉक पोस्ट करना, लेकिन यदि आप अभी भी संघर्ष कर रहे हैं तो मैं कुछ अन्य हिस्सों का विस्तार कर सकता हूं।

Answer 2

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

Answer 3

दृष्टिकोण मैं ले जाएगा के रूप में

loadTexture(url, initialColor) { 

    var tex = gl.createTexture(); 

    // start with a single color. 
    gl.bindTexture(gl.TEXTURE_2D, tex); 
    var pixel = new Uint8Array(initialColor); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, pixel); 

    // start loading the image 
    var img = new Image(); 
    img.src = url; 
    img.onLoad = function() { 

    // when the image has loaded update the texture.   
    gl.bindTexture(gl.TEXTURE_2D, tex); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); 
    gl.generateMipmap(gl.TEXTURE_2D); 
    } 
    return tex; 
} 

// Load a tree texture, use brown until the texture loads. 
var treeTexture = loadTexture("tree.png", [255, 200, 0, 255]); 
// Load a water texture, use blue until it loads. 
var waterTexture = loadTexture("water.jpg", [0, 0, 255, 255]); 

इस प्रकार यह है कि कैसे http://webglsamples.googlecode.com काम पर नमूने के सबसे हालांकि वे नीले बनावट के लिए सभी डिफ़ॉल्ट।

आप आसानी से उस ठोस रंग का उपयोग करने के लिए उस विचार को बढ़ा सकते हैं, लोड को कम-रेज बनावट लोड कर सकते हैं, फिर जब वह एक उच्च-रेज बनावट लोड करता है।

नोट: उपर्युक्त कोड मानता है कि आप पावर ऑफ -2 बनावट लोड कर रहे हैं। यदि नहीं, तो आपको अपने बनावट पैरामीटर को सही तरीके से सेट अप करने की आवश्यकता होगी।