RayMarching | Основной код с которым можно поиграться находится в

The issue is caused, because (from OpenGL ES Shading Language 1.00 Specification - 4.3.5 Varying)

varying variables are set per vertex and are interpolated in a perspective-correct manner over the primitive being rendered.

To make your algorithm work, you have to interpolate the direction of the ray noperspective.
Since GLSL ES 1.00 does not provide Interpolation qualifiers you have to find a workaround.

Compute the ray in the fragment shader:

TLDR: use the attribute [branch] in front of your if-statement.

As far as I´m aware with any branching in HLSL both sides of the branch will be calculated and one will be thrown away

This is actually not fully correct. Yes, a branch can be flattened, which means that both sides are calculated as you described, but it can also be not flattened (called dynamic branching).

Now, not flattening a branch has some disadvantages: If two threads in the same wave take different paths in the branch, a second wave has to be spawned, because all threads in a wave have to run the same code (so some threads would be moved to the newly spawned wave). Therefore, in such a case, a lot of threads are "disabled" (meaning they run the same code as the other threads in their wave, but not actually writing anything into memory). Nonetheless, this dynamic kind of branching may still be faster than running both sides of the branch, but this depends on the actual code.

One can even remove this disadvantes by smart shader design (namely, ensure that the threads that take one side of the branch are in the same wave, so no divergence happens inside a wave. This, however, requires some knowledge of the underlying hardware, like wave size and so on)

In any case: If not stated otherwise, the HLSL compiler decides on its own, whether a branch uses dynamic branching or is flattened. One can, however, enforce one of the two ways by adding an attribute to the if-statement, eg:

There is an issue when you generate the texture. The initial value of TEXTURE_MIN_FILTER is NEAREST_MIPMAP_LINEAR. If you don't change it and you don't create mipmaps, then the texture is not "complete".
Set the TEXTURE_MIN_FILTER to either NEAREST or LINEAR to solve the issue:

You should set some variables to be the camera's variables and use them in the parallel for loop, you should also make static versions of the camera's functions and use them in the for loop. while I'm not sure this will fix it, it's something I think you should try because you said you can't use the class camera in the parallel for and now you won't be using it in there.

(Making my comment into an answer since it seems to have worked for OP)

You're feeling the pain of having to compute sqrt(). I sympathize... It would be great if you could just, umm, not do that. Well, what's stopping you? After all, the square-distance to a sphere is a monotone function from $R^+$ to $R^+$ - hell, it's actually a convex bijection! The problem is that you have non-squared distances coming from elsewhere, and you compute:

I do not know what and how are you rendering. There are many techniques and configurations which can achieve them. I am usually using a single pass single quad render covering the screen/view while geometry/scene is passed as texture. As you have your object in a 3D texture then I think you should go this way too. This is how its done (Assuming perspective, uniform spherical voxel grid as a 3D texture):

1. CPU side code

   simply render single QUAD covering the scene/view. To make this more simple and precise I recommend you to use your sphere local coordinate system for camera matrix which is passed to the shaders (it will ease up the ray/sphere intersections computations a lot).

2. Vertex

   here you should cast/compute the ray position and direction for each vertex and pass it to the fragment so its interpolated for each pixel on the screen/view.

   So the camera is described by its position (focal point) and view direction (usually Z- axis in perspective OpenGL). The ray is casted from the focal point (0,0,0) in camera local coordinates into the znear plane (x,y,-znear) also in camera local coordinates. Where x,y is the pixel screen position wit aspect ratio corrections applied if screen/view is not a square.

   So you just convert these two points into sphere local coordinates (still Cartesian).

   The ray direction is just substraction of the two points...

3. Fragment

   first normalize ray direction passed from vertex (as due to interpolation it will not be unit vector). After that simply test ray/sphere intersection for each radius of the sphere voxel grid from outward to inward so test spheres from rmax to rmax/n where rmax is the max radius your 3D texture can have and n is ids resolution for axis corresponding to radius r.

   On each hit convert the Cartesian intersection position to Spherical coordinates. Convert them to texture coordinates s,t,p and fetch the Voxel intensity and apply it to the color (how depends on what and how are you rendering).

   So if your texture coordinates are (r,theta,phi)assuming phi is longitude and angles are normalized to <-Pi,Pi> and <0,2*Pi> and rmax is the max radius of the 3D texture then:

You're overcomplicating the matter. There is no "curve effect" because a plane isn't curved. The term z value litteraly describes what it is: the z coordinate in some euclidean coordinate space. And in such a space z=C will form a parallel to the plane spanned by the xy-Axes of that space, at distance C.

So if you want the distance to some point, you need to take the x and y coordinates into account as well. In eye space, the camera is typically at the origin, so distance to the camera boils down to length(x_e, y_e, z_e) (which is of course a non-linear operation which would create the "curve" you seem to expect).

Finaly decided to put this answer (edited).

As Gman commented, there is apprently nothing wrong with your code. Technically, this should work. However you pointed out a real tricky aspect of the WebGL/Javascript couple compared to OpenGL: The typage. And due to how Javascript variables works, you easily generate strange bugs.

Imagine this absurde situation:

Finally I have found one hack that works.

Actually the problem was made up of two parts:

1) Row- vs column-major order of modelViewMatrix: The order expected by the vertex shader is the oposite of what the remaining THREE.js expects..

2) Object3D-hierarchy: i.e. Scene, Mesh, Geometry, Line vertices + Camera: where to put the modelViewMatrix data so that it creates the desired result (i.e. the same result that the old bloody opengl application produced): I am not happy with the hack that I found here - but so far it is the only one that seems to work:

• I DO NOT touch the Camera.. it stays at 0/0/0
• I directly move all the vertices of my "line"-Geometry relative to the real camera position (see "position" from the modelViewMatrix)
• I then disable "matrixAutoUpdate" on the Mesh that contains my "line" Geometry and copy the modelViewMatrix (in which I first zeroed out the "position") into the "matrix" field.

BINGO.. then it works. (All of my attempts to achieve the same result by rotating/displacing the Camera or by displacing/rotating any of the Object3Ds involved have failed miserably..)

EDIT: I found a better way than updating the vertices and at least keeping all the manipulations on the Mesh level (I am still moving the world around - like the old OpenGL app would have done..). To get the right sequence of translation/rotation one can also use ("m" is still the original OpenGL modelViewMatrix - with 0/0/0 position info):