kkmcgg / awktree Goto Github PK

the rotate and graphics are bad!
remember ptcloud.org? do that maybe! (bablyon.js)

Obviously I need to move all the nodes to a folder! Yuck

https://github.com/yomotsu/camera-controls

Issue: Change Point Rendering to Gaussian Blur in Three.js

Description

Currently, the project uses a basic point rendering technique for visualizing 3D data. The goal is to enhance this by implementing Gaussian blur instead of simple points.

Proposed Changes

1. Implement Custom Shader Material

Implement a custom shader to achieve Gaussian blur. Define the shader material as follows:

var shaderMaterial = new THREE.ShaderMaterial({
  uniforms: {
    color: { value: new THREE.Color(0xffffff) },
    scale: { value: 0.1 }
  },
  vertexShader: \`
    void main() {
      vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
      gl_PointSize = scale * ( 300.0 / -mvPosition.z );
      gl_Position = projectionMatrix * mvPosition;
    }
  \`,
  fragmentShader: \`
    uniform vec3 color;
    void main() {
      float r = distance(gl_PointCoord, vec2(0.5, 0.5));
      if (r < 0.5) {
        gl_FragColor = vec4(color, 1.0 - 2.0 * r);
      } else {
        discard;
      }
    }
  \`,
  transparent: true
});

2. Update Material Definition

Replace the current material definition for the points with the custom shader material:

// var material = new THREE.PointsMaterial({ color: getRandomColor(), size: 0.1 });
var material = shaderMaterial;

3. Update Worker Message Handling

In the worker.onmessage function, update the material to use the new shader material:

var material = shaderMaterial;  // Use the shader material here

Expected Outcome

After these changes, the point cloud should be rendered with a Gaussian blur effect instead of simple points.

Additional Information

This enhancement aims to improve the visual quality of the 3D data representation.