# vtkScalarToRGBA Performance

**URL:** https://discourse.vtk.org/t/vtkscalartorgba-performance/1014
**Category:** Web
**Created:** [May 24, 2019, 12:44am UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014 "2019-05-24T00:44:24Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [May 24, 2019, 12:44am UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014/1 "2019-05-24T00:44:24Z")

</div>

I am loading a 2000 x 2000 8bpp texture through the vtkScalarToRGBA filter. The first render takes between 15 to 20 seconds to render. The interaction performance is great after that first render finishes. I stepped through the code and this section in the vtkScalarToRGBA requestData function is what takes so long:

> for (var idx = 0; idx \< data.length; idx++) {  
> var x = data[idx];  
> model.lookupTable.getColor(x, rgba);  
> rgba[3] = model.piecewiseFunction.getValue(x);  
> rgbaArray[offset++] = 255 \* rgba[0];  
> rgbaArray[offset++] = 255 \* rgba[1];  
> rgbaArray[offset++] = 255 \* rgba[2];  
> rgbaArray[offset++] = 255 \* rgba[3];  
> }

This iteration happens 4,000,000 times (2000 x 2000 texture). I am not very proficient at javascript yet, but is there any way to use pointers to access the lookupTable and piecewiseFunction instead of the call to getColor() and getValue() respectively? Would pointer references speed this process up?

Any help is appreciated.

---

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [May 24, 2019, 12:10pm UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014/2 "2019-05-24T12:10:14Z")

</div>

After digging a little further I discovered it has nothing to do with “pointers”. I forgot how much functionality that the ScalarToRGBA filter has. There are alot of calculations going on. I think I might replace my use of the ScalarToRGBA filter with some basic index lookup logic to manually create the imagedata.

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [May 24, 2019, 2:56pm UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014/3 "2019-05-24T14:56:00Z")

</div>

That filter was made to help someone to get transparency on some slice. All of that can be achieved by the GPU but it is not yet implemented.

---

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [May 25, 2019, 1:24pm UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014/4 "2019-05-25T13:24:47Z")

</div>

Thanks Seb,  
I can see where that filter would be needed, but it was overkill for my task. I was able to get the initial render time down to about 1 second with the following:

> const buffer = new Uint8Array(canvas.width \* canvas.height \* 4);  
> const ibuffer = idata.data;
> 
> ```
> /*the size of the image in bytes */
> const size = idata.width * idata.height;
> 
> var index = 0;
> 
> for (var i = 0; i < size; i += 1) {
> let ind = ibuffer[i];
> buffer[index++] = colors[ind].R;
> buffer[index++] = colors[ind].G;
> buffer[index++] = colors[ind].B;
> if (ind <= 20) {
> buffer[index++] = 0;
> }
> else {
> buffer[index++] = 255;
> }
> }
> 
> ```

---

<div class="post-metadata">

### Author: ![Donny\_Zimmerman](https://discourse.vtk.org/user_avatar/discourse.vtk.org/donny_zimmerman/32/301_2.png) [@Donny\_Zimmerman](https://discourse.vtk.org/u/Donny_Zimmerman)
#### Post date: [May 26, 2019, 2:42am UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014/5 "2019-05-26T02:42:02Z")

</div>

Seb,  
Check out what I have so far using vtk.js. This library is so awesome and I see so many possibilities. Thanks for a the work you guys put into it. Might have to scroll down to bottom of screen and select “desktop view” if using mobile phone.

[http://zmanvortex-001-site2.atempurl.com/RadarViewer](http://zmanvortex-001-site2.atempurl.com/RadarViewer)

---

<div class="post-metadata">

### Author: ![Sebastien\_Jourdain](https://discourse.vtk.org/user_avatar/discourse.vtk.org/sebastien_jourdain/32/100_2.png) [@Sebastien\_Jourdain](https://discourse.vtk.org/u/Sebastien_Jourdain)
#### Post date: [May 27, 2019, 2:52pm UTC](https://discourse.vtk.org/t/vtkscalartorgba-performance/1014/6 "2019-05-27T14:52:28Z")

</div>

Thanks for sharing your work. That looks great.

I’m glad that you see some value and benefit in vtk.js.
