渲染引擎 浏览器渲染引擎,负责解析 HTML, CSS,javascript的DOM部分,如桌面浏览器一般手机端也有4个比较重要的渲染引擎 Gecko,Trident,WebKit,Blink . 黑莓,NetFront,Uc还有其他一些浏览器开发并使用过它们自己的专属渲染引擎.但这些渲染引擎在渲染javascript的时候性能就显得非常的逊色. 大部分浏览器厂商都选择了使用Webkit. 那么没有使用Webkit的浏览器有哪些呢? 1.IE Moblie -----Trident 2.Oper…

全局光照(Global Illumination,简称 GI), 作为图形学中比较酷的概念之一,是指既考虑场景中来自光源的直接光照,又考虑经过场景中其他物体反射后的间接光照的一种渲染技术. 大家常听到的光线追踪,路径追踪等同样很酷的概念,都是全局光照中人气较高的算法流派. 而这篇文章将围绕全局光照技术,介绍的要点有: 全局光照的基本概念 全局光照的算法主要流派 全局光照技术进化编年史 光线追踪 Ray Tracing 路径追踪 Path Tracing 光线追踪.路径追踪.光线投射的区别 环境光…

大家好,本文介绍了开发3D引擎需要的预备知识,给出了相关的资源. 上一篇博文 从0开发3D引擎(一):开篇 了解Web 3D Web 3D的历史 目前Web 3D是基于WebGL这个Web端3D API的,它的版本历史为: (图来自于WebGPU 开发状态与计划) (注:OpenGL是桌面端的3D API,OpenGL ES是移动端的3D API) 2007年,发布OpenGL ES 2.0 OpenGL ES 2.0引入了可编程着色器,增加了顶点着色器和片段着色器. 2011年,基于OpenG…

介绍 大家好,欢迎你踏上3D编程之旅- 本系列的素材来自我们的产品:Wonder-WebGL 3D引擎和编辑器 的整个开发过程,探讨了在从0开始构建3D引擎和编辑器的过程中,每一个重要的功能点.设计方案的思考.讨论.总结和延伸. 本系列避免陷入细节的实现代码,使用伪代码代替.所以没有可直接运行的代码,取而代之的是经过抽象和提炼的伪代码/模式. 为什么要写这个系列 我有三个小目标: 1.完全创造 完全从0开始,创造一个有深度.有难度.有挑战的产品. 所以Wonder被创造出来了,并且会持续地发展.…

大家好,本文介绍了Wonder的高层需求和本系列对应的具体功能点. 确定Wonder高层需求 业务目标 Wonder是web端3D开发的解决方案,包括引擎.编辑器,致力于打造开放.分享.互助的生态. 范围 引擎 Wonder.js WebGL 3D引擎 编辑器 Wonder-Editor 工具 提供给用户使用的各种工具,如gltf转wdb数据在线转换器等. 增值服务 增强用户在Wonder中发布的3D应用的能力,如提供数据统计.支付等. 平台 构建3D生态,提供如托管平台.开发资源商城等,用户可…

介绍 大家好,本系列带你踏上Web 3D编程之旅- 本系列是实战类型,从0开始带领读者写出"良好架构.良好扩展性.最小功能集合(MVP)" 的3D引擎. 本系列的素材来自我们的产品:Wonder-WebGL 3D引擎和编辑器 的整个开发过程. 与我的"用函数式编程,从0开发3D引擎和编辑器"系列博文的区别: 本系列是它的重写版 本系列是实战类型,而它是经验总结类型 本系列只写引擎,而它既写引擎又写编辑器 为什么本系列只写引擎? 因为大部分人更关心引擎 为了加快写作速…

目录 上一篇博文 了解自动化测试 单元测试 集成测试 端对端测试 通过打印日志来调试 了解运行测试 断点调试 通过Spector.js测试WebGL 通过log调试Shader 移动端测试 了解性能测试 测试时间开销 测试内存开销 搭建本地测试环境 大家好,本文介绍了3D引擎的测试方法,搭建了本地的测试环境. 上一篇博文 从0开发3D引擎(三):搭建开发环境 了解自动化测试 对于引擎开发这种复杂.长期的项目,为了减少bug,提升长期的开发效率,自动化测试必不可少.在我们的Wonder.js引擎中…

大家好,现在开始本系列的第三部分,按照以下几个步骤来搭建引擎雏形: 1.分析引擎的需求 2.实现最小的3D程序 3.从中提炼引擎原型 4.一步一步地对引擎进行改进,使其具备良好的架构 5.实现与架构相关的功能,如"多线程渲染"."延迟渲染"等功能 本文进行第一步,分析引擎的需求. 业务目标 1.手把手教读者如何从0开发3D引擎 2.学习函数式编程及其在3D领域的应用 3.学习3D编程中基础的功能实现,如纹理.光照.模型等 4.学习引擎的设计和架构,如Data Ori…

目录 上一篇博文 运行测试截图 需求分析 目标 特性 头脑风暴 确定需求 总体设计 具体实现 新建Engine3D项目 实现上下文 实现_init 实现"获得WebGL上下文" 实现"初始化所有Shader" 实现"初始化场景" 实现"设置清空颜色缓冲时的颜色值" 返回用于主循环的数据 实现_loop 实现"主循环" 实现"clearCanvas" 实现"_render&quo…

目录 上一篇博文 下一篇博文 前置知识 回顾上文 最小3D程序完整代码地址 通用语言 将会在本文解决的不足之处 本文流程 解释本文使用的领域驱动设计的一些概念 本文的领域驱动设计选型 设计 引擎名 识别最小3D程序的顶层包含的用户逻辑和引擎逻辑 根据对最小3D程序的顶层的分析,用伪代码初步设计index.html 识别最小3D程序的初始化包含的用户逻辑和引擎逻辑 识别最小3D程序的主循环包含的用户逻辑和引擎逻辑 根据用户逻辑,给出用例图 设计架构,给出架构视图 分析"基础设施层"的&q…