1. 首頁
  2. 問答
  3. 的WebGL/JavaScript的：帆布質地的內容複製到另一個上下文紋理對象

的WebGL/JavaScript的：帆布質地的內容複製到另一個上下文紋理對象

2017-07-05 33 views
0

我想我的第一個WebGL的上下文的內容（圖像顯示），從另一個方面的WebGL複製到紋理。 我使用texImage2D功能用帆布元素作爲源，沒有得到任何錯誤，但它呈現什麼，但黑色。 我不知道我錯過了什麼，因此任何形式的幫助是極大的讚賞。 我期待在webgl1的解決方案，並使用Chrome。的WebGL/JavaScript的：帆布質地的內容複製到另一個上下文紋理對象

var canvas1; 
 
var texture1; 
 
var image; 
 
var shaderProgram; 
 
var vertex_buffer; 
 
var texture_buffer; 
 
var aVertLocation; 
 
var aTexLocation; 
 
var vertices = []; 
 
var texCoords = []; 
 

 
var gl; 
 
var gl2; 
 
var canvas2; 
 
var texture2; 
 
var shaderProgram2; 
 
var vertex_buffer2; 
 
var texture_buffer2; 
 
var index_Buffer2; 
 
var aVertLocation2; 
 
var aTexLocation2; 
 
var vertices2 = []; 
 
var texCoords2 = []; 
 

 
indices = [0, 1, 2, 0, 2, 3]; 
 
vertices = [-1, -1, 1, -1, 1, 1, -1, 1]; 
 
texCoords = [0, 0, 1, 0, 1, 1, 0, 1]; 
 

 
function initApp() 
 
{ 
 
    initWebGL(); 
 
    
 
    image = new Image(); 
 
    image.onload = function(){ 
 
    render(); 
 
    render2(); 
 
    } 
 
    image.crossOrigin = ''; 
 
    image.src = 'https://i.imgur.com/ZKMnXce.png'; 
 
} 
 

 
function initWebGL() 
 
