mortac8 Posted August 30, 2020 Share Posted August 30, 2020 (edited) I am new to Pixi and webgl so I apologize for the simple question which is below. I have tried several ways of completing my work trying to create an image editing tool but hit several speedbumps (premultiplied alpha pixel changes in a 2d context, being totally new to webgl2, etc). I have my app "done" using 2d canvas but there are many problems that it seems like webgl be a solution for. Is it possible to do the following with Pixi.js? - load image data as a Uint16Array (I was going to load data from PNG using pngtoy or UPNG to get the Uint16Array) - display, transform and scale the image via mouse actions (ie: zoom and pan using mouse) - modify individual pixel values in 16-bit (I am working with 16-bit per channel images but display in 8-bit is fine as long as I can work in 16-bit then convert that result to 8-bit) Is Pixi.js the right tool to do the 3 items above? I am new and just looking for direction on what tools I should use. Thanks for your time! Edited August 30, 2020 by mortac8 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 30, 2020 Share Posted August 30, 2020 Uint16Array, like, 6-5-5 or 16 bits per channel? Yes, you can do it. If you know how webgl does it PixiJS objects do same things, just easier to write code. If you dont know - well, you should learn it. PixiJS texture modification is done either through 1. Canvas2D , Texture.from(canvas), texture.update() every time its updated 2. Your custom array + TextureResource that has a call of "texImage2d" with special format types . Search this subforum & pixijs issues for "Uint16Array", "texImage2d" to see how other people did it. Quote Link to comment Share on other sites More sharing options...
mortac8 Posted August 30, 2020 Author Share Posted August 30, 2020 (edited) Thanks for your advice! My images are 16-bit PNG. For example a red pixel is: 65535,0,0 or 65535,0,0,65535 in RGBA. Edited August 30, 2020 by mortac8 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted August 30, 2020 Share Posted August 30, 2020 looks like RGBA16UI : https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texImage2D It will work only in WebGL2, format should be RGBA, internalFormat RGBA16UI, type gl.UNSIGNED_SHORT Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.