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
Make trail with three.js Questions shaders	3	1445	July 9, 2021
THREE.Line2 mapping texture Questions lines	15	1589	March 25, 2019
How to modify this shader to render like gl.line_strip Questions geometry , shaders , meshlines	1	280	June 6, 2023
ShaderMaterial renders behind MeshStandardShader Questions materials , geometry , shaders	1	340	August 26, 2022
Three.js Custom Shader Object Coordinate Questions camera , custom-material	5	2500	March 12, 2021

Calculating distance from line's center

Related Topics