{ 
 

 
    canvas1 = document.getElementById('glCanvas1'); 
 
    gl = canvas1.getContext('webgl'); 
 

 
    /*====================== Shaders =======================*/ 
 

 
    // Vertex shader source code 
 
    var vertCode = 
 
    'attribute vec2 coordinates;' + 
 
    'attribute vec2 aTexCoord;' + 
 
    'varying highp vec2 vTexCoord;' + 
 
    'void main(void) {' + 
 
     'gl_Position = vec4(coordinates,1.0,1.0);' + 
 
     'vTexCoord = aTexCoord;' + 
 
    '}'; 
 
    var vertShader = gl.createShader(gl.VERTEX_SHADER); 
 
    gl.shaderSource(vertShader, vertCode); 
 
    gl.compileShader(vertShader); 
 

 
    //fragment shader source code 
 
    var fragCode = 
 
    'uniform sampler2D texture;' + 
 
    'varying highp vec2 vTexCoord;' + 
 
    'void main(void) {' + 
 
     ' gl_FragColor = texture2D(texture, vTexCoord);' + 
 
    '}'; 
 
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER); 
 
    gl.shaderSource(fragShader, fragCode); 
 
    gl.compileShader(fragShader); 
 

 
    shaderProgram = gl.createProgram(); 
 
    gl.attachShader(shaderProgram, vertShader); 
 
    gl.attachShader(shaderProgram, fragShader); 
 
    gl.deleteShader(vertShader); 
 
    gl.deleteShader(fragShader); 
 
    gl.linkProgram(shaderProgram); 
 
    gl.useProgram(shaderProgram); 
 

 
    aVertLocation = gl.getAttribLocation(shaderProgram, "coordinates"); 
 
    aTexLocation = gl.getAttribLocation(shaderProgram, "aTexCoord"); 
 

 
    vertex_buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 
 
    gl.enableVertexAttribArray(aVertLocation); 
 
    gl.vertexAttribPointer(aVertLocation, 2, gl.FLOAT, false, 0, 0); 
 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, null); 
 

 
    texture_buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer); 
 
    gl.enableVertexAttribArray(aTexLocation); 
 
    gl.vertexAttribPointer(aTexLocation, 2, gl.FLOAT, false, 0, 0); 
 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, null); 
 

 
    index_buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); 
 
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 
 

 
    texture1 = gl.createTexture(); 
 
    gl.bindTexture(gl.TEXTURE_2D, texture1); 
 
    gl.uniform1i(gl.getUniformLocation(shaderProgram, 'texture'), 0); 
 
    gl.bindTexture(gl.TEXTURE_2D, null); 
 

 

 
    //==========================================================// 
 

 
    canvas2 = document.getElementById('glCanvas2'); 
 
    gl2 = canvas2.getContext('webgl'); 
 
    var vertShader2 = gl2.createShader(gl2.VERTEX_SHADER); 
 
    var fragShader2 = gl2.createShader(gl2.FRAGMENT_SHADER); 
 
    gl2.shaderSource(vertShader2, vertCode); 
 
    gl2.shaderSource(fragShader2, fragCode); 
 
    gl2.compileShader(vertShader2); 
 
    gl2.compileShader(fragShader2); 
 

 
    shaderProgram2 = gl2.createProgram(); 
 
    gl2.attachShader(shaderProgram2, vertShader2); 
 
    gl2.attachShader(shaderProgram2, fragShader2); 
 
    gl2.deleteShader(vertShader2); 
 
    gl2.deleteShader(fragShader2); 
 
    gl2.linkProgram(shaderProgram2); 
 
    gl2.useProgram(shaderProgram2); 
 

 
    aVertLocation2 = gl2.getAttribLocation(shaderProgram2, "coordinates"); 
 
    aTexLocation2 = gl2.getAttribLocation(shaderProgram2, "aTexCoord"); 
 

 
    vertex_buffer2 = gl2.createBuffer(); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, vertex_buffer2); 
 
    gl2.enableVertexAttribArray(aVertLocation2); 
 
    gl2.vertexAttribPointer(aVertLocation2, 2, gl2.BYTE, false, 0, 0); 
 
    gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array(vertices), gl2.STATIC_DRAW); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, null); 
 

 
    texture_buffer2 = gl2.createBuffer(); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, texture_buffer2); 
 
    gl2.enableVertexAttribArray(aTexLocation2); 
 
    gl2.vertexAttribPointer(aTexLocation, 2, gl2.BYTE, false, 0, 0); 
 
    gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array(texCoords), gl2.STATIC_DRAW); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, null); 
 

 
    index_buffer2 = gl2.createBuffer(); 
 
    gl2.bindBuffer(gl2.ELEMENT_ARRAY_BUFFER, index_buffer2); 
 
    gl2.bufferData(gl2.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl2.STATIC_DRAW); 
 
    gl2.bindBuffer(gl2.ELEMENT_ARRAY_BUFFER, null); 
 

 
    texture2 = gl2.createTexture(); 
 
    gl2.bindTexture(gl2.TEXTURE_2D, texture2); 
 
    gl2.uniform1i(gl2.getUniformLocation(shaderProgram2, 'texture'), 0); 
 
    gl2.bindTexture(gl2.TEXTURE_2D, null); \t 
 
} 
 

 
function updateTexture() 
 
{ 
 
    gl.bindTexture(gl.TEXTURE_2D, texture1); 
 
    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); 
 
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
 
    gl.generateMipmap(gl.TEXTURE_2D); 
 
    gl.bindTexture(gl.TEXTURE_2D, null); 
 
} \t 
 

 
function render() 
 
{ 
 
    if (!shaderProgram) return; 
 
    updateTexture(); 
 
    gl.clearColor(0.0, 0.0, 0.0, 1.0); 
 
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
 
    gl.bindTexture(gl.TEXTURE_2D, texture1); 
 
    gl.enableVertexAttribArray(aVertLocation); 
 
    gl.enableVertexAttribArray(aTexLocation); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer) 
 
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 
 
    gl.disableVertexAttribArray(aVertLocation); 
 
    gl.disableVertexAttribArray(aTexLocation); 
 

 
} 
 

 
function updateTexture2() 
 
{ 
 
    gl2.bindTexture(gl2.TEXTURE_2D, texture2); 
 
    gl2.texImage2D(gl2.TEXTURE_2D, 0, gl2.RGBA, gl2.RGBA, gl2.UNSIGNED_BYTE, canvas1); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.LINEAR); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.LINEAR); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_S, gl2.CLAMP_TO_EDGE); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_T, gl2.CLAMP_TO_EDGE); 
 
    gl2.generateMipmap(gl2.TEXTURE_2D); \t \t 
 
    gl2.bindTexture(gl2.TEXTURE_2D, null); 
 
} \t 
 

 
function render2() 
 
