Switch the Points from squares to rectangles

Question

Switch the Points from squares to rectangles

I have a unique art piece made up of particles that are currently squares. I would like to transform them into rectangles. I am aware that non-uniform scaling is not supported for points, but I am seeking advice on how to achieve this desired effect.

Below is the custom fragment shader I am currently using:

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );

Is it possible to make each square appear as a rectangle with a size ratio of x: 0.7, y: 1 by introducing partial transparency? I have not been able to find any existing examples of this technique.

Here is the current example of my artwork: https://jsfiddle.net/7jtvkh0x/

javascript three.js glsl shader fragment-shader

Answer 1

Answer №1

The task at hand is to transform each square into a rectangle with dimensions x: 0.7, y: 1.

To achieve this transformation, the x component of the texture coordinate needs to be scaled by '1.0/0.7`. By doing so, the texture will appear on the square as if it has been compressed into a rectangle. Adding a modification by 0.5 before and -0.5 after the scaling process ensures the transformation is symmetrical relative to the center of the quad.

pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;

Is it possible to achieve this transformation by introducing partial transparency to the square?

Introducing the discard keyword in the fragment shader allows for the discarding of fragment output values. This results in the fragments not affecting the framebuffer and appearing fully transparent.

To clip the quad to a rectangle, fragments with an x component of the modified texture coordinate above 1.0 or below 0.0 should be discarded:

if ( pUv.x > 1.0 || pUv.x < 0.0 )
    discard;

The final fragment shader implementation may appear as follows:

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;
if ( pUv.x > 1.0 || pUv.x < 0.0 )
      discard;

vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );

Answer 2

The task at hand is to transform each square into a rectangle with dimensions x: 0.7, y: 1.

To achieve this transformation, the x component of the texture coordinate needs to be scaled by '1.0/0.7`. By doing so, the texture will appear on the square as if it has been compressed into a rectangle. Adding a modification by 0.5 before and -0.5 after the scaling process ensures the transformation is symmetrical relative to the center of the quad.

pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;

Is it possible to achieve this transformation by introducing partial transparency to the square?

Introducing the discard keyword in the fragment shader allows for the discarding of fragment output values. This results in the fragments not affecting the framebuffer and appearing fully transparent.

To clip the quad to a rectangle, fragments with an x component of the modified texture coordinate above 1.0 or below 0.0 should be discarded:

if ( pUv.x > 1.0 || pUv.x < 0.0 )
    discard;

The final fragment shader implementation may appear as follows:

vec2 pUv = gl_PointCoord;
pUv.y = 1. - pUv.y;
pUv.x = (pUv.x - 0.5) / 0.7 + 0.5;
if ( pUv.x > 1.0 || pUv.x < 0.0 )
      discard;

vec2 uv = vUv + vSize * pUv;
vec4 texColor = texture2D( texture, uv );
outgoingLight *= texColor.xyz;
gl_FragColor = vec4( outgoingLight, texColor.a * diffuseColor.a );

Switch the Points from squares to rectangles

Answer №1

Similar questions

Posting values using AJAX in PHP - A guide

provide a hyperlink to the icon located in front of the navigation bar

The spreading of personalized events

What is causing the error message 'Unexpected use of 'location' no-restricted-globals'?

Troubleshooting issue with error handling in graphql mutation hook with react and apollo is not resolving

Unable to load the manually added module in the /node_modules/ folder

Browser now replacing attribute translate="yes" with translate="translate"

Develop an ASCX component to handle various tasks

Error code 1 encountered an internal error while trying to execute a task

What is the method for dividing a string using capital letters as a delimiter?

Managing "post" requests in a one-page web application using node.js

Changing colors in the rows of a table

stopping action when hovering

What is the best way to convert minutes into both hours and seconds using javascript?

Is there a type-safe alternative to the setTimeout function that I can use?

Dealing with 404 errors: The role of Nuxt.js and the srcDir option in handling URL

Tips for extending the space between one element and another when the width decreases:

By default, the D3 hierarchy will collapse to the first level

Customizing the appearance of Jquery UI Accordion Headers

Discovering the specific value within an array of various objects through Angular