Javascript Girl
  1. Javascript Girl
  3. WebGL crée la texture
Intereting Posts
Js angulaire – Afficher le message si ng-repeat est vide Comment utiliser Eclipse comme IDE Javascript? Convertir blob en chaîne binaire synchrone Faire tourner l'étiquette alt plus rapidement Pourquoi utiliser un prototype lorsque nous pouvons simplement ajouter une propriété Existe-t-il une limite pour l'utilisation de window.open () en javascript Comment faire de la pâte tinymce en texte brut par défaut Javascript / jquery compte à rebours avec JSfiddle exemple? Champ d'en-tête de demande Access-Control-Allow-Headers n'est pas autorisé par Access-Control-Allow-Headers Diviser un tableau 2D en plusieurs tableaux à l'aide d'un séparateur Comment attraper et faire glisser un élément autour d'un cercle? Obtenir le texte sélectionné étendu à des mots entiers JS Unpacker via PHP – function (p, a, c, k, e, r) Déterminer la taille d'affichage réelle dans le navigateur L'élément positionné fixe scintille dans IE uniquement, comment résoudre?

WebGL crée la texture

J'ai créé avec succès une texture WebGL à partir d'une image et l'ai attiré dans un élément de toile. 

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

J'ai également essayé de créer une texture à partir de l'un de ces types de données, mais sans succès.

  • [Objet ImageData]
  • [Objet CanvasPixelArray]
  • [Objet CanvasRenderingContext2D]

Est-il possible de créer une texture juste avec le tableau de pixels d' une image? Ou en d'autres termes: Est-il possible de créer un objet JS Image hors d'un tableau de pixels?

Modifier:

Le tableau de pixels ressemble à ceci [r,g,b,a,r,g,b,a,r,g,b,a,...] et chaque valeur se situe dans une plage de {0..255}. Je veux créer une texture avec les pixels dans le tableau donné.

Il est absolument possible de créer une texture avec une matrice de pixels! J'utilise ce qui suit dans mon code tout le temps pour créer un seul pixel, une texture de couleur unie. 

 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; }

EDIT: Pour extrapoler un peu plus loin, la plupart de ce que vous devez savoir est dans l'appel gl.texImage2d . Pour créer une texture à partir des données RVB brutes (A), vous avez besoin d'un ensemble de valeurs d'octet non signées, vous devez spécifier à WebGL ce que représentent les données (RGB ou RGBA) et vous devez connaître les dimensions de la texture. Une fonction plus généralisée ressemblerait à ceci: 

 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);