相关疑难解决方法(0)

轮廓对象(正常比例+模板蒙版)three.js

有一段时间,我一直试图弄清楚如何在我的游戏中做一个对象选择大纲.(因此玩家可以在鼠标悬停时看到其他所有对象)

这是结果的样子:

在此输入图像描述

我想使用的解决方案是这样的:

  1. 第1层:在常规着色中绘制模型.
  2. 第2层:绘制红色副本,使用顶点着色器沿法线缩放.
  3. 蒙版:绘制模型的黑/白平面颜色,将其用作第二层的模板蒙版,以隐藏内部并显示第1层.

这就是问题所在.我真的找不到任何有关面具的好学习资料.我可以从轮廓形状中减去内部吗?我究竟做错了什么?

我无法弄清楚如何堆叠我的渲染过程以使蒙版工作.:(

这是一个jsfiddle演示

renderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, renderTargetParameters)

composer    = new THREE.EffectComposer(renderer, renderTarget)
// composer   = new THREE.EffectComposer(renderer)

normal      = new THREE.RenderPass(scene, camera)
outline     = new THREE.RenderPass(outScene, camera)
mask        = new THREE.MaskPass(maskScene, camera)
// mask.inverse = true
clearMask   = new THREE.ClearMaskPass
copyPass    = new THREE.ShaderPass(THREE.CopyShader)
copyPass.renderToScreen = true

composer.addPass(normal)
composer.addPass(outline)
composer.addPass(mask)
composer.addPass(clearMask)
composer.addPass(copyPass)
Run Code Online (Sandbox Code Playgroud)

此外,我不知道是否使用渲染目标或渲染器作为作曲家的来源.:(我应该在作曲家的第一关?我为什么需要复制通过?我知道这么多问题.但是没有足够的资源可以学习,我一直在谷歌上搜索.

谢谢你的建议!

webgl three.js

10
推荐指数
1
解决办法
1万
查看次数

标签 统计

three.js ×1

webgl ×1