JSFiddle - React, Tailwind, and code Playground

by Douglas Duhaime

HTML

<script type="x-shader" id="vertexshader">
  
 // This is autogenerated by Three.js:
    
 precision highp float;
 
 #define VERTEX_TEXTURES
 
 
 
 #define MAX_DIR_LIGHTS 0
 #define MAX_POINT_LIGHTS 0
 #define MAX_SPOT_LIGHTS 0
 #define MAX_HEMI_LIGHTS 0
 #define MAX_SHADOWS 0
 #define MAX_BONES 58
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 #define SHADOWMAP_SOFT
 
 
 
 uniform mat4 modelMatrix;
 uniform mat4 modelViewMatrix;
 uniform mat4 projectionMatrix;
 uniform mat4 viewMatrix;
 uniform mat3 normalMatrix;
 uniform vec3 cameraPosition;
 attribute vec3 position;
 attribute vec3 normal;
 attribute vec2 uv;
 attribute vec2 uv2;
 #ifdef USE_COLOR
 attribute vec3 color;
 #endif
 #ifdef USE_MORPHTARGETS
 attribute vec3 morphTarget0;
 attribute vec3 morphTarget1;
 attribute vec3 morphTarget2;
 attribute vec3 morphTarget3;
 #ifdef USE_MORPHNORMALS
 attribute vec3 morphNormal0;
 attribute vec3 morphNormal1;
 attribute vec3 morphNormal2;
 attribute vec3 morphNormal3;
 #else
 attribute vec3 morphTarget4;
 attribute vec3 morphTarget5;
 attribute vec3 morphTarget6;
 attribute vec3 morphTarget7;
 #endif
 #endif
 #ifdef USE_SKINNING
 attribute vec4 skinIndex;
 attribute vec4 skinWeight;
 #endif
 
 // ----------------------------------
 // This is my code:
    
     #define pi 3.141592653589793238462643383279
 
 
     uniform float earth_i;
     uniform float earth_om;
     uniform float jed;
 
     attribute float size;
     attribute float a;
     attribute float e;
     attribute float i;
     attribute float o;
     attribute float P;
     attribute float ma;
     attribute float n;
     attribute float w;
     attribute float epoch;
 
     attribute float locked;
     varying float vLocked;
    
     attribute vec3 value_color;
     varying vec3 vColor;
 
     vec3 getAstroPos() {
       float i_rad = (i - earth_i) * pi/180.0;
       float o_rad = (o - earth_om) * pi/180.0; // longitude of ascending node
       float p_rad = w * pi/180.0; // longitude of perihelion
      ...

JavaScript

// NOTE for getTranslatedShaderSource to work, you must run chrome with
// --enable-privileged-webgl-extensions

var shadertxt = document.getElementById('vertexshader').innerHTML
    .replace("{{PIXELS_PER_AU}}", "50.0");

var gl = new THREE.WebGLRenderer().getContext();

var vsh = gl.createShader(gl.VERTEX_SHADER);     
gl.shaderSource(vsh, shadertxt);
gl.compileShader(vsh);    
if(!gl.getShaderParameter(vsh, gl.COMPILE_STATUS)) {
    console.log("invalid shader : " + gl.getShaderInfoLog(vsh));    
    var lines = shadertxt.split('\n');
    for (i in lines) {   
        console.log(i, lines[i]);
    }
};
var hlsl = gl.getExtension("WEBGL_debug_shaders").getTranslatedShaderSource(vsh);
    
console.log(hlsl);
document.write(hlsl);