{ 
 
    if (!shaderProgram2) return; 
 
    updateTexture2(); 
 
    gl2.clearColor(0.0, 0.0, 0.0, 1.0); 
 
    gl2.clear(gl2.COLOR_BUFFER_BIT | gl2.DEPTH_BUFFER_BIT); 
 
    gl2.bindTexture(gl2.TEXTURE_2D, texture2); 
 
    gl2.enableVertexAttribArray(aVertLocation2); 
 
    gl2.enableVertexAttribArray(aTexLocation2); 
 
    gl2.bindBuffer(gl2.ELEMENT_ARRAY_BUFFER, index_buffer2); 
 
    gl2.drawElements(gl2.TRIANGLES, 6, gl2.UNSIGNED_SHORT,0); 
 
    gl2.disableVertexAttribArray(aVertLocation2); 
 
    gl2.disableVertexAttribArray(aTexLocation2); 
 
} 
 

 
document.addEventListener('DOMContentLoaded', initApp);
<canvas id="glCanvas1" width="128" height="128" ></canvas> 
 
<canvas id="glCanvas2" width="128" height="128" ></canvas>

感謝提前:)

來源

2017-07-05 stackoverflowed

+0

我不知道你的觀點是什麼下文。我發佈的代碼是從canvas1複製到canvas2中使用的紋理。使用'image'只是一個調試測試。它表明你真正的bug與複製畫布無關。真正的錯誤在別的地方。現在這個真正的bug已經修復了，它應該可以正常工作。 – gman

+0

我明白了！ 謝謝gman，它工作正常。 – stackoverflowed

回答

0

副本將工作得很好。什麼是不工作的是你的代碼

這裏就是我所做找到錯誤

  • 首先移動代碼段，這樣我可以實際運行它。請在將來使用片段。

  • 接着我從imgur使用的圖像。由於該圖片位於另一個域，因此我需要設置crossOrigin。幸運的是，imgur支持CORS，允許WebGL使用該圖像。如果是我，我不會使用圖像，因爲那部分並不重要。單一色的像素將呈現問題一樣好，並刪除需要一個圖像

  • 現在運行代碼和錯誤顯示做的第一件事就是改變這一行updateTexture2

    gl2.texImage2D(gl2.TEXTURE_2D, 0, gl2.RGBA, gl2.RGBA, gl2.UNSIGNED_BYTE, canvas1);

    只使用相同的圖像

    gl2.texImage2D(gl2.TEXTURE_2D, 0, gl2.RGBA, gl2.RGBA, gl2.UNSIGNED_BYTE, image);

    第二畫布還是黑色顯示的問題沒有什麼用複製的畫布。

  • 所以，下次我編輯的片段着色器這個

    gl_FragColor = vec4(1,0,0,1);

    第二畫布是仍是黑色的。這表明這個問題與紋理無關。代碼沒有繪製任何可見的第二個畫布。

  • 所以，看相關的頂點着色器的東西錯誤是這兩條線

    gl2.vertexAttribPointer(aVertLocation2, 2, gl2.BYTE, false, 0, 0); 

... 

gl2.vertexAttribPointer(aTexLocation, 2, gl2.BYTE, false, 0, 0);

    是gl.FLOAT不gl.BYTE

其他一些隨機的意見需要。

  • 我用多行模板文字的着色器

  • 如果您的過濾設置爲不使用MIPS

  • 這個代碼是沒有意義的有沒有理由罵gl.generateMips

    gl.bindTexture(gl.TEXTURE_2D, texture1); 
gl.uniform1i(gl.getUniformLocation(shaderProgram, 'texture'), 0); 
gl.bindTexture(gl.TEXTURE_2D, null);

    沒有理由在這裏綁定紋理。 gl.uniform1i只是將整數值設置爲統一shaderProgram。它不記錄有關本身的質感東西所以才

    gl.uniform1i(gl.getUniformLocation(shaderProgram, 'texture'), 0);

    沒有的bindTexture通話將被罰款。除此之外，制服默認爲0，所以你不需要撥打gl.uniform1i。另一方面，也許你有他們把它設置爲0以外的東西。

最後因爲WebGL的不能跨畫布共享資源（至少2017年7月），那麼，這取決於你正在做什麼，你可能要考慮使用一個單一的畫布。 See the last solution in this answer

var canvas1; 
 
var texture1; 
 
var image; 
 
var shaderProgram; 
 
var vertex_buffer; 
 
var texture_buffer; 
 
var aVertLocation; 
 
var aTexLocation; 
 
var vertices = []; 
 
var texCoords = []; 
 

 
var gl; 
 
var gl2; 
 
var canvas2; 
 
var texture2; 
 
var shaderProgram2; 
 
var vertex_buffer2; 
 
var texture_buffer2; 
 
var index_Buffer2; 
 
var aVertLocation2; 
 
var aTexLocation2; 
 
var vertices2 = []; 
 
