1
\$\begingroup\$

My goal is to have a light source inside of a transparent sphere that has an equirectangular texture to act as a 360°-slide. I want to get the projection on arbitrary objects as a texture image on these objects in high resolution. This will happen on a webserver.

So my input should be the equirectangular and the object and optionally position of the light source and my output should be texture files of each flat surface of the arbitrary object.

What algorithms can I use to make this as simple, quick and fast-in-action as possible?

\$\endgroup\$
1
\$\begingroup\$

Here's a high-level overview of the method:

  1. For each object, walk through the triangles making up its mesh.

  2. Compute the position of each of the triangle's vertices in world space (ie. applying any rotation / translation as needed) and subtract the light position to get a vector representing the ray of light reaching this vertex.

  3. Rasterize the current triangle into your output texture using the uv texture coordinates of its vertices. This generates a collection of pixels in your output texture that the triangle covers.

  4. For each rasterized pixel, interpolate the light vector from the triangle's vertices to get a vector representing the ray of light falling on this point within the triangle.

  5. Convert this direction to spherical coordinates.

  6. Use the latitude and longitude as texture coordinates to look up the corresponding texel in your equirectangular input texture. Write that colour to your output pixel.

As you can see, this maps readily to normal 3D rendering pipelines, using eg. WebGL or the API of your choice. Step 1 is a draw call, steps 2-3 are a vertex shader, 4 is the built-in interpolator, and 5-6 are a fragment shader.

If you specify what graphics API you plan to use, we can make the steps above concrete with the actual syntax needed.

\$\endgroup\$
  • \$\begingroup\$ I want to use WebGL as it seems to be the only browser api that prevails. \$\endgroup\$ – Vitalis Hommel May 4 '17 at 17:39
  • \$\begingroup\$ I'm not fluent enough in WebGL myself to give you a complete implementation, but another user may be able to fill in those details. \$\endgroup\$ – DMGregory May 4 '17 at 17:53
  • \$\begingroup\$ What 3d api are you fluent in \$\endgroup\$ – Vitalis Hommel May 4 '17 at 19:13
  • \$\begingroup\$ My tool of choice is Unity, so I won't be much help with the specifics. The concepts are all the same, but the engine abstracts me from the precise OpenGL syntax. \$\endgroup\$ – DMGregory May 4 '17 at 19:15
  • \$\begingroup\$ Can I make unity create an applet that outputs the necessary data in a browser? If yes, I am fine with unity. \$\endgroup\$ – Vitalis Hommel May 5 '17 at 14:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.