Paper Shaders

[hw3web]

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

[hw3web]

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. );

            }

 

[iiceman]

Show us if you got it working in BJS, okay? I think that's a pretty cool effect

[hw3web]

In the end of the week I will focus on it then I will add here.

[The Snow Irbix]

it sounds pretty cool !

[hw3web]

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

[hw3web]

another attempt :

http://www.babylonjs.com/cyos/#1MF6TE#12

[hw3web]

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 ?

[hw3web]

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

[hw3web]

next step will be random size of lines ( pixels line ) ? anyone idea ?

and outline directly in shaders