I'm exporting some plots from Mathematica into x3d for display on the web, and I'm having some trouble getting the plot mesh to display consistently. I believe this behaviour is ultimately a bug on the part of the Mathematica x3d exporter, and I'd like to document it here.
Start off by building a 3D plot of a surface in Mathematica:
plot = Plot3D[x^2+y^2, {x, -1, 1}, {y, -1, 1}, PlotRange → {0, 1}, ClippingStyle → None]
and then export this into x3d:
Export[FileNameJoin[{NotebookDirectory[], "plot1.x3d"}], plot]
To see this in a browser, make a barebones html wrapper,
<html>
<head>
<!-- X3DOM inclusions -->
<script type='text/javascript' src='x3dom.js'></script>
<link rel='stylesheet' type='text/css' href='x3dom.css'></link>
</head>
<body>
<x3d width='800px' height='500px'>
<scene>
<Viewpoint id="viewpoint" position="0 3 2"
orientation="0 0.5 0.9 3" centerOfRotation="0 0 0" description="camera"></Viewpoint>
<Inline url="plot1.x3d" />
</scene>
</x3d>
</body>
</html>
and serve it locally however you want. (I run it over jekyll, but any local web server will do.)
The problem is that the plot, and specifically the mesh, gets displayed differently by different browsers. As an example, on my machine (over Windows 10), this is what Chrome and Firefox show:
(The image links to this document, so you can see how it renders in your browser.)
To say it out loud, the mesh is completely missing from the Firefox render. (On other machines, however, the behaviour is different. With mobile Chrome the mesh is missing, and on my linux box the behaviour seems to be reversed, with Firefox displaying the mesh and Chrome skipping it completely.)
What's going on, and how can this be fixed?