我想知道如何在webgl曲面图上绘制一条线。我目前使用基于webgl的SurfacePlot.js。我不知道如何在这张3D图表上添加其他元素。我附上我的代码只绘制了表面。
<!--[if IE]><script type="text/javascript" src="js/webgl_surface_plot/excanvas.js"> </script><![endif]-->
<script type="text/javascript" src='js/webgl_surface_plot/SurfacePlot.js'></script>
<script type="text/javascript" src='js/webgl_surface_plot/ColourGradient.js'> </script>
<script type="text/javascript" src="js/webgl_surface_plot/glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="js/webgl_surface_plot/webgl-utils.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec4 vColor;
varying vec3 vLightWeighting;
void main(void)
{
gl_FragColor = vec4(vColor.rgb * vLightWeighting, vColor.a);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat3 uNMatrix;
varying vec4 vColor;
uniform vec3 uAmbientColor;
uniform vec3 uLightingDirection;
uniform vec3 uDirectionalColor;
varying vec3 vLightWeighting;
void main(void)
{
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vec3 transformedNormal = uNMatrix * aVertexNormal;
float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0);
vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
vColor = aVertexColor;
}
</script>
<script id="axes-shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main(void)
{
gl_FragColor = vColor;
}
</script>
<script id="axes-shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
uniform vec3 uAxesColour;
void main(void)
{
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = vec4(uAxesColour, 1.0);
}
</script>
<script id="texture-shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void)
{
gl_FragColor = texture2D(uSampler, vTextureCoord);
}
</script>
<script id="texture-shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec2 aTextureCoord;
varying vec2 vTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void)
{
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vTextureCoord = aTextureCoord;
}
</script>
<script type='text/javascript'>
var surfacePlot;
var data, options, basicPlotOptions, glOptions, plot, values2;
var numRows = 90;
var numCols = 90;
var d1 = 0;
var d2 = 0;
var xLB = 0;
var yLB = 0;
<%= (String) request.getAttribute("varxInterval") %>
d1 = xInterval / (numRows-1);
<%= (String) request.getAttribute("varyInterval")%>
d2 = yInterval /(numCols-1);
<%= (String) request.getAttribute("varxLB")%>
<%= (String) request.getAttribute("varyLB")%>
function setUp()
{
var tooltipStrings = new Array();
values2 = new Array();
data = {nRows: numRows, nCols: numCols, formattedValues: values2};
//int numRows = (int) (Integer) request.getAttribute("numRows");
//int x = (Integer) request.getAttribute("x");
//int y = (Integer) request.getAttribute("y");
//Output output = (Output) system.getOutDefs((Integer) request.getAttribute("z")).getOut();
//double d1 = ((Double) request.getAttribute("xInterval")) / (numRows-1);
var idx = 0;
for (var i = 0; i < numRows; i++)
{
values2[i] = new Array();
for (var j = 0; j < numCols; j++)
{
var xval = xLB + ((i * d1 * 1000) / 1000);
var yval = yLB + ( (j * d2 * 1000) / 1000);
values2[i][j] = datas3d[i][j];
tooltipStrings[idx] = "x:" + xval + ", y:" + yval + " = " + values2[i][j];
idx++;
}
}
surfacePlot = new SurfacePlot(document.getElementById("surfacePlotDiv"));
// Don't fill polygons in IE < v9. It's too slow.
var fillPly = true;
// Define a colour gradient.
var colour1 = {red:0, green:0, blue:255};
var colour2 = {red:0, green:255, blue:255};
var colour3 = {red:0, green:255, blue:0};
var colour4 = {red:255, green:255, blue:0};
var colour5 = {red:255, green:0, blue:0};
var black = {red:0, green:0, blue:0};
var grey = {red:200, green:200, blue:200};
<%
if (system.getPrefs().blackAndWhite) {
out.println("var colours = [black, grey];");
} else {
out.println("var colours = [colour1, colour2, colour3, colour4, colour5];");
}
%>
// Axis labels.
var xAxisHeader = "<%= (String) request.getAttribute("xAxisHeader") %>";
var yAxisHeader = "<%= (String) request.getAttribute("yAxisHeader") %>";
var renderDataPoints = false;
var background = '#ffffff';
var axisForeColour = '#000000';
var hideFloorPolygons = false;
var chartOrigin = {x: 450, y:350};
// Options for the basic canvas pliot.
basicPlotOptions = {fillPolygons: fillPly, tooltips: tooltipStrings, renderPoints: renderDataPoints };
// Options for the webGL plot.
var xLabels = <%= (String) request.getAttribute("xLabels") %>;
var yLabels = <%= (String) request.getAttribute("yLabels") %>;
var zLabels = [0, 0.2, 0.4, 0.6, 0.8, 1]; // These labels ar eused when autoCalcZScale is false;
glOptions = {xLabels: xLabels, yLabels: yLabels, zLabels: zLabels, chkControlId: "allowWebGL", autoCalcZScale: true, animate: false};
// Options common to both types of plot.
options = {xPos: 0, yPos: 0, width: 700, height: 500, colourGradient: colours,
xTitle: xAxisHeader, yTitle: yAxisHeader, zTitle: "Certainty",
backColour: background, axisTextColour: axisForeColour, hideFlatMinPolygons: hideFloorPolygons, origin: chartOrigin};
surfacePlot.draw(data, options, basicPlotOptions, glOptions);
}
我需要在Z = 1轴的表面上方添加这条线。