Tips for creating a 360 x 235 degree FOV image using three.js

Question

Tips for creating a 360 x 235 degree FOV image using three.js

My camera captures round images with a 235-degree field of view, like this one: https://i.sstatic.net/qNfrX.jpg

I am familiar with threejs and have successfully rendered 360x360 images as equirectangular projections. However, I want to use threejs to render my round image within a sphere. I have reviewed some examples (here and here) that point me in the right direction, but I need help putting all the pieces together.

The example with the eyeball gets me close, but copying its code results in my image appearing twice on the sphere. I attempted creating a partial sphere by adjusting SphereGeometry's constructor, but encountered issues with texture mapping.

My main question is how to achieve this, specifically regarding:

How to control the texture painting onto the mesh (to apply it once and only where needed)
Understanding UV mapping and determining the correct UVs for my image to prevent it from being displayed on the back of the sphere

javascript three.js texture-mapping

Answer 1

Answer №1

After delving into UVs and conducting various experiments, I have come up with a refined code snippet that I am beginning to grasp. Here is the relevant portion of the working code:

var geometry = new THREE.SphereGeometry( 30, 256, 128, 0, Math.PI * 2, 0, Math.PI );
geometry.scale( - 1, 1, 1 );//inside out

var imgWidth = 0.8;//Initially calculated as 235/360, but adjusted through trial and error for reduced fisheye distortion

var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
for ( i = 0; i < faceVertexUvs.length; i ++ ) {

    var uvs = faceVertexUvs[ i ];
    var face = geometry.faces[ i ];
    //y represents top to bottom
    //z denotes in-out direction
    //x indicates side-to-side orientation; positive x signifies front, while negative denotes back

    for ( var j = 0; j < 3; j ++ ) {
        var fvNj = face.vertexNormals[j];
        var yaw = Math.atan2(fvNj.z, fvNj.x)/(Math.PI); //rotation around axis, ranging from -1 to 1
        var pitch = Math.asin(fvNj.y)/Math.PI; //elevation angle, ranges from -0.5 to 0.5
        pitch = pitch * -1 + 0.5;//invert and normalize to range from zero to one
        pitch *= imgWidth;

        if(pitch < 0.5){
            //considering fisheye correction??
            //var correction = (fvNj.x == 0 && fvNj.z == 0) ? 1 : (Math.acos(fvNj.y) / Math.sqrt(fvNj.x * fvNj.x + fvNj.z * fvNj.z)) * (2 / Math.PI);
            var x = Math.cos(yaw * Math.PI);//range from -1 to 1
            var y = Math.sin(yaw * Math.PI);//range from -1 to 1
            var u = 0.5 + x*pitch;
            var v = 0.5 + y*pitch;  

            uvs[ j ].x = u;
            uvs[ j ].y = v;
        }else{
            uvs[j].x = 0;
            uvs[j].y = 0;
        }
    }
}

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Answer 2

After delving into UVs and conducting various experiments, I have come up with a refined code snippet that I am beginning to grasp. Here is the relevant portion of the working code:

var geometry = new THREE.SphereGeometry( 30, 256, 128, 0, Math.PI * 2, 0, Math.PI );
geometry.scale( - 1, 1, 1 );//inside out

var imgWidth = 0.8;//Initially calculated as 235/360, but adjusted through trial and error for reduced fisheye distortion

var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
for ( i = 0; i < faceVertexUvs.length; i ++ ) {

    var uvs = faceVertexUvs[ i ];
    var face = geometry.faces[ i ];
    //y represents top to bottom
    //z denotes in-out direction
    //x indicates side-to-side orientation; positive x signifies front, while negative denotes back

    for ( var j = 0; j < 3; j ++ ) {
        var fvNj = face.vertexNormals[j];
        var yaw = Math.atan2(fvNj.z, fvNj.x)/(Math.PI); //rotation around axis, ranging from -1 to 1
        var pitch = Math.asin(fvNj.y)/Math.PI; //elevation angle, ranges from -0.5 to 0.5
        pitch = pitch * -1 + 0.5;//invert and normalize to range from zero to one
        pitch *= imgWidth;

        if(pitch < 0.5){
            //considering fisheye correction??
            //var correction = (fvNj.x == 0 && fvNj.z == 0) ? 1 : (Math.acos(fvNj.y) / Math.sqrt(fvNj.x * fvNj.x + fvNj.z * fvNj.z)) * (2 / Math.PI);
            var x = Math.cos(yaw * Math.PI);//range from -1 to 1
            var y = Math.sin(yaw * Math.PI);//range from -1 to 1
            var u = 0.5 + x*pitch;
            var v = 0.5 + y*pitch;  

            uvs[ j ].x = u;
            uvs[ j ].y = v;
        }else{
            uvs[j].x = 0;
            uvs[j].y = 0;
        }
    }
}

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Answer 3

