Web viewer barrel distortion vr cardboard

[Clouds_Workshop]

Hello there everyone
I had made an app vr based in web view using ip cast.
It work with a small delay as expected

And i need help how do i meke webview to be distorted like in google vr card board (barrel distortion)

Thannk you

[TIMAI2]

Why not show us what it is you are trying to do, and what you need the webviewer to do (that it is not doing) ?

[Clouds_Workshop]

Currently my app view is like this

White square is web view

And i want it tobe like this Not just the shape of webview but also the content of web view is also distorted.

Iam planing using my app viewing my espcam or playing android game via web server ip in cardboard vr headset

Is it possible?? If so then how??

Thank you...

[TIMAI2]

More info needed:

Where do the projections come from, what format are they, etc.

[Taifun]

@Clouds_Workshop

do i meke webview to be distorted like in google vr card board (barrel distortion)

I asked Gemini for you. Below is the answer
Taifun

---

To create a barrel distortion effect on an Android WebView for a Google Cardboard-like experience, you must apply a specific graphic transformation. Since WebView doesn't have a built-in feature for this, you'll need to use a technique that modifies the drawing of the view itself.

The most effective method is to use a Shader. A shader is a program that runs on the GPU and is used to render graphics. By applying a custom shader to your WebView, you can manipulate the pixels as they are being drawn to the screen, creating the barrel distortion effect.

Steps to Implement Barrel Distortion on WebView

• Create a GLSurfaceView: The WebView alone can't be rendered with a shader. You need to create an OpenGL context, and GLSurfaceView is the standard way to do this in Android. This view will serve as a canvas where you will draw your distorted WebView content.
• Capture the WebView content: You need a way to get the content of your WebView as a texture that can be rendered by OpenGL. You can achieve this by setting a WebView as an off-screen render target and then drawing its contents to a bitmap or a texture.
• Implement a Custom Shader: This is the core of the process. You'll write an OpenGL fragment shader that applies the barrel distortion. The shader will take the WebView texture as input and, for each pixel, calculate a new coordinate to sample from the texture. The formula for barrel distortion typically involves a radial calculation from the center of the image.
  • Barrel Distortion Formula: A common formula uses a constant k to control the amount of distortion. The new distorted radius r_d is calculated from the original radius r using an equation like this:
    r_d = r(1 + k_1 r^2 + k_2 r^4 + k_3 r^6)
    Where k_1, k_2, and k_3 are distortion coefficients. The shader will use this formula to map the distorted coordinates to the original, undistorted coordinates of the WebView texture.
• Render the WebView to GLSurfaceView: Once you have the shader and the WebView texture, you'll render a quad (two triangles) to the GLSurfaceView using your custom shader. The shader will then apply the barrel distortion to the WebView texture as it's drawn, producing the final output.
• Handle Stereo View: For a true Google Cardboard experience, you'll need to split the screen into two views (left and right eye). You'll render the same scene twice, with slight shifts in perspective to create a stereo effect. You'll apply the barrel distortion shader to both the left and right halves of the screen to counteract the pincushion distortion of the Cardboard lenses.

[Clouds_Workshop]

Its too confusin the solution is out of my reach i guess i need to learn more bout graphic display on android

But anyway thank you taifun for the explanation

Lets move this to unity then hehe

Thankyou

[Clouds_Workshop]

Projection came from another phone cast ip screen in mjpeg format