跳至正文

10分钟打通Blender→Cocos!3D游戏建模极简入门(2)

上篇教程讲解了如何用Blender创建一个基础球体模型,导入到Cocos游戏引擎使用。

本文继续从Cocos开发者角度,讲解如何通过Blender创建一个标准材质和增加纹理贴图,并导入到Cocos引擎,以及如何用代码动态改变纹理贴图。

使用环境:Cocos Creator 3.4.2(3.x任意版本均可)+ Blender 4.3.2

一 什么是材质

材质,简单来说,就是物体表面的“外观”或“皮肤”。它决定了物体看起来是什么样子,比如颜色、光滑度、是否反光、有没有纹理(比如木纹、金属光泽)等等。

3D模型必须有材质,否则它只是几何形状的“骨架”,无法呈现颜色、纹理或真实感。可以说,材质是赋予模型生命力的关键。

Blender软件右上角,把视图着色方式切换为“线框”,可以看到球体模型本身只是一组几何形状,如下图所示:

从技术角度看,材质是着色器及其相关数据的集合。

  • 着色器 是程序代码,负责将3D模型的几何数据(如顶点、法线、UV坐标)转换为2D像素的颜色和光照效果。
  • 材质属性 是一系列参数的集合(如基础色、金属度、糙度等),这些参数由着色器读取并用于计算最终效果。

材质还可以包含纹理、法线等贴图,这些贴图通过着色器与材质属性结合,生成更复杂的表面效果。

二 Blender创建材质

2.1 创建材质

  1. 在上篇教程基础上,Blender选中球体,确定右上角视图着色方式为“实体”,然后点击右侧工具条最下面的“材质”图标,此时右侧材质面板是空的,如下图所示:

  2. 再点击右侧的“新建”按钮,Blender将创建一个名为“Material”的默认材质,材质默认使用的着色器称为原理化BSDF原理化BSDF是Blender中的一个通用着色器,支持丰富的参数设置,适用于各种材质表现。如下图所示:

最常用的是基础色、金属度、糙度,含义如下:

  • 基础色:是材质的固有颜色,决定了物体的基本色调。例如,默认的白色为RGB值(255,255,255);(对应Cocos材质中的Albedo属性)
  • 金属度:控制材质是否具有金属光泽。为0时,材质表现为非金属(如塑料、木材),表面反射光线的方式更接近漫反射。为1时,材质表现为金属(如银、铜),表面反射光线的方式更接近镜面反射;(对应Cocos材质中的Metallic属性)
  • 糙度:控制材质表面的光滑程度。数值越小,表面越光滑;数值越大,表面越粗糙。低糙度(接近0)的表面光滑,反光强烈,适合镜面或高光材质(如玻璃、金属)。高糙度(接近1)的表面粗糙,反光较弱,适合哑光或粗糙材质(如砂岩、磨砂玻璃);(对应Cocos材质中的Roughness属性)
  1. 此时球体仍然是白色的,略显简陋,那上个好看的颜色吧。听说宝石绿最近比较火,我们点击“基础色”,在弹出的窗口中输入RGB色值 #38B261FF,按回车键确定。如下图所示:

此时基础色按钮条的颜色已经变成了宝石绿,但左侧场景的球体颜色貌似没变?这是因为我们没有切换场景的视图着色模式,此处先不管。点击材质面板中的预览标签,可以看到球体颜色已经是宝石绿了。如下图所示:

材质中的其它参数暂时保持默认即可。

如果此时想在Cocos中查看效果,按上篇教程所说步骤,Blender导出glb,再导入到cocos编辑器,即可看到一个绿色的球。

2.2 增加纹理贴图

  1. 点击Blender软件上方菜单中的“着色”按钮,会在场景下方打开一个新窗口,如下图所示:

  2. 在下方新窗口中点击鼠标右键,弹出菜单中选择【添加】→【纹理】→【图像纹理】,将创建一个新的“图像纹理”面板,然后把它拖到“原理化BSDF”面板左侧,如下图所示:

  3. 本文为保持简单,将创建一张纯色纹理图片。点击“新建”按钮,在“创建新图像”窗口中输入如下:

    • 名称:red;
    • 宽高:128px;(移动端贴图用128像素即可)
    • 颜色:RGB页签的<红>输入1即可,其它颜色保持0;(代表纯红色)
  4. 然后用鼠标按住“图像纹理”面板右上角的“颜色”黄点,拖到“原理化BSDF”面板的“基础色”黄点,就可以在“材质预览”窗口中看到,新添加纹理已经覆盖材质的基础色,球体变成红色了,如下图所示:

上述面板之间的连线连接不同的点,会有不同的效果,感兴趣的朋友可多尝试。

  1. 此时一个带贴图的材质已经创建完成,然后按上篇教程所说导出步骤,在Blender中把它导出为ball2.glb

三 导入到Cocos

  1. 打开 Cocos Creator,把 ball2.glb 拖入到编辑器的 assets 目录,Cocos会自动把glTF模型转换为游戏引擎所支持的各种资源。ball2.glb转换后的资源如下图所示:

从上图红框中可以看到,从上到下分别包含了预制体、材质、图像(red)、贴图(UnnamedTexture)、网格。

  1. 导入进来的模型材质是只读的,如果想动态改变模型贴图,需要先通过Creator编辑器把材质提取出来,然后改变材质中的 albedoMap 属性即可,示例代码如下:
    resources.load('abc/texture', Texture2D, (tex: Texture2D) => {
         this.meshRenderer.material.setProperty('albedoMap', tex);
    });

四 总结

本文主要内容是说明什么是材质,如何用Blender创建一个标准材质和增加纹理贴图,然后导出到Cocos引擎中使用。

在用Blender创建纹理贴图时,本教程新建了一张红色图片。你也可以打开你已有的任意图片,把它贴到球体上看是什么效果,也许会发现和预期效果不一样,这是因为3D模型贴图涉及到一个“UV展开”的概念。

下篇教程将继续从Cocos开发者角度,讲解如何为3D模型创建一张带图案的纹理贴图。

对3D游戏建模感兴趣的朋友,一起动手试试吧!

五 联系作者

作者的公众号和博客会不定期分享一些游戏开发技巧和上线实战经验,欢迎关注,共同进步!

作者同时创建了一个游戏开发交流群,供朋友们技术交流、学习合作、问题求助等,感兴趣的朋友可以关注我的公众号,并留言加群

往期文章推荐

10分钟打通Blender→Cocos!3D游戏建模极简入门(1)
如何让CocosCreator3.x引擎启动提速60%
《如何让CocosCreator3.x引擎启动提速60%》源码
CocosCreator3.x中动态资源的加载原理和释放方案
一个操作让游戏内存立减50+%-性能优化之压缩纹理
Cocos插件:超强图片压缩(全自动图片压缩神器)
Cocos插件:H5版本分开部署
Cocos插件:将视频渲染到任意多个组件
如何用Cocos Shader实现基础光照

《10分钟打通Blender→Cocos!3D游戏建模极简入门(2)》有2个想法

  1. Pingback: Cocos插件:超强图片压缩的命令行使用教程 – 楚游小栈

  2. Pingback: CocosCreator插件:超强图片压缩 使用技巧 – 楚游小栈

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注