实现 raycast 介绍自定义 webgl - 基于 glmatrix 的引擎解决方案

问题描述

如果有人想要帮助或任何类型的建议（链接），我会很满意。我使用基于场景对象的渲染创建了小引擎。

三角形成功，但仅当相机位于三角形前面时。 App.camera.FirstPersonController = true 后你可以走在后面 并尝试 raycask 点击不起作用。

也许对我来说最大的问题是轮换。 翻译适用于 mvMatrix，但如果我改变位置，还需要添加：

添加 + object.position.worldLocation[0] 到输入顶点，当我改变位置时一切正常......

但是如何适应旋转。 例如在旋转改变之后 App.scene.MyColoredSquareRayObject.rotation.roty = -45 raycast 根本没有捕捉到任何检测......

如果我不改变旋转，那么即使在第一人称模式下也能正常工作（鼠标给出旋转坐标）。

如果我使用 App.scene.MyColoredSquareRayObject.rotation.rotz = 90 的兴趣 由 z 进行光线投射。

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,degToRad(object.rotation.rz),object.rotation.getRotDirZ());
  mat4.rotate(object.mvMatrix,degToRad(object.rotation.rx),object.rotation.getRotDirX());
  mat4.rotate(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) ) {

....

检查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,1);
  Box-shadow: inset 0px 0px 22px 1px rgba(0,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,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,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);
  ;
  color: greenyellow;
  border: 2px solid #4CAF50;
}

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

.button2 {
  background-color: rgb(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,vTextureCoord.t)); vec4 textureColor1 = texture2D(uSampler1,vTextureCoord.t)); vec4 textureColor2 = texture2D(uSampler2,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,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,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,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,textureColor.a); gl_FragColor = textureColor; } /* vec4 color0 = texture2D(u_image0,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,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,vTextureCoord.t)); gl_FragColor = vec4(textureColor.rgb * vLightweighting,textureColor.a); } /* vec4 color0 = texture2D(u_image0,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,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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）