JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<script src="https://rawgit.com/gregross/webgl-surface-plot/master/javascript/SurfacePlot.js"></script>
<script src="https://rawgit.com/gregross/webgl-surface-plot/master/javascript/ColourGradient.js"></script>
<script src="https://rawgit.com/gregross/webgl-surface-plot/master/javascript/glMatrix-0.9.5.min.js"></script>
<script src="https://rawgit.com/gregross/webgl-surface-plot/master/javascript/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 = ...

CSS

div#surfacePlotDiv {
    margin-left: 100px;
    margin-top: 100px;
    border-style: solid;
    border-width: 2px;
    border-color: red;
    width: 510px;
    height: 510px;
}

JavaScript

var canvas_height = 500;
var canvas_width = 500;
var surfacePlot;
var surfacePlot2;
var data, options, basicPlotOptions, glOptions, animated, plot1, values;
var numRows = 45;
var numCols = 45;
var tooltipStrings = new Array();

function setUp() {

    values = new Array();

    data = {
        nRows: numRows,
        nCols: numCols,
        formattedValues: values
    };

    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 colours = [colour1, colour2, colour3, colour4, colour5];

    // Axis labels.
    var xAxisHeader = "X-axis";
    var yAxisHeader = "Y-axis";
    var zAxisHeader = "Z-axis";
    var renderDataPoints = false;
    var background = '#ffffff';
    var axisForeColour = '#000000';
    var hideFloorPolygons = true;

    var chartOrigin = {
        x: 200,
        y: 265
    };

    // Options for the basic canvas plot.
    basicPlotOptions = {
        fillPolygons: fillPly,
        tooltips: tooltipStrings,
        renderPoints: renderDataPoints
    }

    // Options for the webGL plot.
    var xLabels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    var yLabels = [0, 1, 2, 3, 4, 5];
    var zLabels = [0, 1, 2, 3, 4, 5, 6];

    // These labels are used when autoCalcZScale is false;
    glOptions = {
        xLabels: xLabels,
        yLabels: yLabels,
        zLabels: zLabels,
        autoCalcZScale: true
    };

    // Options common to both types of plot.
    options = {
        xPos: 0,
        yPos: 0,
        width:...