Trac #28702: Three.js: Add option to render only single side of surface

The current implementation of WebGL has known issues with transparent
surfaces, one being noticeable rendering artifacts for closed
transparent surfaces. This ticket adds the option of rendering the front
side of the surface only, thereby reducing rendering artifacts. Compare
these two graphics:

{{{
polytopes.dodecahedron().plot(opacity=.5)
polytopes.dodecahedron().plot(opacity=.5,single_side=True)
}}}

This option is only meant to be used with closed surfaces, because an
open surface will disappear from view from certain angles if both sides
are not rendered.

URL: https://trac.sagemath.org/28702
Reported by: paulmasson
Ticket author(s): Paul Masson
Reviewer(s): Eric Gourgoulhon

src/doc/en/reference/plot3d/threejs.rst

@@ -54,6 +54,9 @@ Options currently supported by the viewer:
 - ``render_order`` -- (default: 0) numeric value for rendering order of transparent surfaces;
   objects render from lowest to highest value ensuring that lower-valued objects render completely
 
+- ``single_side`` -- (default: False) Boolean determining whether both sides of a surface material
+  are rendered; set to True to reduce rendering artifacts for closed transparent surfaces
+
 - ``thickness`` -- (default: 1) numeric value for thickness of lines
 
 Clicking on the information icon in the lower right-hand corner of the viewer opens

src/ext/threejs/threejs_template.html

@@ -298,14 +298,14 @@
         }
         geometry.computeVertexNormals();
 
+        var side = json.singleSide ? THREE.FrontSide : THREE.DoubleSide;
         var transparent = json.opacity < 1 ? true : false;
-        var flatShading = 'useFlatShading' in json ? true : false;
 
-        var material = new THREE.MeshPhongMaterial( { side: THREE.DoubleSide,
+        var material = new THREE.MeshPhongMaterial( { side: side,
                                      color: useFaceColors ? 'white' : json.color,
                                      vertexColors: useFaceColors ? THREE.FaceColors : THREE.NoColors,
                                      transparent: transparent, opacity: json.opacity,
-                                     shininess: 20, flatShading: flatShading } );
+                                     shininess: 20, flatShading: json.useFlatShading } );
 
         var c = new THREE.Vector3();
         geometry.computeBoundingBox();
@@ -317,7 +317,7 @@
         if ( transparent && json.renderOrder ) mesh.renderOrder = json.renderOrder
         scene.add( mesh );
 
-        if ( 'showMeshGrid' in json ) {
+        if ( json.showMeshGrid ) {
 
             var geometry = new THREE.Geometry();
 

src/sage/plot/plot3d/index_face_set.pyx

@@ -1234,6 +1234,9 @@ cdef class IndexFaceSet(PrimitiveObject):
             renderOrder = self._extra_kwds.get('render_order')
             json[0] = json[0][:-1] + ', "renderOrder": {}}}'.format(renderOrder)
 
+        if self._extra_kwds.get('single_side'):
+            json[0] = json[0][:-1] + ', "singleSide": true}'
+
         if self._extra_kwds.get('threejs_flat_shading'):
             json[0] = json[0][:-1] + ', "useFlatShading": true}'