更新线框几何

Question

Is it possible to show the wireframe and the object itself, whose vertices constantly updating with a shader.

my code is basically;

var mainGeo = new THREE.SphereGeometry(100, 80, 80);
var shaderMaterial = new THREE.ShaderMaterial({
  transparent: true,
  uniforms: displacementUniforms,
  vertexShader: document.getElementById('displacement_vertex').textContent,
  fragmentShader: document.getElementById('displacement_fragment').textContent,  
});

myObject = new THREE.Object3D();

objectLayer1 = new THREE.Mesh(mainGeo, shaderMaterial);
objectLayer2 = new THREE.LineSegments(
  new THREE.WireframeGeometry( objectLayer1.geometry ),
  new THREE.LineBasicMaterial({
    color: 0xff5555,
    transparent: true,
    opacity: 0.5
  })
);

myObject.add(objectLayer1);
myObject.add(objectLayer2);
scene.add(myObject);

update();

updateRender(){
  //RenderScene
  //RenderShaderSourceScene
}

update(){

  //do some stuff

  updateUniforms();
  updateRender();

  requestAnimationFrame(update);
}

updateUniforms(){

  //change shader uniform values

}

I tried wireframeGeometry but i can't update its vertices.

for example; i created this object with a displacement shader, and changing its values over time..

now my aim is; show a wireframe around the object and also access the wireframe's properties like width, color, opacity, etc..

How is that possible?

Thanks in advance..

Answer 1

i figured out!

    objectLayer2 = new THREE.LineSegments(objectLayer1.geometry,shaderMaterial);

but we have a color issue now.

---

EDIT, YAY!

Since my linesegments getting their vertex and color values from the shader, i needed to write a little fragment shader to recolor my line segments.

here it is;

uniform vec3 lineSegmentColor;

void main() { 
  gl_FragColor = vec4( lineSegmentColor, 1.0 );
}