WebGL Shader to fix image disortion (fisheye)

Hello, dear community!

I’m pretty much new to Babylon.js, WebGL, and 3d rendering. I’m trying to create 180 (fisheye) Video players. I have to support multiple camera models and lenses. My idea to achieve that is to render hemisphere with video texture which seems to work well. However, some of the videos are distorted.

I’m trying to use WebGL shaders to improve image distortion. You can find sources of shaders here.

For now, I’m trying to apply a “correction” shader to image texture however when I apply the shader to a texture. The shape is stopping rendering. (I have to call dispose of the shader to see it again).

My guess is I’m not setting variables correctly and that’s why I’m experiencing an issue however I’m not quite sure about that.

That would be great if you can take a look at my PG where I isolated my issue.

If you have any better idea how to do image correction fish eye to the hemisphere that would be great as well!

Thank you so much for your time. I really appreciate that

Welcome aboard!

The position attribute is automatically passed to your shader through the position attribute. Same thing for the uv coordinates:

https://playground.babylonjs.com/#1OH09K#413