Calculating distance from line's center

sasquas · January 27, 2024, 9:14pm

Hey. I am new to the shaders.

I made a Three.Point() with linear-gradient color, custom shader with distance()

I was wondering if it is possible somehow customize meshline shader to have similar effect. (Distance from center of the line to the edges) using onBeforeCompile

Meshline material source:

github.com

pmndrs/meshline/blob/b90acd383e253089a41fae2fc2e234f8925678e6/src/MeshLineMaterial.ts

import * as THREE from 'three'

const vertexShader = /* glsl */ `
  #include <common>
  #include <logdepthbuf_pars_vertex>
  #include <fog_pars_vertex>

  attribute vec3 previous;
  attribute vec3 next;
  attribute float side;
  attribute float width;
  attribute float counters;
  
  uniform vec2 resolution;
  uniform float lineWidth;
  uniform vec3 color;
  uniform float opacity;
  uniform float sizeAttenuation;
  
  varying vec2 vUV;

This file has been truncated. show original

I use meshline becasue it is part of react drei Trail component.

I’ve already spend a lot of time trying to figure out how this even work. I would appreciate any bit of help.

sasquas · January 28, 2024, 4:15pm

I anyone would be wondering how did I solved this, I’ve just noticed, Trail from drei comes with useTrail hook. Therefore there is no need to override meshline and I can apply my shader to the points from useTrail.

Topic		Replies	Views
Paint vertices based on distance from center Questions shaders	11	117	August 26, 2024
Help! help! I desperately need a distance based fog! Questions shaders	9	1622	June 20, 2023
Make trail with three.js Questions shaders	3	1779	July 9, 2021
Line width in custom shader Questions shaders	0	1114	February 21, 2022
How to make a Line2 fading out shader Questions shaders	37	3182	July 22, 2022

Calculating distance from line's center

Related topics