regl example demo - Githubissues

kevzettler commented 7 years ago

Opening this for discussion until its ready and will move to regl-examples

kevzettler commented 7 years ago

@chinedufn I'm currently blocked on this and hope you have a minute to take a look.

seeing an error:

Error: (regl) bad data or missing for uniform "boneTransQuaternions[0]".  invalid vector, should have length 4 in command http://localhost:9966/regl.js:172:23 called from http://localhost:9966/regl.js:327:3

pretty sure that is stemming from: https://github.com/chinedufn/skeletal-animation-system/pull/3/files#diff-0d1c6153ea57c6bded9821fb0f8e79e1R144

That uniform gets passed into the regl shader via:

I'm not sure what the proper way to pass in boneTransQuaternions to the shader is.

Looking at the old code: gl.uniform4fv(bufferData.shader.uniforms['boneTransQuaternions' + jointNum].location, drawOpts.transQuaternions[jointNum])

I'm not sure how to translate that to regl style.

chinedufn commented 7 years ago

@kevzettler sadly I'm not familiar, so tagging @erkaman and @mikolalysenko in case any of them have a quick answer about how to format arrays

From a quick glance might try renaming the props to the same name as your uniforms. But that might just 100% not even be the problem ha

kevzettler commented 7 years ago

for reference, pretty sure the problem is: https://github.com/regl-project/regl/issues/373#issuecomment-258020073

Made some updates to unroll the arrays

kevzettler commented 7 years ago

@chinedufn I made some updates here. The code is not throwing any errors. Unfortunately, it is rendering an empty canvas. I could use your review on the shader code. I believe I have all the data flowing correctly through regl now to the shader code but think some values off. I'm suspecting I may have broke the camera, lighting, or texture assumptions.

kevzettler commented 7 years ago

Ok @chinedufn Thanks for pointing that out. I've updated the attributes to use regl.buffer and trying to match the webGL methods from draw-model for example:

draw-model WebGL:

    bufferData.aVertexNormal = createBuffer(gl, 'ARRAY_BUFFER', Float32Array, vertexData.vertexNormals)
    gl.bindBuffer(gl.ARRAY_BUFFER, bufferData.aVertexNormal)
    gl.enableVertexAttribArray(bufferData.shader.attributes.aVertexNormal.location)
    gl.vertexAttribPointer(bufferData.shader.attributes.aVertexNormal.location, 3, gl.FLOAT, false, 0, 0)

Regl buffers:

  attributes: {
    aVertexNormal: {
      buffer: regl.buffer({
        data: vertexData.vertexNormals,
        type: 'float32'
      }),
      size: 3
    },
}

This setup is now throwing some WebGL errors:

[.Offscreen-For-WebGL-0x7f8c5e131000]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 1

Assuming attribute 1 is referring to aVertexNormal I can change the size of aVertexNormal to 4 and it will then throw :

[.Offscreen-For-WebGL-0x7f8c5e131000]GL ERROR :GL_INVALID_OPERATION : glDrawElements: attempt to access out of range vertices in attribute 0

Which I can't seem to remedy. Hope you have another insight I'm overlooking appreciate all the help

kevzettler commented 7 years ago

Hey @chinedufn, update on this. I made some code changes to try and 1 to 1 match the data in the existing demo that gets passed to drawModel. Like adding the texture in and camera perspective. Still getting a blank screen rendering with no error output. I suspect it has to do with the Uniform arrays: boneRotQuaternions, and boneTransQuaternions It seemss regl might be sensitive to this Uniform array pattern:

I filed an issue for expanding on what I'm seeing: https://github.com/regl-project/regl/issues/404

I'm hoping you could give this another eyeball to make sure I'm not missing anything. Also wondering if you have any thoughts on tweaking the shader at all to pass the values in as attribute. Appreciate the help on this. I might have to shelve this for the moment to work on other commitments

chinedufn commented 7 years ago

@kevzettler I took a look at your branch locally. Looks like if you switch your model-view-matrix and your perspective matrix your bones will start to work. The issue was that they were working, but you couldn't see them because your camera was accidentally pointing somewhere else.

Looks like the textures are a bit off, but it's animating!

Awesome work on all of this!

With regards to potentially needing to shelve this -> no biggie, life happens indeed

kevzettler commented 7 years ago

@chinedufn I just made and pushed the same updates after seeing your last comment! Very cool! Thanks for the peer review. The animation is really jittery for me like the delta-time argument is off or something. Any thoughts on that?. I'll look some more at the texture probably another slight mistake there.

kevzettler commented 7 years ago

@chinedufn I fixed up the texture and cleaned up the code a bit and matched Standard js style. The demo is not hooked up to UI triggers like the standard demo. Let me know if you have any thoughts on further improving the code. Feel free to merge this and iterate on, or leave open.

chinedufn commented 7 years ago

@kevzettler again, amazing work on this. Excited for your work to start helping other people learn more about implementing skeletal animation.

I've added you as an owner of skeletal-animation-system. Thanks for all of your help! Feel free to merge this in 🎉

chinedufn / skeletal-animation-system

regl example demo #3