Rendering points as circles using BufferGeometry in Three.js

Recently, I've started exploring three.js and shaders for the first time. I'm trying to generate a sphere made up of particles that move like waves across its surface. Currently, my progress looks like this: https://i.sstatic.net/CqyOe.png

However, I am aiming for a result that looks more like this: https://i.sstatic.net/0mNFP.jpg

So, I'm wondering how I can render each point as a circle or possibly with a texture applied? Here is a snippet of my fragment shader code:

uniform sampler2D texture;
uniform vec2 repeat;
uniform float uTime;

varying vec2 vOffset;

precision mediump float;

varying vec3 vColor;
varying vec2 vUv;
void main()
{
        vec2 uv = vec2( gl_PointCoord.x, 1.0 - gl_PointCoord.y );

        vec4 tex = texture2D( texture, uv * 0.5);

        gl_FragColor = vec4(vec3(0.5, 0.8, 0.85), 0.8);
}

I have attempted to use 'gl_FragColor = tex' to render the texture in place of the color, but it doesn't seem to be working as expected. The texture I am using is simply a particle image.

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

Answer №1

Why didn't the code gl_FragColor = tex work as expected?

To properly use a texture in your code, you should follow this syntax:

uniform sampler2D texture;

void main() {
  gl_FragColor = texture2D(texture, gl_PointCoord);
}

Additionally, ensure that blending is turned on and set up for premultiplied alpha, confirm that your texture uses premultiplied alpha, and disable the depth test.

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

The page becomes unresponsive and is unable to be scrolled after the modal is closed

Whenever I click a button, two modal boxes pop up simultaneously. Closing these modal boxes by clicking outside of them causes an issue where the page darkens and becomes unscrollable afterwards. var modalA = document.getElementById('projectModalSe ...

Kentico's reCaptcha feature does not prevent the submission of forms

My WebPart includes the reCaptcha FormControl. <script src='https://www.google.com/recaptcha/api.js'></script> ...... <div class="form-group"> <label>Please type the word below. If required use the buttons to ...

Struggling with transferring information from JavaScript to PHP through the use of Ajax

Currently, I am working on creating a string using a JavaScript function and then passing it to PHP. This is the block of code in my JavaScript file: <script> function passVal(){ var strUrl = buildStringUrl(lat1, lng1, lat2, ...

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...

Accessing information from a database and showcasing it within a tooltip

I have successfully implemented a tooltip feature using JavaScript and integrated it into an HTML page. Check out the code snippet below: $(document).ready(function () { //Tooltips $(".tip_trigger").hover(function (e) { tip = $(this).find('.tip&a ...

Premature updates detected in state cloning process

My program is a simple one designed to showcase an issue I am currently encountering. It involves an array of objects, each containing a sequence number. When a button is clicked, the sequence number of the first object in the array increases by one. To i ...

Ensuring that computed value is updated only once in Vue composition API while observing multiple interconnected references

How can we efficiently trigger a costly recalculation only once for a computed value that depends on multiple references, where one reference is dependent on the other? For example: In the following scenario, I aim to compute expensiveData only once. The ...

Using the THREE.js OrthographicCamera with the CanvasRenderer

I have recently started exploring THREE.js and I am currently experimenting with various combinations of renderers and cameras. So far, I have been able to successfully render a simple animation using either the WebGLRenderer with the OrthographicCamera o ...

How come when I click on the edit button, the selected data's model doesn't appear in the dropdown menu as I would like it to?

this is the function in my controller public function getModel($make_id = null) { $make_id = request()->make_id; $carsmodel = CarModel::where('make_id', $make_id)->orderBy('model', 'ASC')->get(); return re ...

Unable to execute node file in Visual Studio Code's terminal

My attempt to run a file using the terminal in Visual Studio Code has hit a snag. Despite my best efforts, I keep encountering an error message that reads as follows: For example, when I type "node myfile.js" into the terminal, I get the following error: ...

When a property is passed as a prop in a Vue component, it is received

https://jsfiddle.net/2xwo87bs/ In order for Vue to properly handle the object prop that is being passed to the component, it is necessary to first convert the string into an actual object. While in the provided snippet I have used JSON.parse() as a qui ...

Tips for disabling default browser input validation in React

https://i.stack.imgur.com/834LB.png Is there a way to remove the message "Please fill out this field" while still keeping the "required" attribute intact? I have my own validation system in place, so I need to use the "required" attribute to determine whe ...

Issue with spotlight / shadow camera cutoff in Three.js

I've been grappling with a problem for hours now and could really use some help. So, I have this spotlight in my scene that I imported from a collada file, but for some reason, the shadow is getting cut off. Even when I turn on the camerashadow helpe ...

Creating Overlapping Textures in Three.JS: A Step-by-Step Guide

Short version: How can I create larger textures on faces with a fading effect, allowing them to overlap each other? - Currently learning three.js by attempting to replicate the game Warzone 2100. :) I'm loading a default ground texture using this c ...

What could be causing the error "SyntaxError: Expected token ']' to appear" to pop up?

Recently, I have been working on implementing a 'night mode' feature for a website. However, every time I attempt to execute the script, an error message pops up: "SyntaxError: Expected token ']'" on line 9. The problematic line in ...

Discovering the bootstrap of a specific segment: A step-by-step guide

I encountered an issue when trying to paste a menu from one responsive HTML template to another. While both templates are designed to be responsive, the menu alignment gets distorted when viewed on mobile devices. I am unsure of how to extract only the bo ...

Is JavaScript generating a random sequence by dynamically adding fields?

I'm encountering an issue with my button that adds a set of text fields every time I click on the Add More button. The problem is that when I add new text fields, they are appended above the Add More button. Then, pressing the button again adds more t ...

What is the best approach to promptly retrieve the initial M outcomes of a collection of N concurrent invocations in node.js?

I am trying out a slow asynchronous predicate function (which communicates with an external HTTP API) on a list of N inputs. I am looking for any M (where M is less than or equal to N) inputs where the function returns true. This is my initial approach: v ...

Tips for eliminating double quotes from an input string

I am currently developing an input for a website that will generate a div tag along with its necessary child elements to ensure the website functions correctly. I have a couple of key questions regarding this setup: <!DOCTYPE html> <html> < ...

Adjust the height of the element to prevent the need for a double-scroll

Currently, I have created a webpage for a client that includes a PDF using an iframe tag. The issue arises when the PDF is rather large, resulting in two scrollbars - one for the page and one for the embedded PDF within the iframe (loaded through the integ ...