WebGL（Web Graphics Library）是一种 JavaScript API，用于在任何兼容的 Web 浏览器中呈现交互式 3D 和 2D 图形，不需要插件，即专门处理计算或处理3D图像的JS API。
1.每个材质/纹理的渲染一定是会产生DrawCall的，这个DrawCall只能通过打包图集来进行优化。
大家好，转眼距离上一篇公测版本发布的帖子已经过去两个月，Cocos Creator 3D 终于要正式面向所有开发者开放了！如果你已经迫不及待想要尝试，请直接拉到文章末尾，你会找到所有你需要的内容。
将 Project 文件窗口 中的 Assets 资源进行打包 , 就会得到一个 资源包 Unity Package , 后缀为 " .unitypackage " ; 一般用于 将自己的 材质 , 纹理贴图 , 模型 , 场景 , C# 脚本 等资源进行打包 , 共享给别人 ;
draw call是openGL的描绘次数（directX没怎么研究，但原理应该差不多） 一个简单的openGL的绘图次序是：设置颜色→绘图方式→顶点座标→绘制→结束。 每帧都会重复以上的步骤。这就是一次draw call
AssetBundle(简称AB包)是一个资源压缩包，可以包含模型、贴图、音频、预制体等。如在网络游戏中需要在运行时加载资源，而AssetBundle可以将资源构建成 AssetBundle 文件。
YooAsset.Editor.ShaderVariantCollector.Run
Project窗口下的Assets文件夹下，就是用来存放资源的，为了方便，会使用文件夹的方式来对资源进行管理。但是也有一些特殊文件夹
本文基于 Unity 游戏开发引擎，主要会讲两部分内容：第一部分简单讲讲游戏开发的原理，第二部分会聊聊 Unity 的 C# 游戏脚本。
在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。
随着人们对用户体验越来越重视，Web开发已经不满足于2D效果的实现，而把目标放到了更加炫酷的3D效果上。Three.js是用于实现web端3D效果的JS库，它的出现让3D应用开发更简单，本文将通过Three.js的介绍及示例带我们走进3D的奇妙世界。
之前说过网格（Mesh） = 几何体（Geometry） + 材质（Material），也就是一个物体是有它的形状和材质来决定。几何体（Geometry）类似于前端的HTML而材质（Material）类似于前端的CSS，今天我们看一下材质相关的内容。
Three.js是一个流行的JavaScript库，用于在浏览器中创建和显示3D图形。它基于WebGL，一个浏览器支持的3D图形API，使得开发者能够在网页上创建复杂的3D场景和交互体验。
之前总是想当然的认为，将N个纹理打包成一个图集，那么这个图集只会产生一个DrawCall，如果不打就产生N个DrawCall，后来才发现这并不是决定DrawCall的唯一因素，它还和层级关系有关······
关于使用工具切图的方法不再讲述,请看上面的链接文章,里面就有就有第一种方法,通过天空盒子制作.虽然是基于HTC,但是对于CardBoard同样适用.
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。
Live2D，即为2D绘图渲染技术，游戏中例如崩坏3，碧蓝航线中与老婆交互就利用了live2d，通过前端的渲染，拼接，移动即可做出类似3d的效果，但是始终还是有缺陷，例如无法实现3d的转身，跳跃。
1.新建一个文件夹，命名为threejs_demo,在该文件夹下新建一个lib文件夹，将前面下载的threejs源码中的build文件夹中的three.module.js文件拷贝到lib文件夹下 2.用vscode打开新建的文件夹，在根目录下新建一个index.html文件和一个index.js文件 3.在index.html中引入threejs，方式如下：
以上demo总结来说，使用了 Three.js 库创建了一个简单的绿色立方体模型，并实现了旋转动画效果。 总结一下它的步骤：
很多网友反应“这也太可爱了吧”，连摩纳哥亲王也想带回去两个给自己的龙凤胎，请求工作人员再为自己制作一个冰墩墩，不然回去也就“不好交代”了。
场景（Scene）相当于是一个容器，可以在它上面添加光线，物体等，最后Three.js把它和相机一起渲染到DOM中。
在Three.js中，一个可见的物体是由几何体和材料构成的。在这个教程中，我们将学习如何从头开始创建新的网格几何体，研究Three.js为处理几何对象和材质所提供的相关支持。
如果你使用的是Vue + threejs或React + threejs技术栈，那么threejs就是一个js库，直接通过npm命令行安装就行。
作为整天和 UI 打交道的前端工程师，是否想在他（她）生日的时候用代码送上一份惊喜呢？
Three.js 是一个功能强大的 JavaScript 库，用于在 Web 浏览器中创建和显示动画 3D 图形。它的丰富 API 和模块化设计使得开发者可以轻松构建复杂的 3D 场景和动画效果。本文将详细介绍 Three.js 中的一些重要组件和模块，包括场景、相机、几何体、材质、光源、渲染器和控制器等。
我也是个初学者，大家就当这是我的笔记看，如果理解不正确请大家指正。首先推荐大家一个学习网站Tress.js中文网。 首先我们需要先引入tree.js
得益于“元宇宙”概念在前段时间的爆火，各家公司都推出了使用 3D 场景的活动或频道。
最近冬奥会吉祥物冰墩墩真是火出天际，各地冬奥纪念品商店里的冰墩墩都被抢购一空，更有很多没有抢到冰墩墩的朋友们开始呼吁摇号购买或者按一户一墩来计划购买。
Quixel Bridge mac版是一款纹理材质贴图扫描软件，可以配合虚幻引擎4打造真实的森林场景，还提供庞大的在线贴图材质数据库，全都是通过真实世界的扫描获得，支持浏览，批量下载并批量导出Megascans资产到Unreal Engine 4，Unity，Marmoset Toolbag 3，3ds Max和maya。
LayaAir引擎版本号小数点后的第一位代表着大版本，其后是小版本。每一个大版本都代表着，引擎有着阶梯式的前进变化。时隔一个多月，2.4.0大版本的出炉又有着怎样的变化呢。
在Three.js中，三维空间指的是具有三个独立轴的空间，通常称为X、Y和Z轴。这种空间用于描述和定位3D对象的位置、旋转和缩放。
经过前面几个章节的介绍，我们对Threejs已经有了一个相对深入的了解，下面我们通过Threejs来做一个旋转的地球效果。 1.首先在电脑上创建一个earth文件夹，在earth文件夹中创建images文件夹用于存放图片文件；创建一个js文件夹用于存放JavaScript代码；创建一个css文件用于存放css样式表文件； 2.拷贝资源，将Threejs源码中的three.module.js拷贝到js文件夹，将地图的贴图文件拷贝到images文件夹 3.用vscode打开earth文件夹，在根目录下新建index.html文件，在index.html中引入three.module.js，在index.html中创建一个id为webgl的div
现在什么都是3D，看电影3D，打游戏3D，估计3D打车，很快就会面世。那么作为前端开发的标准语言，JS和3D能不能也搞出点大新闻呢？刚好最近在做一个活动时，就遇到了需要播放3D全景视频的需求，顺便就研
前面一节我们初步了解了BufferGeometry，它可以自定义任何几何形状，它的数据存储在BufferAttribute中。我们也使用BufferGeometry创建了一个自定义的mesh物体，但是，如果你跟着步骤创建了这个物体，用鼠标反转你会发现，这个物体只有一个面可以看到，反转后是看不到任何物体的，这是因为在Threejs中，空间中一个三角形是有正反两面的，在Three.js中规则你的眼睛(相机)对着三角形的一个面，如果三个顶点的顺序是逆时针方向，该面视为正面，如果三个顶点的顺序是顺时针方向，该面视为反面。 我们可以在创建材质的时候配置side属性来设置物体的正反面是否可见。 1. 三角面的正反面 Three.js的材质默认正面可见，反面不可见。
睁开您的眼睛，看看你的周围，它是一个多么美妙的3D世界啊。3D世界由什么组成，除了上帝，还有谁能够回答呢？
在 three.js 里以向右的方向为 x 轴，向上的方向为 y 轴，向前的方向为 z 轴：
CocosCreator 的节点上的颜色属性对 3D 模型是不起作用的，要想修改模型颜色就要对材质操作，而材质是基于 effect 渲染的。那么怎么改变模型颜色呢？
官方文档中的新手示例过于简单，所以本节对Three.js中的概念进行一些补充描述：
前言 设计师需求中3D视觉平移到互动H5中的项目越来越多，three.js和PBR工作流的结合却一直没有被系统化地整理。 和各位前端神仙一起做项目，也一起磕磕碰碰出了爱与痛的领悟。小小总结，希望3D去往H5的道路天堑变通途。 本手册主要分为两大部分： Part 1 理论篇：主要让设计师了解计算机到底是如何理解和实时渲染我们设计的3D项目，以及three.js材质和预期材质的对应关系。 Part 2 实践篇：基于three.js的实现性，提供场景、材质贴图的制作思路、以及gltf工作流，并动态讨论项目常
Shader（着色器）实际上就是一小段程序，它负责将输入的Mesh（网格）以指定的方式和输入的贴图或者颜色等组合作用，然后输出。绘图单元可以依据这个输出来将图像绘制到屏幕上。输入的贴图或者颜色等，加上对应的Shader，以及对Shader的特定的参数设置，将这些内容（Shader及输入参数）打包存储在一起，得到的就是一个Material（材质）。之后，我们便可以将材质赋予合适的renderer（渲染器）来进行渲染（输出）了。 所以说Shader并没有什么特别神奇的，它只是一段规定好输入（颜色，贴图等）和输出（渲染器能够读懂的点和颜色的对应关系）的程序。而Shader开发者要做的就是根据输入，进行计算变换，产生输出而已。
《ShaderHelper组件速递》一篇我们介绍了ShaderHelper组件的使用，以及如何定义一个shader程序并添加到ShaderHelper组件的program枚举属性中，这里我们再简单回顾下shader模板对象定义：
一、创建离线场景 📷 1、创建新项目，导入mirror,创建场景重命名为OfflineScenes 2、从Prefabs文件夹中，将预制体LevelArt拖拽到场景中，LevelArt有光源，删除场景中自带的光源 4、从models文件夹中，将Tank拖拽到场景中，调试好合适的位置，也可以拖拽其他的模型布置场景 5、创建canvas，修改UI Scale Mode选项为：scale with screen size,下面的尺寸根据自己的需求更改，我打包出来的是4：3的界面，创建输入框--输入姓名，3个滑杆
让我们一起面对它，在游戏发开中我们都遇到过这些问题。我们将试着分析新的图形,图像压缩,新代码，这有用吗？这反而会浪费我们大量时间和成本。最终，我们尝试用一些奇葩的解决方案或者直接放弃。
大家好，又见面了，我是你们的朋友全栈君。 Unity开发使用什么语言?要掌握什么呢?不管是开发的哪个行业都是要先从语言开始学习起的，要学会unity的话肯定是要先知道它的开发语言是哪些的，所以今天这篇
由于Three.js官网位于国外，访问速度较慢，因此，为了方便开发者经常参考文档和示例，我们可以考虑将Three.js官网部署到本地。这样，可以在本地快速访问文档和示例，提高工作效率。
随着前两天冬奥会序幕的正式拉开，也成功带火了本次吉祥物冰墩墩。憨厚可爱的熊猫形象，让冰墩墩的实体公仔、钥匙扣都被一抢而空，众多网友呼吁现在真的是「一墩难求」！
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。
马三在公司大部分时间做的都是游戏业务逻辑和编辑器工具等相关工作，因此对Unity AssetBundle这块的知识点并不是很熟悉，自己也是有打算想了解并熟悉一下AssetBundle，掌握一下Unity资源管理方面的知识，因此有了这篇博客。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