var texCoords2 = []; 
 

 
indices = [0, 1, 2, 0, 2, 3]; 
 
vertices = [-1, -1, 1, -1, 1, 1, -1, 1]; 
 
texCoords = [0, 0, 1, 0, 1, 1, 0, 1]; 
 

 
function initApp() 
 
{ 
 
    initWebGL(); 
 
    
 
    image = new Image(); 
 
    image.onload = function(){ 
 
    render(); 
 
    render2(); 
 
    } 
 
    image.crossOrigin = ''; 
 
    image.src = 'https://i.imgur.com/ZKMnXce.png'; 
 
} 
 

 
function initWebGL() 
 
{ 
 

 
    canvas1 = document.getElementById('glCanvas1'); 
 
    gl = canvas1.getContext('webgl'); 
 

 
    /*====================== Shaders =======================*/ 
 

 
    // Vertex shader source code 
 
    var vertCode = ` 
 
    attribute vec2 coordinates; 
 
    attribute vec2 aTexCoord; 
 
    varying highp vec2 vTexCoord; 
 
    void main(void) { 
 
     gl_Position = vec4(coordinates,1.0,1.0); 
 
     vTexCoord = aTexCoord; 
 
    } 
 
    `; 
 
    var vertShader = gl.createShader(gl.VERTEX_SHADER); 
 
    gl.shaderSource(vertShader, vertCode); 
 
    gl.compileShader(vertShader); 
 

 
    //fragment shader source code 
 
    var fragCode = ` 
 
    precision mediump float; 
 
    uniform sampler2D texture; 
 
    varying highp vec2 vTexCoord; 
 
    void main(void) { 
 
     gl_FragColor = texture2D(texture, vTexCoord); 
 
    } 
 
    `; 
 
    var fragShader = gl.createShader(gl.FRAGMENT_SHADER); 
 
    gl.shaderSource(fragShader, fragCode); 
 
    gl.compileShader(fragShader); 
 

 
    shaderProgram = gl.createProgram(); 
 
    gl.attachShader(shaderProgram, vertShader); 
 
    gl.attachShader(shaderProgram, fragShader); 
 
    gl.deleteShader(vertShader); 
 
    gl.deleteShader(fragShader); 
 
    gl.linkProgram(shaderProgram); 
 
    gl.useProgram(shaderProgram); 
 

 
    aVertLocation = gl.getAttribLocation(shaderProgram, "coordinates"); 
 
    aTexLocation = gl.getAttribLocation(shaderProgram, "aTexCoord"); 
 

 
    vertex_buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer); 
 
    gl.enableVertexAttribArray(aVertLocation); 
 
    gl.vertexAttribPointer(aVertLocation, 2, gl.FLOAT, false, 0, 0); 
 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, null); 
 

 
    texture_buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, texture_buffer); 
 
    gl.enableVertexAttribArray(aTexLocation); 
 
    gl.vertexAttribPointer(aTexLocation, 2, gl.FLOAT, false, 0, 0); 
 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, null); 
 

 
    index_buffer = gl.createBuffer(); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer); 
 
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null); 
 

 
    texture1 = gl.createTexture(); 
 
    gl.bindTexture(gl.TEXTURE_2D, texture1); 
 
    gl.uniform1i(gl.getUniformLocation(shaderProgram, 'texture'), 0); 
 
    gl.bindTexture(gl.TEXTURE_2D, null); 
 

 

 
    //==========================================================// 
 

 
    canvas2 = document.getElementById('glCanvas2'); 
 
    gl2 = canvas2.getContext('webgl'); 
 
    var vertShader2 = gl2.createShader(gl2.VERTEX_SHADER); 
 
    var fragShader2 = gl2.createShader(gl2.FRAGMENT_SHADER); 
 
    gl2.shaderSource(vertShader2, vertCode); 
 
    gl2.shaderSource(fragShader2, fragCode); 
 
    gl2.compileShader(vertShader2); 
 
    gl2.compileShader(fragShader2); 
 

 
    shaderProgram2 = gl2.createProgram(); 
 
    gl2.attachShader(shaderProgram2, vertShader2); 
 
    gl2.attachShader(shaderProgram2, fragShader2); 
 
    gl2.deleteShader(vertShader2); 
 
    gl2.deleteShader(fragShader2); 
 
    gl2.linkProgram(shaderProgram2); 
 
    gl2.useProgram(shaderProgram2); 
 

 
    aVertLocation2 = gl2.getAttribLocation(shaderProgram2, "coordinates"); 
 
    aTexLocation2 = gl2.getAttribLocation(shaderProgram2, "aTexCoord"); 
 

 
    vertex_buffer2 = gl2.createBuffer(); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, vertex_buffer2); 
 
    gl2.enableVertexAttribArray(aVertLocation2); 
 
    gl2.vertexAttribPointer(aVertLocation2, 2, gl2.FLOAT, false, 0, 0); 
 
    gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array(vertices), gl2.STATIC_DRAW); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, null); 
 

 
    texture_buffer2 = gl2.createBuffer(); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, texture_buffer2); 
 
    gl2.enableVertexAttribArray(aTexLocation2); 
 
    gl2.vertexAttribPointer(aTexLocation, 2, gl2.FLOAT, false, 0, 0); 
 
    gl2.bufferData(gl2.ARRAY_BUFFER, new Float32Array(texCoords), gl2.STATIC_DRAW); 
 
    gl2.bindBuffer(gl2.ARRAY_BUFFER, null); 
 

 
    index_buffer2 = gl2.createBuffer(); 
 
    gl2.bindBuffer(gl2.ELEMENT_ARRAY_BUFFER, index_buffer2); 
 
    gl2.bufferData(gl2.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl2.STATIC_DRAW); 
 
    gl2.bindBuffer(gl2.ELEMENT_ARRAY_BUFFER, null); 
 

 
    texture2 = gl2.createTexture(); 
 
    gl2.bindTexture(gl2.TEXTURE_2D, texture2); 
 
    gl2.uniform1i(gl2.getUniformLocation(shaderProgram2, 'texture'), 0); 
 
    gl2.bindTexture(gl2.TEXTURE_2D, null); \t 
 
} 
 

 
function updateTexture() 
 
