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

这是结果的样子:

在此输入图像描述

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

  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)

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

谢谢你的建议!

===============>>#1 票数:16 已采纳

这是一个工作解决方案的小提琴。 别客气。 :)

http://jsfiddle.net/Eskel/g593q/6/

仅使用两个渲染过程更新(归功于WestLangley): http//jsfiddle.net/Eskel/g593q/9/

丢失的部分是这些:

composer.renderTarget1.stencilBuffer = true
composer.renderTarget2.stencilBuffer = true
outline.clear = false

===============>>#2 票数:2

现在我想我从THREEx库中找到了一个更简单的解决方案。 它预先缩放网格,因此您不需要实时着色器。 http://jeromeetienne.github.io/threex.geometricglow/examples/geometricglowmesh.html

  ask by Eskel translate from so

未解决问题?本站智能推荐:

1回复

在视频纹理上带有PNG图像蒙版的Three.js着色器玻璃效果

几天前,我再次访问了网站activetheory.net 。 而且我在Homescreen徽标边框中看到了这种惊人的玻璃效果,并尝试对其进行重新编码。 基于最小化的代码,我能够看到它们使用PNG作为掩码。 我能够在着色器中加载png并将其显示出来,而且很容易获得具有视频纹理功能的网格。
1回复

Three.js使用滑块变量更新多维数据集比例

我已经在一个div中创建了一个jQueryUI滑块,在另一个div中创建了一个HTML页面,并在另一个div中创建了THREE.CubeGeometry(请参阅http://codesigntools.com/sample7 )。 想法是使用由滑块控制的全局变量(slider1val)缩放多维
1回复

THREE.js Skybox无法正常工作

我正在尝试根据《 Up and running》一书制作自己的天文馆版本,尝试制作Skybox时遇到问题。 我正在使用Chrome,并且javascript控制台在定义材料的行中显示了错误“未捕获的TypeError:未定义不是函数”。 我缺少图书馆吗? 还是对three.js进行
1回复

Three.js与模板缓冲区的用法

我无法获得以下将场景绘制为模版蒙版创建的形状的信息。 相反,该代码似乎只是将模板本身渲染为黑色对象。 http://signaturefloors.dev.flooradvisor.com.au/productapp/floor_align.php 我的渲染函数是: 渲染器
1回复

具有Three.js的封闭对象行为异常

通过使用three.js库,我设法将3D对象的遮挡边缘显示为虚线。 我希望其他对象遮挡的边缘具有相同的行为。 通过此处说明的解决方案,它可以正常工作,但在某些奇怪的情况下除外。 这是这种情况的说明(我使用了正交摄影机,因此我们看不到物体彼此之间有多远,因此看不到图片中的文字):
3回复

Three.js对象在大距离闪烁

我目前正在开展一个项目,涉及在大小为10 - 1000000的对象中进行操作。 我一直有一个问题,当我处于这些尺寸的大范围时,物体开始“闪烁”这只发生在物体相交时,然后随着相机离开物体而变得越来越“暴力” 。 我在这里上传了一个问题图片: http : //imgur.com/SOeem
1回复

THREE.js跟踪模型(对象)

我正在使用THREE.OBJLoader()加载.obj文件,并在将其添加到屏幕后推送myobj []数组中的每个对象。 我可以使用以下代码检查是否单击了一个对象: 到现在为止还挺好。 现在我无法弄清楚如何跟踪我的myobjs []数组中的哪个对象是单击还是应该说我如何在myo
4回复

改变Three.js collada对象的纹理和颜色

我最近得到了官方网站与使用我的COLLADA对象(.dae)工作three.js所例如ColladaLoader.js 。 现在我的问题是,如何更改加载的collada对象颜色属性并添加自定义纹理? 我尝试添加纹理没有运气。 这是我的代码(与原始示例略有不同):
1回复

Three.js,WebGL对象位置

我正在使用WebGl Three.js。 谁能告诉我我在做什么错? 我尝试获取定制网格的位置。 无论我尝试哪种方法,每次我得到值(0,0,0)。 没有一种方法对我有用: vector.getPositionFromMatrix(matrix); obj.matrix
1回复

创建稳定的(不移动的)对象-three.js

我正在使用Three.js库构建游戏,并且希望屏幕上有一个固定的小“面板”。 我的意思是,用户将可以在3D环境中导航,但是面板将始终位于屏幕的正上方(就像摄像机的移动不影响它一样)。 这是一个示例 http://icecreamyou.github.io/Nemesis/game.htm