Customizing vertex sizes in BufferGeometry for diverse shapes

Question

Customizing vertex sizes in BufferGeometry for diverse shapes

Currently, I am working on creating a 2D scatterplot using three.js and I need to customize the sizes of the points. You can check out my progress here. I'm struggling with adjusting the sizes of the points based on the "radius" property and also adding a small black border around each point, similar to this example. While vertexShaders are usually used for such modifications, I want to create a static image without any runtime changes. Below is the relevant code snippet:

    var coordinates = new Float32Array(data_points.length*3);
    var colors = new Float32Array(data_points.length*3);
    var sizes = new Float32Array(data_points.length);

    for (var i=0; i<data_points.length; i++) {
        // Extract vector coordinates from data
        let vertex = new THREE.Vector3(data_points[i].x, data_points[i].y, 0);
        let color = new THREE.Color(color_array[data_points[i].label]);
        vertex.toArray(coordinates, i*3);
        color.toArray(colors, i*3);
        sizes[i] = data_points[i].radius*100;
    }

    let geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(coordinates, 3));
    geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
    geometry.setAttribute('size', new THREE.BufferAttribute(sizes, 1 ));

    let pointsMaterial = new THREE.PointsMaterial({
        size: 100,
        sizeAttenuation: true,
        vertexColors: THREE.VertexColors,
        map: new THREE.TextureLoader().load("https://fastforwardlabs.github.io/visualization_assets/circle-sprite.png"),
        transparent: true
    });

    let points = new THREE.Points(geometry, pointsMaterial);

Solving this issue should be straightforward, but as a javascript novice, I would appreciate any assistance or guidance. Thank you in advance!

javascript three.js

Answer 1

Answer №1

If you want to utilize Points, it's likely that you'll need to create a custom shader (vertex+fragment).

However, have you considered using meshes instead if your data is not too large? You could achieve the desired outcome by combining scaled CircleBufferGeometry as a Mesh and a Line (or fat lines).

let W = window.innerWidth;
let H = window.innerHeight;
const frustumSize = 100;

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
document.body.appendChild(renderer.domElement);

// More code for setting up scene, camera, circle, outline, data point, resizing, rendering, etc.

// Interval function for reacting to mouseovers
let over = true;
setInterval(() => {
  // Code for applying scaling matrix on group based on mouseover state
}, 2000);

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: white;
}

<script src="https://threejs.org/build/three.js"></script>

If using meshes doesn't fit your requirements, there's also the option of the SVGRenderer, which can render shapes as SVG objects. This might be a more suitable solution depending on your specific data. Check out a demo here:

Answer 2

If you want to utilize Points, it's likely that you'll need to create a custom shader (vertex+fragment).

However, have you considered using meshes instead if your data is not too large? You could achieve the desired outcome by combining scaled CircleBufferGeometry as a Mesh and a Line (or fat lines).

let W = window.innerWidth;
let H = window.innerHeight;
const frustumSize = 100;

const renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
document.body.appendChild(renderer.domElement);

// More code for setting up scene, camera, circle, outline, data point, resizing, rendering, etc.

// Interval function for reacting to mouseovers
let over = true;
setInterval(() => {
  // Code for applying scaling matrix on group based on mouseover state
}, 2000);

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: white;
}

<script src="https://threejs.org/build/three.js"></script>

If using meshes doesn't fit your requirements, there's also the option of the SVGRenderer, which can render shapes as SVG objects. This might be a more suitable solution depending on your specific data. Check out a demo here:

Answer 3

Answer №2

To achieve the desired effect, it is not possible to use PointsMaterial. You will either need a custom shader material for this task or you can try enhancing PointsMaterial with Material.onBeforeCompile(). I recommend studying the implementation of the official example provided below to explore the former method:

An essential aspect of the code lies in the vertex shader, which allows points to have varying sizes:

attribute float size;
attribute vec3 customColor;

varying vec3 vColor;

void main() {

    vColor = customColor;

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

    gl_PointSize = size * ( 300.0 / -mvPosition.z );

    gl_Position = projectionMatrix * mvPosition;

}

Take note of the extra size attribute.

Answer 4

To achieve the desired effect, it is not possible to use PointsMaterial. You will either need a custom shader material for this task or you can try enhancing PointsMaterial with Material.onBeforeCompile(). I recommend studying the implementation of the official example provided below to explore the former method:

An essential aspect of the code lies in the vertex shader, which allows points to have varying sizes:

attribute float size;
attribute vec3 customColor;

varying vec3 vColor;

void main() {

    vColor = customColor;

    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

    gl_PointSize = size * ( 300.0 / -mvPosition.z );

    gl_Position = projectionMatrix * mvPosition;

}

Take note of the extra size attribute.

Customizing vertex sizes in BufferGeometry for diverse shapes

Answer №1

Answer №2

Similar questions

What are the steps to use the vue-text-highlight feature?

Ways to specify the default value for a component

The proper way to incorporate HTML within JSON in Django Templates for safe usage

Leveraging the power of the vuejs plugin within the main.js script

Modify the color of the header on Material-UI Date Picker

Error: The specified module could not be found: Could not resolve 'react-hot-loader/webpack'

Placing text on top of objects using three.js

Learn how to integrate Bootstrap with Vue.js TreeView in this tutorial

What is the most effective way to communicate to my client that attempting to conceal the browser toolbar is an ill-advised decision?

Update the div content to completely replace it with fresh data using Ajax

Node.js can provide a reusable email framework that can be used across

Retrieve the text inside the DIV that contains the clicked link

Tips for reconstructing a path in Raphael JS

Integrate CSS and JavaScript files into Node Express

Launching an external software using electron

Looking to simplify the complex JSON structure by converting it into an array using JavaScript

Ways to incorporate error handling in node.js/express when using mySQL operations

Experiencing difficulties when trying to pan and zoom the data obtained from d3.json within a line chart

Having trouble with uploading a file through ajax

React state object iteration doesn't produce any visible output