Skip to content

MATRIX ENGINE WIKI

Jump to bottom
Nikola edited this page Jun 15, 2022 · 1 revision

Welcome to the matrix-engine help wiki page

To use matrix-engine from NPM Services take a look at https://github.com/zlatnaspirala/matrix-engine-starter Take a look at the https://codepen.io/zlatnaspirala/full/OJQdGVM for more data about what is needed for running matrix-engine.

INDEX.HTML For matrix-engine from npm service:


<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="manifest" href="manifest.web">
  <title>Matrix Engine is WebGL App/Game engine based on glmatrix lib. Created by Nikola Lukic</title>
  <script defer src="./node_modules/matrix-engine/lib/gl-matrix-min.js"></script>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimal-ui">>
  <link rel="icon" href="res/icons/favicon.ico" type="image/x-icon">
  <meta http-equiv="Cache-control" content="public">
</head>
<body>
  <div id="shaders" ></div>
  <div id="debugBox" class="debugBox" ></div>
  <div id="fps" class="btnShadow debugBox" >
    <button id="stopRender" type="button" >stopRender</button>
    <div color = "white"><b id="fps"></b></div>
  </div>

  <button class="add-button button1">
    <h1> Add to home screen </h1>
    <h2> Run like PWA Application for better performance</h2>
  </button>

  <button class="add-button button2">
    <h2> I don't wanna full PWA just play it in regular HTML5 page.</h2>
  </button>

  <div id="HOLDER_STREAMS" class="debugBox" style="display:none;position:absolute;left:-3000px;top:0px;width:512px;height:512px" >
    <video id="webcam_beta" autoplay width="512" height="512" style="display:none;position:absolute;left:-200px;top:-110px;"></video>
    <audio id="audio_beta" src="#"></audio>
  </div>
  <script src="./builds/app.js"></script>
</body>
</html>

CSS For matrix-engine

body {
  color: lime;
  background-color:black;
  font-family: "Courier New";
  font-size: 13px;
  background-color: black;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

a {
  font-family: "Courier New";
  color: #0080ff;
}

.btnShadow {
  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
  box-shadow: inset 0px 0px 22px 1px rgba(0,255,30,1);
  cursor: pointer; cursor: hand;
  color: lime;
  text-shadow: 1px 0px 0px #0BFF03;
}

div.btnShadow:hover {
  background-color: lime;
  color:black;
  text-shadow: 1px 1px 1px #0BFF03;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  -webkit-box-shadow: 0 0 10px 3px #47FF19;
  box-shadow: 0 0 10px 3px #47FF19;
}

.debugBox {
  position:absolute;
  left:0;
  top:0;
  font-size: 12px;
  width:200px;
  height: 15px;
  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
  box-shadow: inset 0px 0px 22px 1px rgba(0,255,30,1);
  background-color: black;
  color: lime;
}

.textEditor {
  font-size: 10px;
  width : 100%;
  max-width: 850px !important;
  min-width: 550px !important;
}

textarea {
  -webkit-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
  -moz-box-shadow: inset 0px 0px 22px 2px rgba(0,255,30,1);
  box-shadow: inset 0px 0px 22px 1px rgba(0,255,30,1);
  background-color: black;
  color: lime;
}

.textureCanvas2d {
  display:none;
  position:absolute;
  left:-3000px;
  top:0px;
  width:512px;
  height:512px;
}

.add-button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 2px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
  top: 1px;
  left: 1px;
  width:100%;
  width: -webkit-fill-available;
  height:30%;
  background-color: rgb(27, 27, 27);
  font-family: "Courier New";
}

.button1 {
  background-color:  rgb(27, 27, 27);; 
  color: greenyellow; 
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

.button2 {
  background-color:  rgb(27, 27, 27);; 
  color: white; 
  border: 2px solid #4CAF50;
} 

.button2:hover {
  background-color: #95af4c;
  color: white;
}

  • You can hide two top buttons at the begin.

  • If you test engine with https://localhost

It is normal to see:

An SSL certificate error occurred when fetching the script.
b.html:1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://localhost/PRIVATE_SERVER/webgl2-glmatrix2-engine/webgl2-glmatrix2-engine/') with script ('https://localhost/PRIVATE_SERVER/webgl2-glmatrix2-engine/webgl2-glmatrix2-engine/worker.js'): An SSL certificate error occurred when fetching the script.

webGL2GLMatrix2

Clone this wiki locally