0

I'm using DataTexture to load Uint8Array Image (download link), here my code:

var map = new THREE.DataTexture( data, 128, 128, THREE.RGBFormat );
map.needsUpdate = true;
material.needsUpdate = true;
material.map = map;

But texture is black and receive these error:

In Firefox:

Error: WebGL: texImage2D: not enough data for operation (need 49152, have 5210)
Error: WebGL: generateMipmap: Level zero of texture is not defined.

In Chrome: 

WebGL: INVALID_OPERATION: texImage2D: ArrayBufferView not big enough for request

Any advice to get this working?

Thanks.

(I have tried to convert Uint8Array Image to Data64 and load to diffuse map ok, but I don't want to use this way because I'm trying to hide texture from network tab in Chrome F12, using data64 will show the texture...)

Ben Mack
  • 489
  • 2
  • 7
  • 29

1 Answers1

1

I see three.js internally call the THREE.Texture and DataTexture is wrapper over it. The reason of this could be data is corrupted because the texture three would be expecting some thing from data64 thats is the reason you were getting correct display with data64.

Ajit kohir
  • 481
  • 5
  • 14
  • Look like DataTexture accepts Uint8Array, but I can't get it work. Any suggest about this without convert to Data64? – Ben Mack Jun 08 '15 at 02:02
  • 1
    I understand your need you want to convert image data into Uint8Array. You can do this: function getData(image) { var canvas = document.createElement('canvas'); canvas.width = image.width; canvas.height = image.height; var context = canvas.getContext('2d'); context.drawImage(image, 0, 0); return new Uint8Array(context.getImageData(0, 0, image.width, image.height).data); } source: http://stackoverflow.com/questions/28943424/three-js-updating-datatextures-with-a-rendertargets-image-data not tried my self but it seems it should work. Please let me know if concerns – Ajit kohir Jun 08 '15 at 02:11
  • No, my image is already Uint8Array, now my problem is convert Uint8Array to something that can use as texture in Three.js. :) – Ben Mack Jun 08 '15 at 02:42
  • 1
    can you host the link or jsFiddle for same. Means this look Uint8 array data is not correct. A little more debugging required so either you can share the snippet because present one look generic. Texture2D call from graphics is created it seems texture problem have you tried with color and write down custom shader for same. instead of texture2D call make vec4(r,g,b,a) pass uniform r,g,b and a correspondingly – Ajit kohir Jun 08 '15 at 02:59
  • 1
    var Uint8Image = THREE.ImageUtils.generateDataTexture(1024,1024, new THREE.Color(0xff0000)) copy this line on you file lin 136 you will see red model. This confirm that our datatexture uint8 is corrupt and we are not getting as expected from external library pngdrive. I am also doing one thing with image update you soon – Ajit kohir Jun 08 '15 at 05:36
  • 1
    Your problem resolve with image too :) it is issue with the pngdrive uint8 data what you do is either use var gl = renderer.getContext() then pass image data to gl like the above function getdata() (or else copy the getdata() in upper link ) then make THREE.DataTexture from same then pass this texture to your material you see the solution. The solution look like this image.onload= function(){ datatexture =getData(image) var image = THREE.DataTexture(datatexture,image.width,image.height) varUint8Image=image (line 136) aand so on} this solve the issue ping me if any trouble – Ajit kohir Jun 08 '15 at 06:29
  • 1
    Extreme sorry i am on mobile and can't upload the file on browser :( the solution is simple just follow my prev instruction i upate package when got desktop browser. Meanwhile i prepare snippet here – Ajit kohir Jun 08 '15 at 07:25
  • 1
    Just copy these line below your problem comment: var image = new Image(); image.src ="protect.png" image.onload=function(){dataTexture =getData(image); var image = new THREE.DataTexture(dataTexture, image .width,image.height); var Uint8Image = image; //rest your code of jsonloader and passing geometry and texture} function getData(image){var canvas =document.createElement('canvas')..... retrun new Uint8Array(context.getImageData(....).data)} this is same function which i copy pasted in)our second conversation.pls comment renderer.setPixelRatio(window.devicePixelRatio) to avoid black screen:) – Ajit kohir Jun 08 '15 at 08:19
  • 1
    Yup i know my complete point to do same is that we are not getting correct imagedata probably encode and decode operation of pngdrive. if you see line 74(pngdrive) it do the same which i have done rest it is simple file of key and value. Where each file is name with its file. You can simulate same and the way our fucntion is returning is uint8 data. Ask me if not clear – Ajit kohir Jun 08 '15 at 09:16
  • I have did like your suggest, the result is it's take parent image (protect.png) as map :-/, not the child ("Map-COL.jpg") – Ben Mack Jun 08 '15 at 09:50
  • Do you have any free time? Can you take a look at this? – Ben Mack Jun 09 '15 at 23:02
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/80159/discussion-between-stallion-and-ben-mack). – Ajit kohir Jun 10 '15 at 10:26