hw3web Posted August 10, 2015 Share Posted August 10, 2015 Hi there is there anyone who could make it simple shader like threeJS have: https://developer.mozilla.org/en-US/demos/detail/cross-hatching-glsl-shader/launch with nice outline and sketch like effect with dynamic pen colour iiceman 1 Quote Link to comment Share on other sites More sharing options...
hw3web Posted August 10, 2015 Author Share Posted August 10, 2015 I see how they did it : I will work on it soon: varying vec3 vNormal; varying vec2 vUv; varying float depth; varying vec3 vPosition; varying float nDotVP; varying vec3 pos; uniform vec2 repeat; uniform vec3 lightPosition; uniform float showOutline; void main() { float w = 1.; vec3 posInc = vec3( 0. ); if( showOutline == 1. ) posInc = w * normal; vUv = repeat * uv; vec4 mvPosition = modelViewMatrix * vec4( position + posInc, 1.0 ); vPosition = mvPosition.xyz; gl_Position = projectionMatrix * mvPosition; pos = gl_Position.xyz; vNormal = normalMatrix * normal; depth = ( length( position.xyz ) / 90. ); depth = .5 + .5 * depth; nDotVP = max( 0., dot( vNormal, normalize( vec3( lightPosition ) ) ) ); } uniform sampler2D hatch1; uniform sampler2D hatch2; uniform sampler2D hatch3; uniform sampler2D hatch4; uniform sampler2D hatch5; uniform sampler2D hatch6; uniform sampler2D paper; uniform vec2 resolution; uniform vec2 bkgResolution; uniform vec3 lightPosition; vec3 color = vec3( 1., 0., 1. ); vec3 lightColor = vec3( 1. ); varying vec2 vUv; varying vec3 vNormal; varying float depth; varying vec3 vPosition; varying float nDotVP; varying vec3 pos; uniform float ambientWeight; uniform float diffuseWeight; uniform float rimWeight; uniform float specularWeight; uniform float shininess; uniform int invertRim; uniform int solidRender; uniform float showOutline; uniform vec4 inkColor; vec4 shade() { float diffuse = nDotVP; float specular = 0.; float ambient = 1.; vec3 n = normalize( vNormal ); vec3 r = -reflect(lightPosition, n); r = normalize®; vec3 v = -vPosition.xyz; v = normalize(v); float nDotHV = max( 0., dot( r, v ) ); if( nDotVP != 0. ) specular = pow ( nDotHV, shininess ); float rim = max( 0., abs( dot( n, normalize( -vPosition.xyz ) ) ) ); if( invertRim == 1 ) rim = 1. - rim; float shading = ambientWeight * ambient + diffuseWeight * diffuse + rimWeight * rim + specularWeight * specular; if( solidRender == 1 ) return vec4( shading ); vec4 c; float step = 1. / 6.; if( shading <= step ){ c = mix( texture2D( hatch6, vUv ), texture2D( hatch5, vUv ), 6. * shading ); } if( shading > step && shading <= 2. * step ){ c = mix( texture2D( hatch5, vUv ), texture2D( hatch4, vUv) , 6. * ( shading - step ) ); } if( shading > 2. * step && shading <= 3. * step ){ c = mix( texture2D( hatch4, vUv ), texture2D( hatch3, vUv ), 6. * ( shading - 2. * step ) ); } if( shading > 3. * step && shading <= 4. * step ){ c = mix( texture2D( hatch3, vUv ), texture2D( hatch2, vUv ), 6. * ( shading - 3. * step ) ); } if( shading > 4. * step && shading <= 5. * step ){ c = mix( texture2D( hatch2, vUv ), texture2D( hatch1, vUv ), 6. * ( shading - 4. * step ) ); } if( shading > 5. * step ){ c = mix( texture2D( hatch1, vUv ), vec4( 1. ), 6. * ( shading - 5. * step ) ); } vec4 src = mix( mix( inkColor, vec4( 1. ), c.r ), c, .5 ); //c = 1. - ( 1. - src ) * ( 1. - dst ); //c = vec4( min( src.r, dst.r ), min( src.g, dst.g ), min( src.b, dst.b ), 1. ); //c = vec4( gl_FragCoord.x / resolution.x, gl_FragCoord.y / resolution.y, 0., 1. ); return src; } void main() { vec2 nUV = vec2( mod( gl_FragCoord.x, bkgResolution.x ) / bkgResolution.x, mod( gl_FragCoord.y, bkgResolution.y ) / bkgResolution.y ); vec4 dst = vec4( texture2D( paper, nUV ).rgb, 1. ); vec4 src; //if( showOutline == 1 ) src = .5 * inkColor; //else src = shade(); src = ( .5 * inkColor ) * vec4( showOutline ) + vec4( 1. - showOutline ) * shade(); vec4 c = src * dst; gl_FragColor = vec4( c.rgb, 1. ); } Quote Link to comment Share on other sites More sharing options...
iiceman Posted August 11, 2015 Share Posted August 11, 2015 Show us if you got it working in BJS, okay? I think that's a pretty cool effect adam 1 Quote Link to comment Share on other sites More sharing options...
hw3web Posted August 11, 2015 Author Share Posted August 11, 2015 In the end of the week I will focus on it then I will add here. Vousk-prod. and GameMonetize 2 Quote Link to comment Share on other sites More sharing options...
The Snow Irbix Posted August 11, 2015 Share Posted August 11, 2015 it sounds pretty cool ! Quote Link to comment Share on other sites More sharing options...
hw3web Posted September 6, 2015 Author Share Posted September 6, 2015 Hi there , sorry , that it took me longer but I was busy with other JS project , back to Shaders I used Cell shading http://www.babylonjs.com/cyos/#1MF6TE#7 now need to be more random and artistic , like drawing , different sketch lines as that look bit to mathematical any idea from people that are masters in Shadres please ))) maybe with alpha will be great The Snow Irbix and jerome 2 Quote Link to comment Share on other sites More sharing options...
hw3web Posted September 6, 2015 Author Share Posted September 6, 2015 another attempt :http://www.babylonjs.com/cyos/#1MF6TE#12 Quote Link to comment Share on other sites More sharing options...
hw3web Posted September 6, 2015 Author Share Posted September 6, 2015 Hi guys , I need pick your brains ) to all that that how to work with shaders . to get:We need to add this settings/////////any one is happy to share his/her wisdom ???? 1 part easy - use cell shadeing ,2 part will be noise ( any easy to make noise in shaders ??? )3 part will be there as in last example I share so now we need add this noise and pack around vUV nicely , anyone happy to contribute ? Quote Link to comment Share on other sites More sharing options...
hw3web Posted September 8, 2015 Author Share Posted September 8, 2015 OK, I think that final version that I could do, need focus now on the other part of my projects. Please let me know if it look like sketch as looking on this for hours I not sure any more texture as well converted to pencil lines. http://www.babylonjs.com/cyos/#1AM0VJ#3 Quote Link to comment Share on other sites More sharing options...
hw3web Posted September 8, 2015 Author Share Posted September 8, 2015 next step will be random size of lines ( pixels line ) ? anyone idea ? and outline directly in shaders Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.