threejs-卡通轮廓效果(threejs模型轮廓发光)

在我的 3D 游戏和设计中,我经常选择可爱的低多边形卡通风格。我一直想给我的模型一个真正的卡通轮廓,所以这就是我们今天要做的工作。在以后的文章中,我们将着眼于为三角形着色以使其看起来也很卡通。

本文是「我正在进行的中等难度 ThreeJS 教程系列」的一部分。我一直想要在介绍“如何绘制立方体”和“让我们用疯狂的着色器填充屏幕”关卡之间找到一些东西。所以就在这里。

如果你在网上搜索“OpenGL 轮廓效果”,你会遇到很多相互矛盾的信息。经过大量研究,我确定有两种常用方法可以使用现代 3D 图形 API 创建轮廓。

  1. 绘制一个对象两次;一次是轮廓颜色,一次是正常。
  2. 通过在像素级别检测边缘的后处理效果运行整个场景。

第二种选择是当今 Unity 等现代游戏引擎中最常用的。但是我不想使用它,因为它涉及多个后处理步骤,这在移动 GPU 上可能很慢并且消耗更多内存。此外,后处理和 WebVR 目前还没有很好地融合,所以我暂时避免使用它。(当我介绍发光效果时,我们会重新讨论这个)。让我们关注第一种方法,两次绘制同一个对象。

两次渲染一个对象可能看起来很浪费,但请记住,大多数 GPU 都是带宽有限的。一旦你把几何图形传到 GPU 上,它就可以一遍又一遍地渲染同样的东西,几乎没有成本。在大多数情况下,我想概述的东西是静态几何。

让我们从两次渲染圆环结开始,一次是黑色,一次是黄色。完成这项工作的这个技巧是缩放轮廓,使其比主要对象略大。

//create a cubeobj = new THREE.Group()const c1 = new THREE.Mesh( new THREE.TorusKnotBufferGeometry(0.6,0.1), new THREE.MeshLambertMaterial({ color:’black’, }))const s = 1.03c1.scale.set(s,s,s)obj.add(c1)obj.add(new THREE.Mesh( new THREE.TorusKnotBufferGeometry(0.6,0.1), new THREE.MeshPhongMaterial({ color:’yellow’, })))

运行它,看看会发生什么。唔。根据您使用的几何形状,您将看到全黑或双色调、部分黑色和部分黄色的东西。还注意到一些从黄色中突出的黑色三角形吗?这就是所谓的z战斗。那么问题是什么。

threejs-卡通轮廓效果(threejs模型轮廓发光)

实际上,这有点道理。黑结略微扩大,因此在看不到黄色的地方,黑夜就在它的前面。那么我们该如何解决呢?

15 秒内解释剔除

我们将利用一个小技巧。

当 GPU 渲染三角形时,它通常只渲染正面的三角形。这些是面向相机的三角形。根据定义,任何背对相机的三角形都是不可见的,因此无需费心绘制它们。如果我们有一个球体,那么实际上只会绘制前半球。GPU 已「剔除」构成背面半球的三角形。

对于轮廓效果,我们希望仅使用正面几何图形绘制常规对象。这已经在发生。但是,对于轮廓,我们只希望绘制背面的三角形。然后它们将位于规则形状的后面,仅在边缘可见。

碰巧的是,ThreeJS 已经知道如何绘制正面和背面。我们只需要告诉它我们想要什么。下面的代码和上面一样,只是side正确设置了两种材质的属性。

obj = new THREE.Group()const c1 = new THREE.Mesh( new THREE.TorusKnotBufferGeometry(0.6,0.1), new THREE.MeshLambertMaterial({ color:’black’, side: THREE.BackSide }))const s = 1.03c1.scale.set(s,s,s)obj.add(c1)obj.add(new THREE.Mesh( new THREE.TorusKnotBufferGeometry(0.6,0.1), new THREE.MeshPhongMaterial({ color:’yellow’, side: THREE.FrontSide })))

现在看起来像这样:

threejs-卡通轮廓效果(threejs模型轮廓发光)

image.png

完美的!

修复法线

实际上不,它不是很完美。如果你仔细观察,你会发现物体背面的轮廓比正面的轮廓要细。那是因为我们只是在放大整个对象。这种幼稚的方法只适用于像球体这样的完美凸面物体。对于结或任何真实模型,我们需要正确地加厚几何图形。

