Implemeting raycast intro custom webgl - glmatrix based engine solution

Question

If anyone wanna help or any type of suggestion (links) i would be satisfied. I create little engine with scene object based render.

Success with triangle but only when camera is front of triangle . After App.camera.FirstPersonController = true you can walk behind and try raycask click not working.

Maybe biggest problem for me is rotation . Translation is adaptend on mvMatrix but if i change position a need to add also :

add + object.position.worldLocation[0] to input vertices and everything works perfect when i change position ...

but how to make adapt for rotation. For example after rotation change App.scene.MyColoredSquareRayObject.rotation.roty = -45 raycast dont catch any detection at all ....

If i dont change rotation then works fine even in first person regime (mouse gives coordinate for rotation).

Interest if i use App.scene.MyColoredSquareRayObject.rotation.rotz = 90 by z the raycast works.

In draw function [mouse oook work raycast] i expected everything (is calculated) to work but it doesn't

  mat4.identity(object.mvMatrix);
  this.mvPushMatrix(object.mvMatrix, this.mvMatrixStack);

  if (App.camera.FirstPersonController == true) {
    camera.setCamera(object);
  }

  mat4.translate(object.mvMatrix, object.mvMatrix, object.position.worldLocation);

  mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(object.rotation.rz), object.rotation.getRotDirZ());
  mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(object.rotation.rx), object.rotation.getRotDirX());
  mat4.rotate(object.mvMatrix, object.mvMatrix, degToRad(object.rotation.ry), object.rotation.getRotDirY());
  

  if (raycaster.checkingProcedureCalc) raycaster.checkingProcedureCalc(object);

    const triangle  = [

      [object.geometry.vertices[0 + a*3] + object.position.worldLocation[0], object.geometry.vertices[1 + a*3] + object.position.worldLocation[1], object.geometry.vertices[2 + a*3]],
      [object.geometry.vertices[0 + b*3] + object.position.worldLocation[0], object.geometry.vertices[1 + b*3] + object.position.worldLocation[1], object.geometry.vertices[2 + b*3]],
      [object.geometry.vertices[0 + c*3] + object.position.worldLocation[0], object.geometry.vertices[1 + c*3] + object.position.worldLocation[1], object.geometry.vertices[2 + c*3]],

    ];
    if (rayIntersectsTriangle(myRayOrigin, ray, triangle, intersectionPoint, object.position) ) {

....

Check on demo live

project - raycast.js file

var world;
var App = matrixEngine.App;
var raycaster = matrixEngine.raycaster;

const addBtn = document.querySelector(".button1");
const regularBtn = document.querySelector(".button2");
addBtn.style.display = "none";
regularBtn.style.display = "none";

const run = () => {
  var App = matrixEngine.App;
  // from here you can put code from examples
  world.Add("triangle", 1, "MyColoredTriangle1");
  App.scene.MyColoredTriangle1.position.SetX(0);
  //App.scene.MyColoredTriangle1.rotation.rotationSpeed.x = 15;

}

if ("serviceWorker" in navigator) {
  window.addEventListener("load", function() {
    // navigator.serviceWorker.register("worker.js");
  });
} else {
  console.warn("Matrix Engine: No support for web workers in this browser.");
}

function webGLStart() {

  world = matrixEngine.matrixWorld.defineworld(canvas);
  world.callReDraw();

  // Make it async on tradicional way
  setTimeout(run, 77);

  canvas.addEventListener('mousedown', (ev) => {
    raycaster.checkingProcedure(ev);
  });

  window.App = App;
  window.world = world;
}



// matrixEngine.Engine.load_shaders("shaders/shaders.html");
window.matrixEngine = matrixEngine;

window.addEventListener("load", () => {
  matrixEngine.Engine.initApp(webGLStart);
});

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;
}

<script src="https://maximumroulette.com/apps/webgl-glmatrix/lib/gl-matrix-min.js"></script>

<div id="shaders"></div>
<div id="debugBox" class="debugBox" style="display:none;"></div>
<div id="fps" class="btnShadow debugBox" style="display:none;">
  <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:0px;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 id="media-holder"> </div>
</div>



<script id="triangle-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; }
</script>

<script id="triangle-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }
</script>

<!--   Square Shader      -->
<script id="square-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; }
</script>

