Three.js: Meshes created with ShaderMaterial do not play skeletal animation?

[AlexeyGapon]

Hello i cant create SSAO, Depth of field(Bokeh), NormalMaps etc, shaders with skinned skeletal meshes loaded with JSON loader? I cant create normalmap shader with SkinnedMesh, and there is no effect in post proccesing with SSAO.
The skinned mesh stuks in 1 frame of animation.

[RemusMar]

JSON + Normal Map is ok.
http://necromanthus.com/Test/html5/Lara_JS.html

JSON + ShaderMaterial is bugged (kills the animation):
http://necromanthus.com/Test/html5/Lara_shader.html

[RemusMar]

In fact, RayCaster and ShaderMaterial do not work on skinned meshes for the same reason:
In both cases the new vertex (and faces) positions are computed by GPU.
The CPU has access to the initial pose only.

cheers

[AlexeyGapon]

I see what shader did you use for NormalMap ?

[RemusMar]

I see what shader did you use for NormalMap ?

Phong ( Diffuse + Specular + Normal ).
http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial

[benaadams]

THREE.ShaderMaterial essentially means "I'll write my own shaders". If you've not included any code for skinned meshes, it won't do anything with them.

[AlexeyGapon]

Can you give an advise how to implement skinning into shader skin. I need this shader for creating skin for my characeters. And where can i read more about writing shaders for Three.js ShaderMaterial.
Can i copi uniforms from different shaders, and combine them? For example MeshPhongMaterial can play animation with skinning. Can i create me shader from examples with skin shader, and add skinning from meshPhong. Or i should write my own shader from scratch?

[benaadams]

@AlexeyGapon you'll need to include the relevant shader chunks for skinning much like for this: http://stackoverflow.com/questions/29217468/three-js-objects-intersected-and-shader-material/29719620#29719620

This list of shader chunks for existing shaders may help: https://github.com/mrdoob/three.js/blob/master/src/renderers/shaders/ShaderLib.js

[WestLangley]

@AlexeyGapon

Can you give an advise how to implement skinning into shader skin.

Sorry, this is not a help site. If you need help, then please use stackoverflow.

[AlexeyGapon]

Actualy i did it.
http://stackoverflow.com/questions/30163543/three-js-animation-stops-if-using-skinning-true-with-three-shadermaterial

[RemusMar]

THREE.ShaderMaterial essentially means "I'll write my own shaders".
If you've not included any code for skinned meshes, it won't do anything with them.

Ben,
Please take a look of the source of this sample:
http://necromanthus.com/Test/html5/Lara_shader.html
It worked with r66.
It doesn't work with r71 anymore.
With "mvPosition = modelViewMatrix * skinned;" you'll get some trash on the screen.

[RemusMar]

Can you give an advise how to implement skinning into shader skin.

http://necromanthus.com/Test/html5/Lara_shader.html

vertexShader updated to work with r71.
cheers

[AlexeyGapon]

RemusMar, i wrote you an e-mail from your website. Could you please answer/
cheers.

[RemusMar]

RemusMar, i wrote you an e-mail from your website. Could you please answer

Use the vertexShader provided in the above sample.
It works in both cases (Mesh and SkinnedMesh).
cheers

[AlexeyGapon]

I need to render BokehShader2 and Godrays Shader with characters in scene. But they all stay still like SSAO and so on. So what should i do to modify these shaders to make them work with skinned mesh to?

[RobertRisco]

Can you give an advise how to implement skinning into shader skin.
http://necromanthus.com/Test/html5/Lara_shader.html

vertexShader updated to work with r71.
cheers

After looking through hundreds of pages this is the first real example of how to do skinning with custom shaders in the material I've found. This example should be added to three.js examples and given the recognition it deserves. We newbies have a tough time getting these simple things to work and I really appreciate the effort. As a note, this needs the minified library (v77) to work: http://threejs.org/build/three.min.js

[valentin-schwind]

Found a solution by re-inserting the shaderchunks in ShaderSkin.js:

    vertexShader: [

        "uniform vec4 offsetRepeat;",

        "varying vec3 vNormal;",
        "varying vec2 vUv;",

        "varying vec3 vViewPosition;",

        THREE.ShaderChunk[ "common" ],
        THREE.ShaderChunk[ "lights_pars" ],
        THREE.ShaderChunk[ "shadowmap_pars_vertex" ],
        THREE.ShaderChunk[ "morphtarget_pars_vertex" ],
        THREE.ShaderChunk[ "skinning_pars_vertex" ],

        "void main() {",
            "vec4 worldPosition = modelMatrix * vec4( position, 1.0 );",

            THREE.ShaderChunk[ "skinbase_vertex" ],
            THREE.ShaderChunk[ "begin_vertex" ],
            THREE.ShaderChunk[ "morphtarget_vertex" ],
            THREE.ShaderChunk[ "skinning_vertex" ],
            THREE.ShaderChunk[ "project_vertex" ],

            "vViewPosition = -mvPosition.xyz;",

            "vNormal = normalize( normalMatrix * normal );",

            "vUv = uv * offsetRepeat.zw + offsetRepeat.xy;",

            "gl_Position = projectionMatrix * mvPosition;",

            THREE.ShaderChunk[ "shadowmap_vertex" ],

        "}"

    ].join( "\n" )