Is there a way to displace a 2D triangle within a webgl shader?

Question

Is there a way to displace a 2D triangle within a webgl shader?

I am facing a challenging situation while trying to implement conservative depth rendering, as described in CPU gems. My primary obstacle is enlarging the triangle, and it seems like I might have encountered the "stupid" phase.

To illustrate the current state of affairs, please refer to this link: (In this visualization, the black triangle represents the input, the red dots indicate the enlarged vertices, and the squares represent the sampling grid)

Utilizing webgl with three.js, I've included the 2 companion vertices as attributes for each vertex. My goal is to enlarge the triangles within the vertex shader. However, due to my camera setup (an orthographic view with certain constraints), directly applying the code from CPU gems designed for a perspective camera is proving to be a challenge.

My attempted solution involves generating normals for adjacent edges based on the considered vertex. Despite my efforts, achieving consistent results has been elusive. Implementing various strategies to determine the optimal direction for vertex displacement has yielded mixed outcomes, with some points clearly deviating from the intended location.

If you'd like to explore the complete code and delve deeper into the intricacies of this issue, please visit: https://github.com/nraynaud/webgcode/blob/01550668fdedba5ab61e2fbf5ed9917ca06b5e75/test_3D_conservative_rendering.html

In summary, my attempts so far have resulted in only one vertex moving correctly, while discrepancies remain for the other two. How can I successfully offset a triangle without falling victim to geometric challenges?

javascript three.js glsl webgl

Answer 1

Answer №1

An alternative approach to calculating the normal direction without iterating through all candidate combinations involves utilizing the angle bisector of the current vertex and the sum of direction vectors p1 and p2 from the other two triangle vertices.

A visual representation reveals that the offset distance from the original position is directly related to the sine of half the angle between the two direction vectors.

float pixelSize = 10.0; // or any other value

void main() { 
    vec3 a = normalize(position - prev);
    vec3 b = normalize(position - next);

    vec3 c = normalize(a + b); 

    float halfsine = sqrt((1.0 - dot(a, b)) / 2.0);

    gl_Position = vec4(position + pixelSize * c / halfsine, 1);
}

This concept can be illustrated with a napkin diagram: where vectors A and B represent the normalized directions from the other vertices, and pixel signifies the offset size. The congruent right triangles demonstrate that both old and new vertex positions are equidistant from the two edge lines.

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

Answer 2

An alternative approach to calculating the normal direction without iterating through all candidate combinations involves utilizing the angle bisector of the current vertex and the sum of direction vectors p1 and p2 from the other two triangle vertices.

A visual representation reveals that the offset distance from the original position is directly related to the sine of half the angle between the two direction vectors.

float pixelSize = 10.0; // or any other value

void main() { 
    vec3 a = normalize(position - prev);
    vec3 b = normalize(position - next);

    vec3 c = normalize(a + b); 

    float halfsine = sqrt((1.0 - dot(a, b)) / 2.0);

    gl_Position = vec4(position + pixelSize * c / halfsine, 1);
}

This concept can be illustrated with a napkin diagram: where vectors A and B represent the normalized directions from the other vertices, and pixel signifies the offset size. The congruent right triangles demonstrate that both old and new vertex positions are equidistant from the two edge lines.

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

Is there a way to displace a 2D triangle within a webgl shader?

Answer №1

Similar questions

Incorporate a fresh label for a function utilizing AngularJS

Retrieving the output of an asynchronous function within another function in JavaScript

Determine if a dropdown menu includes a certain string within a designated group option

Adjust particle quantity

"Disabling Click Event on Sidebar Menu in Angular: A Step-by-Step Guide

Having trouble deleting a Repeatable Job from the Bull queue in Node.js

Leveraging the keyword 'this' within an object method in node's module.exports

Unable to execute functions using an AJAX request

Omit any items from an array that do not have any child elements

HTML does not support the display of characters by unicode

What should you do when the server is taking a while to respond?

Ensure the latest item is stored in the browser's local storage

How can TypeScript and MobX work together using Set()?

Steps for integrating Stanford's NLP into a web application

Highlighting JavaScript code with React Syntax Highlighter exclusively

What is the optimal strategy for collecting a comprehensive array of candidates in WebRTC minus the use of ice

What are some ways to streamline and improve the readability of my if/else if statement?

Using Jquery Functions within Codeigniter

ng-view or controller appears to be malfunctioning

JavaScript: Accessing the selectedIndex of a dropdown list in RadGrid