Three.js 实现Shader Threejs

我已经尝试了一段时间，在我的场景中实现一种特定的效果

想要的效果是一个Bokeh，在ThreeJs示例中，有两个版本的Bokeh可用，在尝试了1个Bokeh后，我没有得到想要的效果，因此我切换到第二个，我很难将其应用到场景中，因为我无法理解示例源代码，我不想知道它是怎么工作的

有谁能给我一个好的文档/教程的提示或链接吗

链接

threejs：

threejs Bokeh2样本：

---

我试着解释一下这个例子：[

以下是我得到的：

试验
/////////////
//三维查看器//
/////////////
//如果WebGL可用，是否继续查看三维模型？
if（Detector.webgl）
{
////////////////////
//环境变量//
////////////////////
var场景、摄影机、渲染器、材质和深度；
变量宽度=window.innerWidth；
var HEIGHT=window.innerHeight；
var后处理={enabled:true}；
var shaderSettings={rings:3，samples:4}；
/////////
//别名//
/////////
container=document.createElement（'div'）；
文件.正文.附件（容器）；
init（）；
制作动画（）；
//设置场景。
函数init（）
{
/////////
//场面//
/////////
场景=新的三个。场景（）；
////////////
//渲染器//
////////////
renderer=new THREE.WebGLRenderer（{antialas:true}）；
设置大小（宽度、高度）；
renderer.shadowMapEnabled=true；
renderer.sortObjects=false；
材料深度=新的三个网格深度材料（）；
container.appendChild（renderer.domeElement）；
//////////
//摄像机//
//////////
摄像机=新的三个透视摄像机（60，宽/高，11000）；
摄像机。位置。设置（2，1，2）；
//////////
//灯光//
//////////
//设置场景的背景色。
渲染器.setClearColor（0xCCCC，1）；
//环境的
var环境光=新的三个环境光（0x99999）；
场景。添加（环境光）；
//点
点光源=新的三个点光源（0xffffff，1）；
点光源位置设置（0,0,2）；
场景。添加（点光源）；
/////////////
//天球//
/////////////
var skySphereGeometry=新的三个。SphereGeometry（500,60,40）；
applyMatrix（新的THREE.Matrix4（）.makeScale（-1,1,1））；
var skySphereMaterial=new THREE.MeshBasicMaterial（{map:THREE.ImageUtils.loadTexture（'textures/yourTexture.jpg'））}）；
skySphereMesh=新的三点网格（skySphereGeometry，skySphereMaterial）；
场景。添加（skySphereMesh）；
/////////////
//材料//
/////////////
材质=新的三点网格材质（{color:0xffffff*Math.random（），光泽度：0.5，镜面反射：0xffffff}）；
/////////////////
//调整窗口大小//
/////////////////
addEventListener（'resize'，function（））{
变量宽度=window.innerWidth，
高度=窗内高度；
设置大小（宽度、高度）；
camera.aspect=宽度/高度；
camera.updateProjectMatrix（）；
});
//////////
//装载机//
//////////
var loader=new THREE.JSONLoader（）；
load（“obj/yourObject.json”，函数（几何体）
{
网格=新的三个网格（几何体、材质）；
////////////
//位置//
////////////
mesh.rotation.set（0,10,0，'XYZ'）；
网格。规模。设置（35,32,35）；
/////////////
//细分//
/////////////
var修饰符=新的三个细分修饰符（1）；
修改器。修改（几何体）；
//////////
//影子//
//////////
mesh.castShadow=true；
mesh.receiveShadow=true；
////////////
//添加网格//
////////////
场景。添加（网格）；
//复色试验
//网格。材料。颜色。setHex（0xf2a0dc）；
//网格。材料。环境。setHex（0xf2a0dc）；
});
初始化后处理（）；
renderer.autoClear=false；
///////////
//控制//
///////////
控制装置=新的三个控制装置（摄像机）；
控制。阻尼=5；
控件。minDistance=2；
控件。最大距离=5；
控件。addEventListener（'change'，render）；
}
函数initPostprocessing（）
{
if（后处理。已启用）
{
postprocessing.scene=new THREE.scene（）；
//postprocessing.camera=新的三个正交摄影机（window.innerWidth/-2，window.innerWidth/2，window.innerHeight/2，window.innerHeight/-2，-10000，10000）；
//后处理.camera.position.z=100；
postprocessing.camera=新的3.PerspectiveCamera（60，宽/高，11000）；
后处理.camera.position.set（2,1,2）；
postprocessing.scene.add（postprocessing.camera）；
var pars={minFilter:THREE.LinearFilter，magFilter:THREE.LinearFilter，format:THREE.RGBFormat}；
postprocessing.rtTextureDepth=new THREE.WebGLRenderTarget（window.innerWidth，HEIGHT，pars）；
postprocessing.rtTextureColor=new THREE.WebGLRenderTarget（window.innerWidth，HEIGHT，pars）；
var bokeh_shader=THREE.BokehShader；