Threejs—sketch 素描特效实现
Threejs—sketch 素描特效实现shadertoy里面的效果默认参数下的sketch效果特定参数下的sketch效果核心代码解析fragmentshader核心代码Threejs—sketch 素描特效实现
最近在研究shadertoy上的各种shader特效，并且想把这些特效移植到threejs里面，下面是最近实现的一个简单的素描特效：
shadertoy里面的效果
默认参数下的sketch效果
特定参数下的sketch效果
是不是感觉还行。内心雀跃。
核心代码解析
用的是后处理的自定义shaderpass来处理这个效果
预留了三个参数来控制不同渲染效果，名称是沿用的shadertoy里面的命名
MAGIC_GRAD_THRESH 调整这个参数，灰色的绘制线会更加明显，越小 细线越多MAGIC_SENSITIVITY 加深绘制线，值越小线越深MAGIC_COLOR 更像是一个过滤的颜色，0的时候就是原来的状态，越大，界面越白
// sketch Passconst 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 地址 /view/ldXfRj
BIM树洞
做一个静谧的树洞君
用建筑的语言描述IT事物；
用IT的思维解决建筑问题；
共建BIM桥梁，聚合团队。
本学习分享资料不得用于商业用途，仅做学习交流！！如有侵权立即删除！！
自己搭建的threejs官方资料站点：Threejs站点
