TechQA.

Implementation of BHV intro basic custom webgl program

117 views Asked by At

I found basic information : https://research.cs.wisc.edu/graphics/Courses/cs-838-1999/Jeff/BVH.html https://en.wikipedia.org/wiki/Biovision_Hierarchy

But i need for help to make it possible. I have scene object with position, rotation, vertex data in my library with handled staff like transformations.

Based on comment links from Mr. LJ. I made bvh-loader (final results position&rotation) how to load bvh file and parse it. This link is the same just diferent console logs (add_pose_recursive).

If anyone wanna collaborate take a look at source.

I already adapt position and rotation take a look demo but i wanna normal look (to connect skeletal in one part). At the moment i just put simple cube like point. Where is data to tell me how much to scale by x , y or z.

Maybe i need some extra calculation or this type of data not exist.

Now i can add my skeletal preview even i can add more specification to make better look...

And after all who to make connection with some obj mesh ? Look like heavy job.

// import * as matrixEngine from "https://cdn.skypack.dev/[email protected]";
var world;
setTimeout( () => {
  if (typeof matrixEngine !== 'undefined') {
    //////////////////////////////
    var App = matrixEngine.App;

    function webGLStart() {
      world = matrixEngine.matrixWorld.defineworld(canvas);
      world.callReDraw();

      // from here you can put code from examples
      // need to be removed from bvh-loader npm package!
      var logHTML = document.createElement('div');
      logHTML.id = 'log';
      document.body.appendChild(logHTML)

      const options = {
        world: world,
        autoPlay: true,
        showOnLoad: false, // if autoPLay is true then showOnLoad is inactive.
        type: 'ANIMATION', // "TPOSE' | 'ANIMATION'
        loop: 'playInverse', // true | 'stopOnEnd' | 'playInverse' | 'stopAndReset'
        globalOffset: [-10, -10, -45],
        skeletalBoneScale: 0.55,
        // skeletalBlend: { paramDest: 4, paramSrc: 4 } // remove arg for no blend
      };

      const filePath = "https://raw.githubusercontent.com/zlatnaspirala/Matrix-Engine-BVH-test/main/javascript-bvh/example.bvh";
      var myFirstBvhAnimation = new matrixEngine.MEBvhAnimation(filePath, options);
      canvas.addEventListener('mousedown', (ev) => {
        matrixEngine.raycaster.checkingProcedure(ev);
      });

      addEventListener('ray.hit.event', function (e) {
        console.info(e.detail.hitObject);
        e.detail.hitObject.glBlend.blendParamSrc = matrixEngine.utility.ENUMERATORS.glBlend.param[2];
        e.detail.hitObject.glBlend.blendParamDest = matrixEngine.utility.ENUMERATORS.glBlend.param[7];
      });

      window.App = App;
    }

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

    matrixEngine.Engine.initApp(webGLStart);
 
    var App = matrixEngine.App;
    //////////////////////////////
  }
}, 1000);
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 defer src="https://maximumroulette.com/apps/matrix-engine/builds/me.lib.js"></script>

<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 style='display:none' class="add-button button1">
    <h1> Add to home screen </h1>
    <h2> Run like PWA Application for better performance</h2>
   </button>
 
   <button style='display:none' 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   -->

animation webgl matrix-engine
Original Q&A
0

There are 0 answers

Related Questions in ANIMATION

Related Questions in WEBGL

Related Questions in MATRIX-ENGINE

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json python-3.x ruby-on-rails .net sql-server swift django angular objective-c pandas excel

Trending Questions