Swaying while navigating through volumetric fixed step raymarching

Encountering a bug with my shaders while working on the vertex:

varying vec3 worldPosition;
varying vec3 viewDirection;

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    worldPosition = vec3(modelMatrix * vec4(position, 1.0));
    viewDirection = normalize(worldPosition - cameraPosition);

}

And for the fragment:

uniform float time;
varying vec3 worldPosition;
varying vec3 viewDirection;

/// utilities

bool sphereHit (vec3 p)
{
    return distance(p,vec3(0,0,0)) < 1.0;
}

#define STEP_SIZE 0.01

bool raymarchHit (vec3 in_position, vec3 direction)
{
    for (int i = 0; i < 2000; i++)
    {
    if ( sphereHit(in_position) )
        return true;

        in_position += direction * STEP_SIZE;
    }
    return false;
}

void main() {
    if(raymarchHit(worldPosition, viewDirection)){
        gl_FragColor = vec4(1.0,0.0,0.0,1.0); 
    }else{
        gl_FragColor = vec4(0.0,0.0,1.0,0.5); 
    }


}

Trying to implement a raymarching shader by attaching it to a rotating cube in ThreeJS. However, the sphere/circle created appears to wobble along with the cube's rotation, rather than remaining fixed and camera-facing as intended. The volume containing the mesh should not affect this, but I am unable to identify the root cause of the issue.

Answer №1

The problem arises due to the fact that according to the 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.

In order to make your algorithm function properly, you need to interpolate the direction of the ray using noperspective. Since GLSL ES 1.00 does not offer Interpolation qualifiers, you must come up with a workaround.

One approach is to calculate the ray in the fragment shader:

void main() {
    bool hit = raymarchHit(worldPosition, normalize(worldPosition - cameraPosition));
    gl_FragColor = hit ? vec4(1.0,0.0,0.0,1.0) : vec4(0.0,0.0,1.0,0.5); 
}

Refer to the example below:

[Custom Example Code]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic Population of Django Drop Down List using JavaScript

In my Django + Python website, users can request access to a database through a form that provides them with the following options: Environment: A dropdown list with two values - Development and Production. Permission: Another dropdown list with two val ...

Using Plotly.js to generate a visually stunning stacked and grouped bar chart

Is there a way to generate a bar chart on Plotly.js that features both grouped and stacked bars? Ideally, I am looking for a structure similar to the one shown here: Barchart with stacked and grouped charts ...

RequestDispatcher.forward() does not work when servlet is invoked through an Ajax POST request

My login page involves user authentication through the firebase and sending the request to a servlet. When I click the submit button with correct credentials, the firebase authentication works, the servlet is called but an error is displayed in the browser ...

Is there a particular motive behind the decision for `arguments` to be treated as an object

Today while coding, I came across something puzzling. arguments.concat(someNumber); This line gave me an error for undefined function. Initially, I assumed that arguments was a native object for optimization purposes, but later discovered it's simp ...

Tips for passing an additional parameter to a function within the map method in JavaScript

Is there a way to pass an additional parameter to the aggregationFunction in JavaScript when using dataArray.map(self.aggregationFunction)? I attempted using .bind(extra parameter) but it didn't yield the desired result. Any advice would be appreciate ...

Simple Mobile-Friendly Tabs - mobile tabs are always visible

My JavaScript skills are not the best. I have been using Easy Responsive tabs and encountered an issue on the mobile version where clicking does not hide content, but only removes the "d_active" class and adds it to another element. I believe that if the ...

When the collapsed navbar is displayed, elements are pushed beyond the boundaries of their parent container (Bootstrap 5)

Introduction Utilizing Bootstrap 5 (included with webpack 5), I am implementing the grid system and collapse function to design the homepage of this website, featuring 2 sidebars that collapse into a top bar. On mobile devices, the navigation collapses a ...

Troubleshooting Problem with Creating a Button using HTML Checkbox "onclick" Event

My main goal with the checkbox click event is to achieve the following objectives: 1] Create a button with the id = 'id-of-checkbox'+'some-character-here' in a specific div. 2] Clicking on that button will remove both the button and ...

Customizing the "Actions" Dropdown in APEX Interactive Grid

Is there a way to modify the choices available in the Selection section of a Row Actions Menu in Apex? I managed to alter the options in the Line Menu, but I'm facing challenges when trying to make changes in the Selection Menu. The Selection Menu i ...

Modify the contents of the 'data-content' area in the popover

Looking for a solution where I can update only a portion of the data-content within a popover. Here is an example code snippet: <div class="popover-wrapper"> <i class="glyphicon glyphicon-question-sign hover_content" ...

The click event in jQuery is being blocked by the use of "display:none

Currently, I have implemented a search box feature with search suggestions: <input id="searchBar" /> <div id="searchSuggestion"></div> The searchSuggestion div is dynamically updated using jQuery ajax whenever an input is entered (imple ...

The Express router is failing to recognize the mongoose model

Currently, I am developing a node.js application and encountering an issue where I receive a reference error stating that Post is not defined every time I run this specific code. Interestingly, when I move the post route from submit.js to app.js, the code ...

Exclusive Modal Pop-Up for First-Time Visitors - Utilizing Bootstrap, PHP, and JavaScript

Seeking assistance from the community as I have exhausted my online research efforts. I am currently working on implementing a welcome bootstrap modal in a php environment. Despite being new to php and js, I have managed to make it pop up only once using ...

Tips for preventing the ng-click event of a table row from being triggered when you specifically want to activate the ng-click event of a checkbox

So, I've got this situation where when clicking on a Table Row, it opens a modal thanks to ng-click. <tr ng-repeat="cpPortfolioItem in cpPortfolioTitles" ng-click="viewIndividualDetailsByTitle(cpPortfolioItem)"> But now, there&apos ...

Adjusting the visible options in ngOptions causes a disruption in the selected value of the dropdown menu

I have successfully implemented a feature that allows users to convert temperature values displayed in a drop-down menu to either Celsius or Fahrenheit. For this functionality, I am using a select input with ng-options as shown below: <select ng-model ...

I am facing an issue where my Javascript hide and show function is not working properly when clicked. Despite not giving

I am currently working on a Javascript onClick function to toggle the visibility of content in a lengthy table. I initially set part of the table's class to display: "none" and added a button to show the hidden content when clicked. However, nothing i ...

Mastering MongoDB update functions in JavaScript

I've encountered some difficulties while using the MongoDB API to update a document. Despite trying various methods, none of them have been successful so far. Strangely enough, inserting and deleting documents work perfectly fine. Let me explain what ...

What is the process for creating a line using points in three.js?

Can anyone provide a solution for creating a straight line using new THREE.Points()? I attempted to place particles and set their positions with an array and for loop, but the spacing was inconsistent. ...

There seems to be a problem with the external JavaScript file not functioning

After dragging and dropping the .js file into my ASP.NET project, I am facing an issue where it remains unresponsive, even though the code works fine when used inline. This problem is occurring while using VS 2017. Here is a snippet of my code: <scrip ...

Is it possible to make changes to a box within a current PDF document using HummuJS?

I'm looking to update some existing PDF files with new data. According to the HummusJS documentation, I should be able to modify the box using parsing and modification techniques. However, I haven't been able to find the correct method to do so. ...