In the midst of my work on a project, I encountered a dilemma with rendering an intricate wireframe using THREE.LineSegments. My objective is to gradually animate the vertices within this LineSegments material (referred to as warehouse in the project), but the challenge lies in incorporating this into a THREE.RawShaderMaterial.
To achieve the desired vertex animation, I deliberated on utilizing a RawShaderMaterial, assigning both currentPosition and targetPosition attributes to the geometry, and implementing a transitionPercent uniform to dictate the position blending for each vertex during rendering:
vec3 pos = mix(currentPosition, targetPosition, transitionPercent)
However, transitioning to a RawShaderMaterial for the warehouse element erased the wireframe representation, despite my efforts to enable wireframe mode by setting wireframe = true, unlike the conventional effect seen in LineBasicMaterial.
In my pursuit to generate a wireframe-ready geometry suitable for the RawShaderMaterial, I experimented with various approaches, including:
var g1 = new THREE.BufferGeometry();
g1.addAttribute('position', new THREE.BufferAttribute(positions, 3));
var g2 = new THREE.Geometry().fromBufferGeometry(g1),
wireframe = new THREE.WireframeGeometry(g2),
geometry = new THREE.BufferGeometry().fromGeometry(wireframe);
Unfortunately, all attempts fell short of deciphering the optimal solution.
Can someone shed light on how I can leverage a RawShaderMaterial to render the adorned wireframe of the warehouse object mentioned above? Your insights would be immensely appreciated!
P.S. While I initially sought guidance from the THREE.js discussion platform, I am reiterating the inquiry here for broader visibility and potential assistance.