Is there a way to display both the wireframe and the object itself, with vertices that update continuously using a shader?
My code currently looks like this;
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(){
//perform necessary actions
updateUniforms();
updateRender();
requestAnimationFrame(update);
}
updateUniforms(){
//adjust shader uniform values
}
I attempted to use wireframeGeometry but I encountered difficulties updating its vertices.
For instance, I created this object with a displacement shader and am now changing its values over time.
https://i.sstatic.net/C47QU.png
Now, my objective is to display a wireframe around the object while also being able to modify properties such as width, color, and opacity of the wireframe.
What steps can be taken to achieve this?
Thank you in advance.