वेबजीएल बनावट बनाते हैं

Question

मैंने सफलतापूर्वक एक छवि से एक वेबजीएल बनावट बनाई और इसे कैनवास तत्व में खींचा।

function initTexture(src) { 
    texture = gl.createTexture(); 
    texture.image = new Image(); 
    texture.image.onload = function() { 
    handleLoadedTexture(texture) 
    } 

    texture.image.src = src; 
} 

मैंने इन डेटाटाइपों में से एक से बनावट बनाने की भी कोशिश की, लेकिन बिना सफलता के।

• [वस्तु ImageData]
• [वस्तु CanvasPixelArray]
• [वस्तु CanvasRenderingContext2D]

यह सिर्फ एक छवि के पिक्सेल सारणी के साथ एक बनावट बनाने के लिए संभव है? या दूसरे शब्दों में: क्या एक पिक्सेल सरणी से जेएस छवि ऑब्जेक्ट बनाना संभव है?

संपादित करें:

पिक्सेल सारणी इस [r,g,b,a,r,g,b,a,r,g,b,a,...] तरह लग रहा है और प्रत्येक मान {0..255} की एक श्रेणी में है। मैं दिए गए सरणी में पिक्सेल के साथ बनावट बनाना चाहता हूं।

Answer 1

पिक्सेल सरणी के साथ बनावट बनाना बिल्कुल संभव है! मैं एक ही पिक्सेल, ठोस रंग बनावट बनाने के लिए हर समय अपने कोड में निम्नलिखित का उपयोग करता हूं।

function createSolidTexture(gl, r, g, b, a) { 
    var data = new Uint8Array([r, g, b, a]); 
    var texture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); 
    return texture; 
} 

संपादित करें: अनुमान लगाना इस थोड़ा आगे, क्या आप जानना चाहते हैं के सबसे gl.texImage2d कॉल में है। कच्चे आरजीबी (ए) डेटा से बनावट बनाने के लिए आपको बिना हस्ताक्षरित बाइट मानों की एक सरणी की आवश्यकता होती है, आपको वेबजीएल को निर्दिष्ट करना होगा कि डेटा क्या दर्शाता है (आरजीबी या आरजीबीए), और आपको बनावट के आयामों को जानने की आवश्यकता है। एक अधिक सामान्यीकृत कार्य इस तरह दिखेगा:

function textureFromPixelArray(gl, dataArray, type, width, height) { 
    var dataTypedArray = new Uint8Array(dataArray); // Don't need to do this if the data is already in a typed array 
    var texture = gl.createTexture(); 
    gl.bindTexture(gl.TEXTURE_2D, texture); 
    gl.texImage2D(gl.TEXTURE_2D, 0, type, width, height, 0, type, gl.UNSIGNED_BYTE, dataTypedArray); 
    // Other texture setup here, like filter modes and mipmap generation 
    return texture; 
} 

// RGB Texture: 
// For a 16x16 texture the array must have at least 768 values in it (16x16x3) 
var rgbTex = textureFromPixelArray(gl, [r,g,b,r,g,b...], gl.RGB, 16, 16); 

// RGBA Texture: 
// For a 16x16 texture the array must have at least 1024 values in it (16x16x4) 
var rgbaTex = textureFromPixelArray(gl, [r,g,b,a,r,g,b,a...], gl.RGBA, 16, 16);