Implemeting raycast intro custom webgl - glmatrix based engine solution - webgl

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