Answer №2

It's important to note that the source image is incomplete, only covering 360x235. To fully cover the 360x360 sphere, it needs to be "extended".

While I also have a camera producing similar images, I haven't found a complete JavaScript solution for handling these raw images yet. That's why I turned to an alternative method: pre-converting the image.

I rely on ffmpeg for this task.

By using the following command line:

ffmpeg -i qNfrX.jpg -vf v360=fisheye:e:ih_fov=235:iv_fov=235 test.jpg

You'll obtain this resulting image:

https://i.sstatic.net/DMKqb.png

If you instead use this command line:

ffmpeg -i qNfrX.jpg -vf v360=fisheye:e:ih_fov=235:iv_fov=235:pitch=-90 test2.jpg

Adjusting the pitch angle will give you this new image:

https://i.sstatic.net/Ic4ET.png

You can then utilize one of these equirectangular images to wrap around a sphere, but I cannot offer direct assistance with this process. This resource may be helpful, although I'm still exploring its capabilities:

https://github.com/legokichi/three-fisheye

Answer 4

It's important to note that the source image is incomplete, only covering 360x235. To fully cover the 360x360 sphere, it needs to be "extended".

While I also have a camera producing similar images, I haven't found a complete JavaScript solution for handling these raw images yet. That's why I turned to an alternative method: pre-converting the image.

I rely on ffmpeg for this task.

By using the following command line:

ffmpeg -i qNfrX.jpg -vf v360=fisheye:e:ih_fov=235:iv_fov=235 test.jpg

You'll obtain this resulting image:

https://i.sstatic.net/DMKqb.png

If you instead use this command line:

ffmpeg -i qNfrX.jpg -vf v360=fisheye:e:ih_fov=235:iv_fov=235:pitch=-90 test2.jpg

Adjusting the pitch angle will give you this new image:

https://i.sstatic.net/Ic4ET.png

You can then utilize one of these equirectangular images to wrap around a sphere, but I cannot offer direct assistance with this process. This resource may be helpful, although I'm still exploring its capabilities:

https://github.com/legokichi/three-fisheye

Tips for creating a 360 x 235 degree FOV image using three.js

Answer №1

Answer №2

Similar questions

What causes images to be omitted from a PDF file when using mywindow.print()?

Transform an array containing arrays into an array of individual objects

Live AJAX inquiries in progress

Having trouble with NextJS when trying to add an item to an element and render it in a Tailwind select

Zingchart encounters issues when attempting to plot a CSV file containing over 10 columns

Update the second dropdown automatically based on the selection in the first dropdown menu

When res.write is called before res.send, an error occurs

Storing knockout view model data in a database and fetching it back

Tips for applying multiple colors to text within an option tag

webpack is encountering difficulty resolving the node_modules material-icons directory

Transform a date string into a date entity

Issue with react-router-dom: <Route> elements are strictly meant for configuring the router and should not be rendered on their own

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

Discover the method for concealing a button using ng-show and ng-hide directives

Guide on how to verify if a component with a specific name is registered within the Composition API of Vue 3

CORS problem in Chrome when using AngularJS and Symfony 3

What is the process for editing a JSON file and preserving the modifications?

Protractor: What is the best way to retrieve the baseUrl from the command line input?

Node.js: Attempting to arrange ISO dates based on their time span

Error message encountered when attempting to rotate an object in three.js: "Object is undefined"