Threejs—sketch 素描特效实现

Threejs—sketch 素描特效实现

最近在研究shadertoy上的各种shader特效，并且想把这些特效移植到threejs里面，下面是最近实现的一个简单的素描特效：

shadertoy里面的效果

默认参数下的sketch效果

特定参数下的sketch效果

是不是感觉还行。内心雀跃。

核心代码解析

用的是后处理的自定义shaderpass来处理这个效果
预留了三个参数来控制不同渲染效果，名称是沿用的shadertoy里面的命名

• MAGIC_GRAD_THRESH 调整这个参数，灰色的绘制线会更加明显，越小 细线越多
• MAGIC_SENSITIVITY 加深绘制线，值越小线越深
• MAGIC_COLOR 更像是一个过滤的颜色，0的时候就是原来的状态，越大，界面越白

// sketch Pass
const SketchShader = {
    uniforms:
    {
        tDiffuse: { type:'t', value: null },
        iResolution: { type:'v2', value: new THREE.Vector2(sizes.width, sizes.height) },
        MAGIC_GRAD_THRESH:{ type:'f', value: 0.01 }, // gradient threshold 梯度阈值
        MAGIC_SENSITIVITY:{ type:'f', value: 10. }, // Sensitivity 敏感度
        MAGIC_COLOR:{ type:'f', value: 0.5 }, // color threshold 颜色阈值
    },
    vertexShader: sketchVS,
    fragmentShader: sketchFS
}
const SketchPass = new ShaderPass(SketchShader)
effectComposer.addPass(SketchPass)

fragmentshader核心代码

获取图片的像素值
其中tDiffuse是上一个rendertarget的对象，后面这个uv是纹素的坐标

vec4 getCol(vec2 pos)
{
    vec2 uv = pos / iResolution.xy;
    return texture(tDiffuse, uv);
}

还有一个困扰了很久的点是，刚开始绘制的线比较灰，这里调整了透明度就好多了，像素描的效果了

fragColor = vign * mix(vec4(0., 0., 0., 1), background, weight);

代码已经上传Github，git地址
如果对你有帮助，希望可以给我一个star，谢谢~

参考的shadertoy 地址 https://www.shadertoy.com/view/ldXfRj

---

BIM树洞

做一个静谧的树洞君

用建筑的语言描述IT事物；

用IT的思维解决建筑问题；

共建BIM桥梁，聚合团队。

本学习分享资料不得用于商业用途，仅做学习交流！！如有侵权立即删除！！

---

• 自己搭建的threejs官方资料站点：Threejs站点