WebGL Shader to fix image disortion (fisheye)

Questions
,
1

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

2

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

5

Hello, forgive me for not knowing shader, in this example the image texture is projected on the surface of the cube, it looks like the effect of a projector shining on the wall, I want to use this method to project the video on the surface of multiple models, can I do it? In addition, in this example, the image texture will move with the ArcRotateCamera’s left/right panning, and there will be a black space, how to modify this example to keep the image texture projected on the surface of the cube, and at the same time, it will not be moved with the left/right panning of the ArcRotateCamera?

6

@saki, I guess it is a different subject so you should create a new topic ?

8

:ok_hand:Okay, I’ll go create a new thread.