I am seeking to transform an elongated image into a two-dimensional circle using WebGL. This process will involve intentional distortion of the image

Question

I am seeking to transform an elongated image into a two-dimensional circle using WebGL. This process will involve intentional distortion of the image

Trying to figure out how to take a high-resolution image and wrap it into a circle has been a challenge. It's like bending a steel bar until it forms a perfect circle with both ends touching.

I've been grappling with threejs for the past 8 hours, attempting to apply the image as a texture on a circle geometry. However, I'm stuck on how to apply the texture to a long mesh and then properly warp that mesh. The transformation doesn't need to be animated, but we essentially have a 360 panoramic image that needs to be "flattened" into a top-down view.

Instead of sharing my code (since it's not drastically different), I've been experimenting with this tutorial:

At this point, I believe I grasp the general concept.

I've also tried using just canvas to divide the image into strips and warp each strip individually, but this method was incredibly slow and I couldn't get it to function properly either!

Any help or suggestions would be greatly appreciated.

javascript three.js

Answer 1

Answer №1

Here's an alternative shader version for you to check out: Shadertoy - Circle Distortion

Below is the code snippet:

#define dPI 6.28318530718   // 2*PI
#define sR 0.3              // small radius
#define bR 1.0              // big radius

void main(void)
{
// calculate coordinates on the canvas
    vec2 uv = gl_FragCoord.xy / iResolution.xy*2.-vec2(1.);
    uv.x *= iResolution.x/iResolution.y;

// check if it's within the ring area
    float k = 0.0;
    float d = length(uv);
    if(d>sR && d<bR)
        k = 1.0;

// calculate the texture UV
    vec2 tUV = vec2(0.0,0.0);

    // Determine x coordinate for the texture UV
    tUV.x = atan(uv.y/uv.x)/dPI+0.5*(1.-clamp(uv.x,0.0,1.0)/uv.x);

    // Calculate y coordinate for the texture UV
    tUV.y = (d-sR)/(bR-sR);

// output the pixel
    vec3 col = texture2D(iChannel0, tUV).rgb;
    gl_FragColor = vec4(col*k,1.);
}

You can draw a rectangle on the canvas and apply this shader code to see the effect.

I trust this information proves beneficial to you.

Answer 2

Here's an alternative shader version for you to check out: Shadertoy - Circle Distortion

Below is the code snippet:

#define dPI 6.28318530718   // 2*PI
#define sR 0.3              // small radius
#define bR 1.0              // big radius

void main(void)
{
// calculate coordinates on the canvas
    vec2 uv = gl_FragCoord.xy / iResolution.xy*2.-vec2(1.);
    uv.x *= iResolution.x/iResolution.y;

// check if it's within the ring area
    float k = 0.0;
    float d = length(uv);
    if(d>sR && d<bR)
        k = 1.0;

// calculate the texture UV
    vec2 tUV = vec2(0.0,0.0);

    // Determine x coordinate for the texture UV
    tUV.x = atan(uv.y/uv.x)/dPI+0.5*(1.-clamp(uv.x,0.0,1.0)/uv.x);

    // Calculate y coordinate for the texture UV
    tUV.y = (d-sR)/(bR-sR);

// output the pixel
    vec3 col = texture2D(iChannel0, tUV).rgb;
    gl_FragColor = vec4(col*k,1.);
}

You can draw a rectangle on the canvas and apply this shader code to see the effect.

I trust this information proves beneficial to you.

Answer 3

Answer №2

Here is a function utilizing the canvas's context2d to achieve the desired outcome.

The concept involves iterating around the circle with a small angular increment and drawing a thin section of 'texture' along the radius of the circle.

To optimize performance, a potential approach is to manually calculate the transformation required for a single setTransform operation instead of multiple steps.
The optimal step count is determined by step = atan(1, radius)
(visualized: moving one unit upward when at a distance of radius from the center yields tan = 1/radius => step angle = atan(1, radius).)

Find the fiddle link here: http://jsfiddle.net/gamealchemist/hto1s6fy/

Here's a brief example featuring a cloudy landscape:

// draw the part of img defined by the rect (startX, startY, endX, endY) inside 
// the circle of center (cx,cy) between radius (innerRadius -> outerRadius) 
// - no check performed -
function drawRectInCircle(img, cx, cy, innerRadius, outerRadius, startX, startY, endX, endY) {
    var angle = 0;

    var step = 1 * Math.atan2(1, outerRadius);
    var limit = 2 * Math.PI;

    ctx.save();
    ctx.translate(cx, cy);
    while (angle < limit) {
        ctx.save();
        ctx.rotate(angle);
        ctx.translate(innerRadius, 0);
        ctx.rotate(-Math.PI / 2);
        var ratio = angle / limit;
        var x = startX + ratio * (endX - startX);
        ctx.drawImage(img, x, startY, 1, (endY - startY), 0, 0, 1, (outerRadius - innerRadius));
        ctx.restore();
        angle += step;
    }
    ctx.restore();
}

Answer 4

Here is a function utilizing the canvas's context2d to achieve the desired outcome.

The concept involves iterating around the circle with a small angular increment and drawing a thin section of 'texture' along the radius of the circle.

To optimize performance, a potential approach is to manually calculate the transformation required for a single setTransform operation instead of multiple steps.
The optimal step count is determined by step = atan(1, radius)
(visualized: moving one unit upward when at a distance of radius from the center yields tan = 1/radius => step angle = atan(1, radius).)

Find the fiddle link here: http://jsfiddle.net/gamealchemist/hto1s6fy/

Here's a brief example featuring a cloudy landscape:

// draw the part of img defined by the rect (startX, startY, endX, endY) inside 
// the circle of center (cx,cy) between radius (innerRadius -> outerRadius) 
// - no check performed -
function drawRectInCircle(img, cx, cy, innerRadius, outerRadius, startX, startY, endX, endY) {
    var angle = 0;

    var step = 1 * Math.atan2(1, outerRadius);
    var limit = 2 * Math.PI;

    ctx.save();
    ctx.translate(cx, cy);
    while (angle < limit) {
        ctx.save();
        ctx.rotate(angle);
        ctx.translate(innerRadius, 0);
        ctx.rotate(-Math.PI / 2);
        var ratio = angle / limit;
        var x = startX + ratio * (endX - startX);
        ctx.drawImage(img, x, startY, 1, (endY - startY), 0, 0, 1, (outerRadius - innerRadius));
        ctx.restore();
        angle += step;
    }
    ctx.restore();
}

I am seeking to transform an elongated image into a two-dimensional circle using WebGL. This process will involve intentional distortion of the image

Answer №1

Answer №2

Similar questions

React state variable resetting to its initial value unexpectedly

Sending numerous array values from datatables

Incorporate React Components into a traditional HTML, CSS, and JavaScript project

I am encountering difficulty in printing multiple documents from FireStore

Protect database entries from cross-site scripting attacks

the reason behind the peculiar behavior of angularjs ng-include

The specified instant cannot be located in 'moment' while attempting to import {Moment} from 'moment' module

rotation of mesh without moving geometry or changing pivot point (THREEJS)

Populating a ListBox without the need to constantly scroll upwards

What is the process for integrating three.js code manually into an iframe?

Having difficulty in dynamically loading an image from an API's URL in Angular

What are the steps to store and access state variables using session storage in a React application?

Attempting to send JSX as a prop value

Angular app sends a JSON request and receives no data in response

Using jQuery, you can create and add an element to the page when a user clicks

How can I update the color scheme in styled components based on the active state of the component?

Three-dimensional.js and components of the design

There seems to be an issue with the .html() function in one of my

Experience seamless navigation with Highstock's fluid panning feature

Enhance Vaadin 14: Automatically adjust TextArea size when window is resized