小编Esk*_*kel的帖子

轮廓对象(正常比例+模板蒙版)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万
查看次数

如何检查模态是否打开

我在堆栈树中有一个模态组件。有没有办法检查模态当前是否打开?

我正在使用 react-native-navigation 版本 2.18.5

react-native-navigation

6
推荐指数
0
解决办法
607
查看次数

蒙皮网格着色器的均匀顶点位移(动画轮廓,Three.js)

我想我已经解决了Three.js中网格渲染边框/轮廓的实现,这是许多游戏用于突出显示对象/角色的技术.

例如,暗黑破坏神1和3
暗黑破坏神3

以下是我的解决方案的详细信息演示.

现在还有待完成的是动画网格(用于角色等).问题是,蒙皮网格使用顶点着色器进行动画处理,我还使用着色器沿着法线缩放(移位)网格.这可能是非常简单但不幸的是我的数学技能几乎不存在.


问题

因此,为了使网格物体在着色器中按比例放大并设置动画,以下是我认为需要合并的两个方程式:

从蒙皮着色器:

mvPosition = modelViewMatrix * skinned
gl_Position = projectionMatrix * mvPosition
Run Code Online (Sandbox Code Playgroud)

从置换着色器:

mvPosition = modelViewMatrix * vec4( position + normal * offset, 1.0 )
gl_Position = projectionMatrix * mvPosition
Run Code Online (Sandbox Code Playgroud)


演示

更新(使用GoodGuy的等式):这是关于jsfiddle(javascript)的完整代码和演示.
在这里你可以找到着色器代码本身(glsl).

内部图是常规的蒙皮动画,轮廓是新的等式,它还不太合适.

opengl-es glsl webgl three.js

5
推荐指数
1
解决办法
2059
查看次数

是否可以反向播放皮肤动画?[三.js]

我将如何向后播放动画?

我试过给动画处理程序负增量,但这只会阻止它。从动画的 this.currentTime 中减去增量也不起作用。

有任何想法吗?

three.js

5
推荐指数
1
解决办法
1922
查看次数