JSFiddle - React, Tailwind, and code Playground

by tahmid

HTML

<canvas id="c"></canvas>
<script src="https://raw.github.com/tahmid/etc2/master/js/cameraControl.js"></script>
<script src="https://raw.github.com/tahmid/etc2/master/js/inka3d.js"></script>
<script src="https://raw.github.com/tahmid/etc2/master/js/inka3dDebug.js"></script>
<script src="https://raw.github.com/tahmid/etc2/master/js/webgl-utils.js"></script>

CSS

body {
    margin: 0;
}
#c {
    position: absolute;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
}

JavaScript

var canvas;
var gl;
var aspect;

var viewMatrix;
var projectionMatrix;

var renderer;
var group;

var loader;
var scene;
var sceneTime;

var cameraMatrix;
var cameraProjection;

var startTime;
$(document).ready(function () {
    webGLStart();
});

function initScene() {
    // create view and projection matrix
    viewMatrix = new Float32Array(16);
    projectionMatrix = new Float32Array(16);

    // create renderer with given number of pre-allocated render jobs
    renderer = inka3d.createRenderer(50);

    // create a render group
    group = renderer.createGroup();

    // load scene container that is embedded into this html via script tag
    // add selection code here if you exported multiple texture sets or image formats
    loader = inka3d.loadEmbedded(index, 'index.dat', '', '.jpg', function (container) {
        // loading finished

        // create scene
        scene = container.createScene("index", group);
        sceneTime = scene.getFloatVector("time", 1);

        // camera
        cameraMatrix = new Float32Array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 10.3207638891, 292.388509521, 1242.83969992, 1.0]);
        cameraProjection = new Float32Array([2.0, 1.37795, 1.41732, 0.94488, 0.0, 0.0, 0.1, 10000.0]);
    });
}

function waitLoad() {
    if (loader.progress < 1) {
        // continue waiting...
        requestAnimFrame(waitLoad);

        gl.clearColor(0, 0, 0, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);

        gl.enable(gl.SCISSOR_TEST);
        var w = window.innerWidth;
        var h = window.innerHeight;
        gl.scissor(0, h / 2 - 10, w * loader.progress, 20);
        gl.clearColor(1, 1, 1, 1);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.disable(gl.SCISSOR_TEST);
    } else {
        // loading finished

        // init gl
        gl.clearColor(0.05, 0.05, 0.05, 1.0);
        gl.enable(gl.DEPTH_TEST);

        // start
        startTime = new Date().getTime() / 1000.0 - 0.041666666666666664;
        tick();
  ...