Zeichnen Sie abgerundete dicke Linie mit WebGL & Three.js

Question

Ich fing gerade an, mit WebGL und three.js herumzuspielen. Ich möchte wirklich eine dicke Linie erstellen, die abgerundete Ecken und Enden hat. (Siehe Beispielbild)

Leider, dass ich sehe, zunächst das linecap Unterkunft LineBasicMaterial nicht wirklich funktionieren. Three.js LineBasicMaterial

begann ich über die Verwendung einer Röhre zu denken, aber dann werde ich glaube ich noch nicht eine runde Kappe bekommen ...

Hat Ideen jemand, wie ich oben eine Linie im Bild erstellen kann? Es muss nicht unbedingt mit Three.js gemacht werden, aber WebGL wäre eine Voraussetzung. (Ich möchte diese Zeile auch weiter animieren ...)

Danke für Hinweise.

Prost

Answer 1

Es gibt ein paar Möglichkeiten, 3D-Volumen Linien zu zeichnen. Die erste besteht darin, eine Vertex-Erweiterung im Shader durchzuführen. Dies tun die Links in den Kommentaren. Hier ist eine weitere, falls Sie mehr Material benötigen: http://codeflow.org/entries/2012/aug/05/webgl-rendering-of-solid-trails/.

Leider haben sie visuelle Artefakte, wenn das Liniensegment direkt auf Köpfe betrachtet wird. Schau dir die Demo hier an: http://codeflow.org/webgl/trails/www/. Drehen Sie die Szene herum und Sie werden feststellen, dass einige Liniensegmente, die direkt auf die Kamera gerichtet sind, sich schnell drehen. Es sieht viel schlechter mit einer weniger lauten Textur aus. Wenn dies für Sie in Ordnung ist, ist dies wahrscheinlich die bevorzugte Option.

Die zweite Option besteht darin, für jedes Liniensegment nur ein Kapsel-Netz dynamisch zu generieren. Es gibt nicht viel zu sagen, darüber hinaus ist dies eine einfache, etwas ineffiziente Methode.

Die dritte Option besteht darin, eine begrenzte Art von Raytracing im Shader durchzuführen. Berechnen Sie den Abstand zwischen dem Liniensegment und dem schattierten Fragment, und wir können daraus die geeignete Farbe bestimmen. Hier ist ein link dafür. Der Geometrieshader wird derzeit nicht im Webgl unterstützt, aber es gibt nichts, was Sie daran hindert, den Begrenzungslinienquader per Javascript zu erzeugen. Oh, und wenn Sie weiche Linien brauchen, brauchen Sie wahrscheinlich die blend_minmax Erweiterung. Wahrscheinlich die am schwierigsten zu installierende Methode, kann aber im Vergleich zu den anderen beiden Methoden in jedem Winkel betrachtet und sehr individuell angepasst werden.