<script id="square-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }
</script>

<!--   Cube Shader      -->
<script id="cube-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; }
</script>

<script id="cube-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }
</script>

<!--   Cube Texture Shader      -->
<script id="cubeTex-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec2 vTextureCoord; uniform sampler2D uSampler; void main(void) { gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); }
</script>

<script id="cubeTex-shader-vs" type="x-shader/x-vertex">
  #version 300 es #define POSITION_LOCATION 0 attribute vec3 aVertexPosition; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec2 vTextureCoord; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition,
  1.0); vTextureCoord = aTextureCoord; }
</script>

<!--   Filter : cubeLightTex   -->
<script id="cubeLightTex-shader-fs" type="x-shader/x-fragment">

  precision mediump float; varying vec2 vTextureCoord; varying vec3 vLightWeighting; uniform sampler2D uSampler; uniform sampler2D uSampler1; uniform sampler2D uSampler2; uniform sampler2D uSampler3; uniform sampler2D uSampler4; uniform sampler2D uSampler5;
  uniform sampler2D uSampler6; uniform sampler2D uSampler7; uniform sampler2D uSampler8; uniform sampler2D uSampler9; uniform sampler2D uSampler10; uniform sampler2D uSampler11; uniform sampler2D uSampler12; uniform sampler2D uSampler13; uniform float
  numberOfsamplers; void main(void) { vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t)); vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s,
  vTextureCoord.t)); // gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); COOL gl_FragColor = textureColor; } /* vec4 color0 = texture2D(u_image0, v_texCoord); vec4 color1 = texture2D(u_image1, v_texCoord); gl_FragColor = color0
  * color1; */
</script>

<script id="cubeLightTex-shader-vs" type="x-shader/x-vertex">
  //#define POSITION_LOCATION 0 // not in use // this is for drawInstance //layout(location = POSITION_LOCATION) in vec2 pos; //not in use //flat out int instance; // attribute vec3 aVertexPosition; attribute vec3 aVertexNormal; attribute vec2 aTextureCoord;
  uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uLightingDirection; uniform vec3 uDirectionalColor; uniform bool uUseLighting; varying vec2 vTextureCoord; varying vec3 vLightWeighting; void
  main(void) { //instance = gl_InstanceID; //gl_Position = vec4(aVertexPosition + vec2(float(gl_InstanceID) - 0.5, 0.0), 0.0, 1.0); gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; if (!uUseLighting) { vLightWeighting
  = vec3(1.0, 1.0, 1.0); } else { vec3 transformedNormal = uNMatrix * aVertexNormal; float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0); vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting;
  } }

</script>
<!--   end of cube shader   -->
<!--   Filter : cubeLightTex  CLONE OF -->

<script id="obj-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec2 vTextureCoord; varying vec3 vLightWeighting; uniform sampler2D uSampler; uniform sampler2D uSampler1; uniform sampler2D uSampler2; void main(void) { vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t));
  gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); }
</script>

<script id="obj-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec3 aVertexNormal; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uLightingDirection; uniform vec3 uDirectionalColor;
  uniform bool uUseLighting; varying vec2 vTextureCoord; varying vec3 vLightWeighting; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; if (!uUseLighting) { vLightWeighting = vec3( 1.0,
  1.0, 1.0); } else { vec3 transformedNormal = uNMatrix * aVertexNormal; float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0); vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting; } }
</script>
<!--   end of cube shader  CLONE OF -->

<!--   Pyramid Shader      -->
<script id="pyramid-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec4 vColor; void main(void) { gl_FragColor = vColor; }
</script>

<script id="pyramid-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec4 aVertexColor; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; varying vec4 vColor; void main(void) { // instance = gl_InstanceID; // gl_Position = vec4(aVertexPosition + vec2(float(gl_InstanceID) - 0.5, 0.0),
  0.0, 1.0); gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vColor = aVertexColor; }
</script>

