The simplest way to do it

[kt7456]

The simplest way to do it (ie avoiding modifying the volume renderer) would be to have the volume raycaster render the image to an RGBA texture the same size as the canvas. Then you'd draw a quad on top of the mapbox rendering to display this texture, and just invert the y coordinates when you sample values from the texture to flip it upside down. When you render the quad you want to set the blending mode so that it'll blend over the mapbox image properly (src factor ONE and dst factor ONE_MINUS_SRC_ALPHA)

Originally posted by @Twinklebear in https://github.com/Twinklebear/webgl-volume-raycaster/issues/6#issuecomment-1244866382

Can you help me modify it , I don't know how to modify it，thanks！ this is other demo address http://animpen.com/pen/kfpPAJa7 this is old demo address https://plnkr.co/edit/zdKhXxpkDkgIThfm?preview Requires google browser to open

[Twinklebear]

I don't have time to dig into your code, to learn how to do the rendering to texture and flipping of the image check out some WebGL and computer graphics courses:

• Cem put's all his lectures up on youtube and they're excellent: https://graphics.cs.utah.edu/courses/cs4600/fall2022/
• This site also looks good and has some interactive demos you can modify: http://learnwebgl.brown37.net/
• https://webglfundamentals.org/ and https://webgl2fundamentals.org/ might also be interesting. The thing you want to do for the volume rendering is "rendering to a texture": https://webglfundamentals.org/webgl/lessons/webgl-render-to-texture.html . Then you use that texture to display the rendered image and flip it when you display it.