Using Three.js WebGL to create a custom circle with unique fill and border colors generated from a shader

Currently, I am utilizing Three.js alongside the WebGLRenderer. I am exploring ways or searching for an example on how to create circles using CircleGeometry and have the ability to manipulate their fill and border color through a vertex or fragment shader. I am curious if this can be achieved without resorting to using an image for the texture. I apologize if this is a basic question; I am still in the process of grasping the concepts of Three.js and WebGL, so any assistance would be greatly valued.

Answer №1

  • In the realm of geometry, representing a circle can be tricky as its roundness is determined by the number of vertices it possesses, making it challenging to adjust parameters.

  • When it comes to texture presentation, there are clear limitations when zooming in or out.

  • For optimal results, consider using a shader. By creating a square surface and implementing a fragment shader, you can easily generate a circular image with the ability to customize colors and stroke parameters. With only 4 vertices, this method is efficient, especially when working with multiple circle-like objects.

Hopefully, this information proves helpful in your endeavors.

EDIT:

uniform vec3 innerCol;
uniform vec3 strokeCol;
uniform float radius;
uniform float stroke;

varying vec2 vUV;

void main() {
    float border = (radius - stroke/2.)/(stroke/2.+radius);
    float d = distance(vUV, vec2(.5, .5));

    if(d<=border) gl_FragColor = vec4(innerCol, 1.);
    else if(d>border && d<1.) gl_FragColor = vec4(strokeCol, 1.);
    else discard;
}

This fragment shader may not be perfect, but it should give you a good understanding of its functionality.

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

Step-by-step guide to creating a pop-up div that appears on hover and remains visible when clicked

I'm trying to figure out how to make a popup appear when the mouse hovers over it and then stay visible when clicked on. The issue I'm facing is that currently, the popup disappears when the mouse moves away from it. How can I modify the code so ...

Activate the event when the radio button is changed

Is there a way to change the selected radio button in a radio group that is generated using a for loop? I am attempting to utilize the changeRadio function to select and trigger the change of the radio button based on a specific value. <mat-radio-group ...

Issues with expanding all nodes in the Angular Treeview function by Nick Perkins in London are causing difficulties

Currently utilizing the angular treeview project found here: https://github.com/nickperkinslondon/angular-bootstrap-nav-tree After examining the functionality, it seems that this treeview is lacking search capabilities. To address this limitation, I deci ...

Creating an array of custom objects in JavaScript.Initializing custom objects in an

Is there a proper way to prevent the error "Cannot read property 'length' of undefined" when initializing an array of custom objects in javascript? situation export class MyClass implements OnInit { myArray: MyObject[]; } example <div ...

Issues with sending parameters in JQuery Ajax POST request

Currently, I am delving into Ajax and encountering some issues with sending requests from the client side. I have a jsp file located at "/web" on my local server to manage requests. Though unsure if this is the best approach or if it should be handled by ...

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

// Custom Cart Code for Database Quantity Update $('.input-text').on('keydown ' , function(){ var tr_parent = $(this).closest("tr"); setTimeout(function () { $(tr_parent).css('opacity', '0.3'); }, 4000); var i ...

Node-RED experiences crashes while attempting to make HTTP requests to access a web service

I'm currently facing a challenge in creating a node that can make web service calls. The tools I'm using are: Node-RED version: v0.17.5 Node.js version: v8.4.0 An exception is being thrown, and here's the error message: node-red_1 ...

When configuring Webpack with a rule array, JSX is not properly recognized by the tool

Here is the configuration for my webpack setup: const path = require('path'); module.exports = { entry: './src/entry.jsx', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist&ap ...

Sublime Text 3 for React.js: Unveiling the Syntax Files

Currently, my code editor of choice is Sublime Text 3. I recently wrote a simple "hello world" example in React, but the syntax highlighting appears to be off. I attempted to resolve this issue by installing the Babel plugin, however, the coloring still re ...

Turning $.post into $.ajax: A step-by-step guide

I need help with converting my $.post code to $.ajax. Here is the code snippet: $.post("../admin-login", { dataName:JSON.stringify({ username:uname, password:pass, }) }, function(data,status){ console.log("Data:"+data); answer = data; ...

Delay the execution of the function in AngularJS until the browser has finished rendering completely and the view-model synchronization cycle has ended

I'm uncertain about the appropriate title for this inquiry, so please correct me if I am mistaken. Suppose that upon page refresh (load), I require an animated scroll to an anchor based on the current location's hash (I am aware of ngAnchorScrol ...

Struggling to successfully update a database using a combination of javascript and PHP

I have been attempting to update a database by utilizing JavaScript and PHP. Below is the code from my index.html: <!DOCTYPE html> <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"> ...

The authentication for npm failed with a 401 error code when attempting to log in

When attempting to sign in to npm using the command npm login and providing my username, password, and email, I am encountering the following error message: The Registry is returning a 401 status code for the PUT request. Even though I have used the sa ...

Steps to generating a dynamic fabric canvas upon opening a new window

There seems to be an issue with the code below. When I click the button next to the canvas, my intention is to have a new window open displaying the canvas in full view. However, it's not working as expected. Can someone please assist me in troublesho ...

Using Jquery to loop through a function for every select box that is added dynamically

Encountering some challenges with jQuery while attempting to utilize the same function and iterate over select boxes that are dynamically generated with jQuery's clone() method. Here is a snippet of the content being cloned: <select name="expense ...

Error: Unable to access the 'name' property of an undefined variable

When running the code, I encountered a "TypeError: Cannot read property 'name' of undefined" error, even though when I console.log it, it provides me with the object import React from "react"; class Random extends React.Component { constructo ...

Utilize the Image URL for training your Tensorflow.js application

I'm currently exploring how to use images sourced from the internet for training my neural network. I am utilizing an Image() object to generate the images and pass them to tensorflow. Despite my understanding that Image() should return a HTMLImageEle ...

Using PHP, Ajax, and JavaScript, display interactive data from the server in a dynamic modal popup listbox within a Tinymce-WordPress

Currently, I am in the process of developing a WordPress plugin using TinyMCE. The main functionality involves a button that triggers a popup modal with some list boxes. These list boxes need to be populated with values fetched from the server. To accompli ...

Creating a fade in or fade out effect in AJAX without using jQuery is a simple yet

Is there a simple way to achieve fade in or fade out effects in ajax without relying on jQuery? I'm looking for a solution that can add color or background color to make it visually appealing, especially for small web pages with poor internet connecti ...

The error message encountered while using String.search("sinh(2"): "Regular expression is invalid."

Encountering an issue: var test = $("#k_w").val().search("sinh("+parseFloat(sinh_array[i])); An error message is displayed by the debugger: Uncaught SyntaxError: Invalid regular expression: /sinh(2/: Unterminated group. sinh_array[i] represents numerica ...