JSFiddle - React, Tailwind, and code Playground

by kyekk

HTML

<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/initShaders.js"></script>
<script src="https://www.cs.unm.edu/~angel/WebGL/7E/Common/MV.js"></script>
<script src="https://cdn.jsdelivr.net/gh/brent-munsell/graphics/models/mihrst.js"></script>
<body>
   <div id="container">
     <div class="app">
        <div class="title">Mir Space Station: Mission Control</div>
        <div class="mission">
          <div class="control">
            <ul>
              <li>Simulate Gravity</li>
              <li><input type="checkbox" id="gravity" checked></li>
            </ul>
            <ul>
              <li>Scale</li>
              <li><input type="number" id="scale" value="1.25" step="0.25"></li>
              <li><span class="red-font">Rotate X (degree)</span></li>
              <li><input type="number" id="xang" value="0" step="2"></li>
              <li><span class="green-font">Rotate Y (degree)</span></li>
              <li><input type="number" id="yang" value="0" step="2"></li>
              <li><span class="blue-font">Translate Z</span></li>
              <li><input type="range" id="ztrans" min="-1" max="1" step="0.01" value="0"></li>
            </ul>
          </div> <!-- end control -->
          <div class="mihr">
            <canvas id="webgl-canvas">
            Oops, your browser doesn't support the HTML5 canvas!
            </canvas>
          </div> <!-- end mihr -->
        </div> <!-- end mission -->
     </div> <!-- end app -->
  </div> <!-- end containter -->
  
  
  <script id="vertex-shader" type="x-shader/x-vertex">
  
    // highp: float 16-bits of precision.
    // mediump: float 10-bits of precision.
    // lowp: float 8-bits of precision.
  
    precision mediump float;
    attribute vec4 vertex;
    uniform vec4 props; // [ xang, yang, zang, scale ]
    
    // ----------------------------------------------
    // Task 1A: Part A Put code below.
    // ----------------------------------------------    
    uniform mat4 View;
    float...

CSS

#container
{
  margin: auto;
  padding: 1px;
  width: 800px;
  height: 800px;
}

.app
{
  margin: auto;
  padding: 0px;
}

.title
{
  margin: auto;
  padding: 10px;
  border: 1px solid black;
  font-weight: bold;
  font-family: Arial, sans-serif;
  color: white;
  background-color: rgb( 112, 128, 144 );
}

.mission
{
  margin: auto;
  padding: 0px 0px 0px 0px;
  border: 1px solid black;
  display: flex;
}

.control
{
  padding: 10px;
  font-family: Arial, sans-serif;
  height: 100%;
  width: 100%;
}

.mihr 
{
  margin: auto;
  background-position: right;
  background-size: contain;
  border: 1px solid black;
}

#webgl-canvas 
{
   background-image: url( "https://i.ibb.co/tmkcJMr/space.jpg" );
   background-repeat: no-repeat;
   width: 600px;
   height: 600px;
}

ul
{
    margin: 0px;
    padding: 10px 5px 0px 0px;
    list-style-type: none;
}

li
{
  padding: 5px 1px 10px 10px;
}

.red-font
{
  color: red;
}

.blue-font
{
  color: blue;
}

.green-font
{
  color: green;
}

JavaScript

console.clear();

// ----------------------------------------------
// variables used in the program
// ----------------------------------------------

let webgl_context = null;
let attr_vertex = null;
let uniform_props = null;
let uniform_color = null;
let uniform_z_translation = null;
let uniform_view = null;
let vertex_data = [];
let canvas = null;
let program = null;
let count = 2;
let size = 3;
let rot = 0;
let axis_index = 0;

let at = vec3(0.0,0.0,0.0);
let up = vec3(0.0,0.5,0.0);
let eye = vec3(-0.15,-0.15,0.35);
let viewMatrix = lookAt( eye, at, up );


// Coordinate system vertices

let A = [
  [0.0, 0.0, 0.0],    
  [1.0/2, 0.0, 0.0],
  [0.0, 0.0, 0.0],
  [0.0, 1.0/2, 0.0],
  [0.0, 0.0, 0.0],
  [0.0, 0.0, 1.0]
];


// ----------------------------------------------
// configure web-gl context
// ----------------------------------------------
function configure() {
    
    canvas = document.getElementById( "webgl-canvas" );
    
    webgl_context = canvas.getContext( "webgl" );
    program = initShaders( webgl_context, "vertex-shader", "fragment-shader" );
    webgl_context.useProgram( program );
    
    webgl_context.viewport( 0, 0, canvas.width, canvas.height );
    webgl_context.enable( webgl_context.DEPTH_TEST );
       
    attr_vertex = webgl_context.getAttribLocation( program, "vertex" );
    uniform_props = webgl_context.getUniformLocation( program, "props" );
    uniform_color = webgl_context.getUniformLocation( program, "color" );
    
    // ----------------------------------------------
    // Task 2A: Put code below.
    // ---------------------------------------------- 
        uniform_z_translation = webgl_context.getUniformLocation(program, "z_translation");
    
    
    
    // ----------------------------------------------
    // Task 2B: Put code below.
    // ----------------------------------------------
    uniform_view = webgl_context.getUniformLocation(program, "View");
    
    
    
    
    //...