1. Accueil
  2. Question et réponse
  3. Webgl/Javascript: copie de la texture de la toile vers un autre objet de texture de contexte

Webgl/Javascript: copie de la texture de la toile vers un autre objet de texture de contexte

2017-07-05 2 views
0

J'essaie de copier le contenu (affichage d'une image) de mon premier contexte Webgl vers une texture d'un autre contexte webgl. J'utilise la fonction texImage2D avec un élément de canevas comme source, n'obtenant aucune erreur, mais il ne rend que du noir. Je ne sais pas ce qui me manque, donc toute sorte d'aide est grandement appréciée. Je regarde une solution webgl1, et en utilisant Chrome.Webgl/Javascript: copie de la texture de la toile vers un autre objet de texture de contexte

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>

Merci à l'avance :)

Source

2017-07-05 stackoverflowed

+0

Je ne suis pas sûr de ce que votre point était ci-dessous. Le code que j'ai posté est en train de copier depuis canvas1 vers une texture utilisée dans canvas2. Utiliser 'image' était juste un test de débogage. Il a montré que votre vrai bug n'avait rien à voir avec la copie d'une toile. Le vrai bug était ailleurs. Maintenant que le vrai bug est corrigé, il fonctionne comme il se doit. – gman

+0

Je vois! Merci gman, ça marche bien. – stackoverflowed

Répondre

0

La copie fonctionne très bien. Qu'est-ce qui ne fonctionne pas est votre code

Voici ce que je l'ai fait pour trouver le bug

  • d'abord déplacé le code extrait de code pour que je puisse réellement l'exécuter. Veuillez utiliser des extraits à l'avenir.

  • Ensuite, j'ai utilisé une image de imgur. Parce que cette image est sur un autre domaine, je devais définir crossOrigin. Heureusement imgur supporte CORS permettant à WebGL d'utiliser l'image. Si c'était moi, je n'aurais pas utilisé une image parce que cette partie n'est pas importante. Un pixel de couleur unique montrerait la question tout aussi bien et de supprimer la nécessité d'une image

  • Maintenant que le code est en cours d'exécution et le bug montre la première chose à faire était de changer cette ligne dans updateTexture2

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

    juste utiliser la même image

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

    la seconde toile était encore noire montrant la question avait rien à voir avec la copie d'une toile.

  • Alors, à côté, j'édité le fragment shader à ce

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

    la deuxième toile était encore noir. Cela a montré que le problème n'avait rien à voir avec les textures. Le code ne dessinait rien de visible sur la deuxième toile.

  • Alors, en regardant des choses en rapport avec le vertex shader le bug a été ces 2 lignes

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

... 

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

    nécessaires pour être gl.FLOAT pas gl.BYTE

D'autres commentaires au hasard.

  • I utilisé modèle de ligne multi-littéraux pour les shaders

  • Il n'y a aucune raison d'appeler gl.generateMips si la configuration de votre filtrage de ne pas utiliser MIPS

  • Ce code n'a pas de sens

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

    Il n'y a aucune raison de lier la texture ici. gl.uniform1i définit simplement une valeur entière à l'uniforme shaderProgram. Il n'enregistre rien de la texture elle-même si juste

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

    Sans les appels des bindTexture serait bien. En plus de ces uniformes par défaut à 0 de sorte que vous n'avez pas vraiment besoin de l'appel gl.uniform1i. D'un autre côté, peut-être que vous avez eu leur pour le mettre à autre chose que 0 plus tard.

Enfin parce que WebGL ne peut pas partager des ressources à travers des toiles (au moins à partir de Juillet 2017), puis, en fonction de ce que vous faites, vous voudrez peut-être envisager d'utiliser une seule toile. 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>

Source

2017-07-05 23:35:50 gman

 Questions connexes

  • Aucun problème connexe^_^