{ 
 
    gl.bindTexture(gl.TEXTURE_2D, texture1); 
 
    gl.pixelStorei(gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE); 
 
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true); 
 
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 
 
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 
 
    gl.generateMipmap(gl.TEXTURE_2D); 
 
    gl.bindTexture(gl.TEXTURE_2D, null); 
 
} \t 
 

 
function render() 
 
{ 
 
    if (!shaderProgram) return; 
 
    updateTexture(); 
 
    gl.clearColor(0.0, 0.0, 0.0, 1.0); 
 
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 
 
    gl.bindTexture(gl.TEXTURE_2D, texture1); 
 
    gl.enableVertexAttribArray(aVertLocation); 
 
    gl.enableVertexAttribArray(aTexLocation); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer) 
 
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 
 
    gl.disableVertexAttribArray(aVertLocation); 
 
    gl.disableVertexAttribArray(aTexLocation); 
 

 
} 
 

 
function updateTexture2() 
 
{ 
 
    gl2.bindTexture(gl2.TEXTURE_2D, texture2); 
 
    gl2.texImage2D(gl2.TEXTURE_2D, 0, gl2.RGBA, gl2.RGBA, gl2.UNSIGNED_BYTE, canvas1); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MAG_FILTER, gl2.LINEAR); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_MIN_FILTER, gl2.LINEAR); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_S, gl2.CLAMP_TO_EDGE); 
 
    gl2.texParameteri(gl2.TEXTURE_2D, gl2.TEXTURE_WRAP_T, gl2.CLAMP_TO_EDGE); 
 
    gl2.generateMipmap(gl2.TEXTURE_2D); \t \t 
 
    gl2.bindTexture(gl2.TEXTURE_2D, null); 
 
} \t 
 

 
function render2() 
 
{ 
 
    if (!shaderProgram2) return; 
 
    updateTexture2(); 
 
    gl2.clearColor(0.0, 0.0, 0.0, 1.0); 
 
    gl2.clear(gl2.COLOR_BUFFER_BIT | gl2.DEPTH_BUFFER_BIT); 
 
    gl2.bindTexture(gl2.TEXTURE_2D, texture2); 
 
    gl2.enableVertexAttribArray(aVertLocation2); 
 
    gl2.enableVertexAttribArray(aTexLocation2); 
 
    gl2.bindBuffer(gl2.ELEMENT_ARRAY_BUFFER, index_buffer2); 
 
    gl2.drawElements(gl2.TRIANGLES, 6, gl2.UNSIGNED_SHORT,0); 
 
    gl2.disableVertexAttribArray(aVertLocation2); 
 
    gl2.disableVertexAttribArray(aTexLocation2); 
 
} 
 

 
document.addEventListener('DOMContentLoaded', initApp);
<canvas id="glCanvas1" width="128" height="128" ></canvas> 
 
<canvas id="glCanvas2" width="128" height="128" ></canvas>

來源

2017-07-05 23:35:50 gman

相關問題

 相關問題