Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[wip] Shaders on the surface of the hand #11

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

[wip] Shaders on the surface of the hand #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26c814d
[wip] Shaders on the surface of the hand
pehrlich May 12, 2014
9b97404
Zebra hand
pehrlich May 12, 2014
62b4507
Show individual bones
pehrlich May 12, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 7 additions & 24 deletions build/leap.rigged-hand-0.1.3.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

22 changes: 0 additions & 22 deletions build/leap.rigged-hand-0.1.3.min.js
View file
Open in desktop

This file was deleted.

52 changes: 45 additions & 7 deletions examples/lib/three.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11352,11 +11352,11 @@ THREE.JSONLoader.prototype.parse = function ( json, texturePath ) {
}

// hacked in by peter
for ( i = 0; i < geometry.bones.length; i++) {
for ( j = 0; j < 3; j++) {
geometry.bones[i].pos[j] *= scale;
}
}
// for ( i = 0; i < geometry.bones.length; i++) {
// for ( j = 0; j < 3; j++) {
// geometry.bones[i].pos[j] *= scale;
// }
// }

// could change this to json.animations[0] or remove completely
geometry.animation = json.animation;
Expand Down Expand Up @@ -18613,7 +18613,8 @@ THREE.ShaderLib = {
{
"ambient" : { type: "c", value: new THREE.Color( 0xffffff ) },
"emissive" : { type: "c", value: new THREE.Color( 0x000000 ) },
"wrapRGB" : { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) }
"wrapRGB" : { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) },
time: { type: "f", value: 0 }
}

] ),
Expand All @@ -18629,6 +18630,8 @@ THREE.ShaderLib = {
"varying vec3 vLightBack;",

"#endif",
"varying vec2 vSkinWeight;",
"varying vec2 vSkinIndex;",

THREE.ShaderChunk[ "map_pars_vertex" ],
THREE.ShaderChunk[ "lightmap_pars_vertex" ],
Expand All @@ -18639,8 +18642,12 @@ THREE.ShaderLib = {
THREE.ShaderChunk[ "skinning_pars_vertex" ],
THREE.ShaderChunk[ "shadowmap_pars_vertex" ],

"varying vec3 vPos;",

"void main() {",


"vPos = position;",
THREE.ShaderChunk[ "map_vertex" ],
THREE.ShaderChunk[ "lightmap_vertex" ],
THREE.ShaderChunk[ "color_vertex" ],
Expand All @@ -18659,6 +18666,11 @@ THREE.ShaderLib = {
THREE.ShaderChunk[ "lights_lambert_vertex" ],
THREE.ShaderChunk[ "shadowmap_vertex" ],

"vSkinWeight = skinWeight.xy;",
"vSkinIndex = skinIndex.xy;",

// "vUv = uv;",

"}"

].join("\n"),
Expand All @@ -18667,6 +18679,9 @@ THREE.ShaderLib = {

"uniform float opacity;",

"varying vec3 vPos;",
"uniform float time;",

"varying vec3 vLightFront;",

"#ifdef DOUBLE_SIDED",
Expand All @@ -18675,6 +18690,11 @@ THREE.ShaderLib = {

"#endif",



"varying vec2 vSkinWeight;",
"varying vec2 vSkinIndex;",

THREE.ShaderChunk[ "color_pars_fragment" ],
THREE.ShaderChunk[ "map_pars_fragment" ],
THREE.ShaderChunk[ "lightmap_pars_fragment" ],
Expand All @@ -18683,8 +18703,12 @@ THREE.ShaderLib = {
THREE.ShaderChunk[ "shadowmap_pars_fragment" ],
THREE.ShaderChunk[ "specularmap_pars_fragment" ],



"void main() {",

// "vec2 position = -1.0 + 2.0 * vUv;",

"gl_FragColor = vec4( vec3 ( 1.0 ), opacity );",

THREE.ShaderChunk[ "map_fragment" ],
Expand Down Expand Up @@ -18716,6 +18740,11 @@ THREE.ShaderLib = {

THREE.ShaderChunk[ "fog_fragment" ],

"float red = 0.;" ,
"float green = vSkinIndex.x/21.; ",
"float blue = 0.; ",
"gl_FragColor = vec4(red, green, blue, 1.0); ",

"}"

].join("\n")
Expand Down Expand Up @@ -23924,7 +23953,16 @@ THREE.WebGLRenderer = function ( parameters ) {

};

material.program = buildProgram( shaderID, material.fragmentShader, material.vertexShader, material.uniforms, material.attributes, material.defines, parameters, material.index0AttributeName );
material.program = buildProgram(
shaderID,
material.fragmentShader,
material.vertexShader,
material.uniforms,
material.attributes,
material.defines,
parameters,
material.index0AttributeName
);

var attributes = material.program.attributes;

Expand Down
74 changes: 74 additions & 0 deletions shaders.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<html>
<!-- This Demo overlays a rigged hand on top of the existing page. Requires a WebGL-capable browser. -->
<head>
<script type="text/javascript" src="examples/lib/three.js"></script>
<script src="//js.leapmotion.com/leap-0.6.0-beta3_1.js"></script>
<script src="//js.leapmotion.com/leap-plugins-0.1.4.js"></script>
<script type="text/javascript" src="build/leap.rigged-hand-0.1.3.js"></script>

<script id="fragmentShader" type="x-shader/x-fragment">

uniform float time;
varying vec2 vUv;

void main() {
vec2 position = -1.0 + 2.0 * vUv;

float red = abs(sin(position.x * position.y + time / 5.0));
float green = abs(sin(position.x * position.y + time / 4.0));
float blue = abs(sin(position.x * position.y + time / 3.0 ));
gl_FragColor = vec4(red, green, blue, 1.0);
}

</script>
<script id="vertexShader" type="x-shader/x-vertex">
uniform float time;
varying vec2 vUv;

void main() {
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>

</head>
<body>

<h1>Rigged Hand - Quickstart</h1>
<p>Bring your hand over the Leap, and you should see it displayed</p>

<script>
var uniforms = {
time: { type: "f", value: 0 },
resolution: { type: "v2", value: new THREE.Vector2 }
};


var riggedHand;

(window.controller = new Leap.Controller)
.use('riggedHand', {
renderFn: function(){
uniforms.time.value += 0.1;
this.renderer.render(this.scene, this.camera);
}
})
.connect()
.on('riggedHand.meshAdded', function(handMesh){
// console.log('mesh added', arguments);
// handMesh.material = new THREE.ShaderMaterial({
// uniforms: uniforms,
// vertexShader: document.getElementById('vertexShader').innerHTML,
// fragmentShader: document.getElementById('fragmentShader').innerHTML
// });
// handMesh.skinning = true;
// debugger

});

riggedHand = controller.plugins.riggedHand;

</script>

</body>
</html>
19 changes: 19 additions & 0 deletions src/leap.rigged-hand.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,11 +227,30 @@ Leap.plugin 'riggedHand', (scope = {})->
data.materials[0].emissive.setHex(0x888888)

data.materials[0].vertexColors = THREE.VertexColors
data.materials[0].vertexColors = THREE.NoColors;
data.materials[0].depthTest = true

# "#if defined( USE_MAP ) || defined( USE_BUMPMAP ) || defined( USE_NORMALMAP ) || defined( USE_SPECULARMAP )",
m = data.materials[0]
console.log(m.map, m.lightMap, m.specularMap, m.envMap)
# debugger


# material = new THREE.ShaderMaterial({
# uniforms: uniforms,
# vertexShader: document.getElementById('vertexShader').innerHTML,
# fragmentShader: document.getElementById('fragmentShader').innerHTML
# });

# material = new THREE.MeshLambertMaterial
# material.skinning = true


_extend(data.materials[0], scope.materialOptions)
_extend(data.geometry, scope.geometryOptions)

handMesh = new THREE.SkinnedMesh(data.geometry, data.materials[0])

handMesh.scale.multiplyScalar(scope.scale)
handMesh.positionRaw = new THREE.Vector3
handMesh.fingers = handMesh.children[0].children
Expand Down