碰巧大多数几何图形上已经有法线。这些法线垂直于几何体的表面。如果我们在法线方向上扩展点,那么一切都应该正常工作。我们可以通过稍微修改的顶点着色器来做到这一点。有关自定义顶点着色器的说明,请参阅其他文章。

//create a cubeconst mat = new THREE.MeshLambertMaterial({ color:’black’, side:THREE.BackSide })mat.onBeforeCompile = (shader) => { const token = ‘#include <begin_vertex>’ const customTransform = ` vec3 transformed = position objectNormal*0.02; ` shader.vertexShader = shader.vertexShader.replace(token,customTransform)}

上面的代码为轮廓对象创建了一个自定义材质。其余与之前相同。在着色器内部,它objectNormal向每个顶点的位置添加一小部分,将其向外扩展。将 更改0.02为更大的值以获得更粗的轮廓。

现在看起来像这样:

threejs-卡通轮廓效果(threejs模型轮廓发光)

image.png

壮丽的。您已经创建了一个类似于卡通的轮廓。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年5月14日 上午8:30
下一篇 2024年5月14日 上午8:42

相关推荐

  • 微信运动怎样退出纽崔莱邀请

    微信运动怎样退出纽崔莱邀请 最近,我收到了微信运动邀请,让我参加纽崔莱的跑步活动。然而,我不想参加这个活动,所以我想要退出邀请。但是,在微信运动中退出邀请并不容易。现在我来告诉你怎…

    联系我们 2024年12月4日
    0
  • 图书馆一般采用什么空调系统

    图书馆一般采用什么空调系统 图书馆是一个知识的传播者和学习者的场所,它的重要性不言而喻。然而,随着现代生活节奏的加快,图书馆的舒适度也越来越受到关注。因此,图书馆的空调系统也是一个…

    联系我们 2024年12月3日
    0
  • 山东人才集团宋建伟

    山东人才集团宋建伟:为山东人才发展注入新动力 山东人才集团宋建伟是一位有着多年人力资源经验和专业知识的专业人士。他毕业于北京大学,并获得了人力资源管理硕士学位,曾在多个知名企业工作…

    联系我们 2024年12月4日
    1
  • 丹凤法院探索推行“党建+审判执行”模式,让司法服务“飞入寻常百姓家”

    2022年,丹凤法院在加强自身建设的基础上,积极探索推行党建和审判执行融合发展的工作模式,做到党建引领、提质增效,以推进法院党组织自身建设高质量发展。 丹凤法院结合政法队伍教育整顿…

    联系我们 2023年5月31日
    258
  • 科研思维的主要特性有那些?在解决问题时是如何工作的?

    科研思维的主要特性包括: 1. 系统性:科研思维要求研究者对问题进行系统性的思考,从多个角度分析问题,并从多个方面寻求解决方案。 2. 创新性:科研思维要求研究者具备创新性,能够提…

    联系我们 2024年12月7日
    1
  • 低代码平台二次开发工具的用户到底是谁?(低代码开发平台介绍)

    所谓低代码开发平台,是指无需编码或者仅需少量编码即可快速生成应用程序的开发平台。这里的应用在目前的语境下一般是指企业应用,如OA、ERP、CRM、HRM、SCM等。此类平台的特点在…

    联系我们 2024年5月14日
    120
  • 学生参与国际科研项目

    学生参与国际科研项目的重要性 学生参与国际科研项目是提高学术水平,扩展人际关系,锻炼领导能力,增强国际视野的重要途径。随着全球化的不断深入,国际科研项目已成为许多高校学生走向国际市…

    联系我们 2024年12月3日
    0
  • 上外松外 金晓燕校长

    金晓燕校长在以上外松外学校的领导地位已经持续了很长时间。她是一位非常有远见和领导才能的女性,她对学校的发展做出了巨大的贡献。 金晓燕校长非常注重学校的教学质量,她一直致力于提高学校…

    联系我们 2024年12月1日
    3
  • 信息系统项目管理软件

    信息系统项目管理软件 信息系统项目管理软件是一种用于管理信息系统项目的软件工具,能够帮助项目经理和项目团队成员更好地规划和执行项目,提高项目的效率和质量。 信息系统项目管理软件通常…

    联系我们 2024年9月18日
    32
  • 开票软件3.0官方下载安装

    开票软件3.0官方下载安装 在当今数字化的时代,开票软件已经成为了企业运营中不可或缺的一部分。随着开票软件3.0的官方下载安装,我们可以更加轻松地使用开票软件,并提高企业的财务管理…

    联系我们 2024年12月4日
    0