基于threejs开发的卡通风格着色器

        作为一个大学一直在玩3D的同学,还是应该多写写关于3D的东西,正好把原来做得着色器整理整理,供大家参考也供自己以后回顾吧~

        一般的现实中的物体讲求一个平滑着色,能够使其看起来更加真实,而卡通风格的物体则是让被着色物体显得过渡的不那么好,明暗交界线很明显,这样的风格独树一帜,也运用到了很多卡通风格的游戏当中,我在网上看到的卡通风格着色器基于Unity开发的有很多,这里我来基于threejs实现一下卡通着色器的开发。

                首先是three创建场景的代码摆放摄像机,加上方向光,加载物体的位置,鼠标移动事件,render开始渲染。这些都不是主要的,最重要的是着色器材质的创建,这里传了2个uniform的参数一个是方向光的方向,另一个是颜色值,由于这两个参数都是固定的,所以不用在每一帧进行改变,传一次值即可。

function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
    camera.position.z = 20;

    // scene

    scene = new THREE.Scene();
    

    var directionalLight = new THREE.DirectionalLight( 0xffffff );
    directionalLight.position.set( 1, 1, 1 );
    scene.add( directionalLight );
    var material = new THREE.MeshPhongMaterial( {color: 0x0908EF} );

        //着色器材质
        sm = new THREE.ShaderMaterial(
            {
                uniforms:
                    {
                        light: {type: 'v3', value: directionalLight.position},
                        color: {        // 方块的基础色
                            type: 'v3', // 指定变量类型为三维向量
                            value: new THREE.Color('#1308EF')
                        }
                    },
                vertexShader:   document.getElementById( 'fish-vertexShader'   ).textContent,
                fragmentShader: document.getElementById( 'fish-fragmentShader' ).textContent,
                side: THREE.FrontSide,
                blending: THREE.AdditiveBlending,
                transparent: true
            }   );

    var geometry = new THREE.SphereBufferGeometry( 5, 32, 32 );
    var cube = new THREE.Mesh( geometry, sm );
    scene.add( cube );
    //

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    //

    window.addEventListener( 'resize', onWindowResize, false );

}
        下面是顶点着色器的开发,在顶点着色器中用法向量矩阵乘法向量,并进行规格化从而得出每个顶点法线的方向。这里的normal和normalMatrix都是内建变量,不用传给着色器,当需要用到时直接用就行了,然后用投影矩阵X模型矩阵X点的位置,就得到了该顶点在视口坐标系的位置。(这里不懂的同学可以看看图形学方面的书)。

<script id="fish-vertexShader" type="x-shader/x-vertex">
varying vec3 vNormal;
void main()
{
     vNormal = normalize(normalMatrix * normal);
     gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
</script>
        顶点着色器还是比较简单的,下面就到了重头戏——片元着色器,该功能的实现都是由片元着色器实现的。先介绍原理:片元着色器的功能就是先将光照强度分级,并且将该等级映射到颜色上,然后根据每个片元受到的光照强度给予该片元一个等级的颜色。这样就会人为的制造出着色不平滑的色块效果。diffuse是光强的意思,这里由于我们使用的是方向光,所以直接用方向光乘法线,得到方向光在法线上的投影,这个投影就是光照强度,然后我们将其分为0.8/0.6/0.4/0.2四个等级,根据等级的不同对这四种区域制造出不同的色块,最终实现卡通的效果。

<script id="fish-fragmentShader" type="x-shader/x-vertex">
uniform vec3 light;
varying vec3 vNormal;
uniform vec3 color;
void main()
{
    float diffuse = dot(normalize(light), vNormal);
    if (diffuse > 0.8) {
    diffuse = 1.0;
}
else if (diffuse > 0.5) {
    diffuse = 0.6;
}
else if (diffuse > 0.2) {
    diffuse = 0.4;
}
else {
    diffuse = 0.2;
}
    gl_FragColor = vec4( color* diffuse, 1.0);
}
</script>
下面放效果图(MeshPhongMaterial纹理与卡通纹理):

github地址:https://github.com/StringKun/ThreeJSToonShader

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值