<!--   Filter : cubeLightTex   -->
<script id="squareTex-shader-fs" type="x-shader/x-fragment">

  precision mediump float; varying vec2 vTextureCoord; varying vec3 vLightWeighting; uniform sampler2D uSampler; uniform sampler2D uSampler1; uniform sampler2D uSampler2; uniform sampler2D uSampler3; uniform sampler2D uSampler4; uniform sampler2D uSampler5;
  uniform sampler2D uSampler6; uniform sampler2D uSampler7; uniform sampler2D uSampler8; uniform sampler2D uSampler9; uniform sampler2D uSampler10; uniform sampler2D uSampler11; uniform sampler2D uSampler12; uniform sampler2D uSampler13; uniform float
  numberOfsamplers; void main(void) { vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t)); vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s,
  vTextureCoord.t)); // gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); gl_FragColor = textureColor; } /* vec4 color0 = texture2D(u_image0, v_texCoord); vec4 color1 = texture2D(u_image1, v_texCoord); gl_FragColor = color0 * color1;
  */
</script>

<script id="squareTex-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec3 aVertexNormal; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uLightingDirection; uniform vec3 uDirectionalColor;
  uniform bool uUseLighting; varying vec2 vTextureCoord; varying vec3 vLightWeighting; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; if (!uUseLighting) { vLightWeighting = vec3(1.0, 1.0,
  1.0); } else { vec3 transformedNormal = uNMatrix * aVertexNormal; float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0); vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting; } }
</script>
<!--   end of cube shader   -->

<!-- duplicate cubeLightTex -->
<!--   Filter :  sphereLightTex   -->
<script id="sphereLightTex-shader-fs" type="x-shader/x-fragment">
  precision mediump float; varying vec2 vTextureCoord; varying vec3 vLightWeighting; uniform sampler2D uSampler; uniform sampler2D uSampler1; uniform sampler2D uSampler2; uniform sampler2D uSampler3; uniform sampler2D uSampler4; uniform sampler2D uSampler5;
  uniform sampler2D uSampler6; uniform sampler2D uSampler7; uniform sampler2D uSampler8; uniform sampler2D uSampler9; uniform sampler2D uSampler10; uniform sampler2D uSampler11; uniform sampler2D uSampler12; uniform sampler2D uSampler13; uniform float
  numberOfsamplers; void main(void) { vec4 textureColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); vec4 textureColor1 = texture2D(uSampler1, vec2(vTextureCoord.s, vTextureCoord.t)); vec4 textureColor2 = texture2D(uSampler2, vec2(vTextureCoord.s,
  vTextureCoord.t)); gl_FragColor = vec4(textureColor.rgb * vLightWeighting, textureColor.a); } /* vec4 color0 = texture2D(u_image0, v_texCoord); vec4 color1 = texture2D(u_image1, v_texCoord); gl_FragColor = color0 * color1;vertexPositionAttribute */
</script>

<script id="sphereLightTex-shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition; attribute vec3 aVertexNormal; attribute vec2 aTextureCoord; uniform mat4 uMVMatrix; uniform mat4 uPMatrix; uniform mat3 uNMatrix; uniform vec3 uAmbientColor; uniform vec3 uLightingDirection; uniform vec3 uDirectionalColor;
  uniform bool uUseLighting; varying vec2 vTextureCoord; varying vec3 vLightWeighting; void main(void) { gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0); vTextureCoord = aTextureCoord; if (!uUseLighting) { vLightWeighting = vec3(1.0, 1.0,
  1.0); } else { vec3 transformedNormal = uNMatrix * aVertexNormal; float directionalLightWeighting = max(dot(transformedNormal, uLightingDirection), 0.0); vLightWeighting = uAmbientColor + uDirectionalColor * directionalLightWeighting; } }
</script>
<!--   end of cube shader   -->

<script src="https://maximumroulette.com/apps/matrix-engine/builds/me.lib.js"></script>

Check whole project

[Ray - Triangle Intersection](https://www.scratchapixel.com/lessons/3d-basic-rendering/ray-tracing-rendering-a-triangle/ray-triangle-intersection-geometric-solution) ? — LJᛃ, Jul 21 '21 at 23:54
The "inside-outside" technique we have just described works for any convex polygon. Repeat the technique we have used for triangles for each edge of the polygon. Interest Fact. First i will try with square it is most simple two triangles... Thnks for reference — Nikola Lukic, Jul 28 '21 at 19:16

Implemeting raycast intro custom webgl - glmatrix based engine solution

0 Answers0

Linked