从零开始构建自己的WebGL3D引擎---思考与设计

最新推荐文章于 2024-07-16 12:12:53 发布
最新推荐文章于 2024-07-16 12:12:53 发布
阅读量6.1k 收藏 12
点赞数 3
分类专栏： webgl three.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhgu1992/article/details/104620567
版权
本文作者分享了从零开始构建WebGL3D引擎的思考过程，探讨了现有引擎如Three.js、ClayGL的优缺点，并提出在渲染、矩阵运算等方面的设计改进方案，目标是打造一个更快、更易扩展、支持WebGL2的3D引擎。作者计划使用Webpack、Gulp和ESLint构建工具，采用优化的渲染和矩阵运算设计，以提高性能和灵活性。
摘要由CSDN通过智能技术生成

引言 ：
学习webgl已经接近2年时间了，对常见的开源3D引擎也比较熟悉了，但是目前为止three.js、babyLon、clayGL、cesium对webgl2新特性的支持也不是特别多。从今天开始，准备着手构建自己的3D引擎，一是希望能有自我提升，二是希望能做一个更快速、更炫酷、更容易扩展的引擎，并且希望能对webgl2的新特性有更多的支持。（目前引擎设计主要参考three.js和clayGL、少部分可能会参考babylon、如果后续做地球部分应该会参考cesium，由于对playCanvas使用不多，后续在引擎设计的时候也会着重去看playCanvas的源码并将好的思想融入进来。总而言之，在设计引擎的过程中自己多思考，然后多看这些开源引擎的思路，取其精华）

  1. 首先介绍下几个开源引擎：

Three.js
https://github.com/mrdoob/three.js
最火的web3D引擎，功能最丰富而且最便于使用，笔者对其的研究比较深入，上层的一些设计可能会对其参考较多

ClayGL
https://github.com/pissang/claygl
ClayGL是一个用于构建可扩展Web3D应用程序的WebGL图形库，目前主要应用到echarts中，笔者对其比较熟悉，后续对它的一些分析可能会比较多

Babylon.js
https://github.com/BabylonJS/Babylon.js
一个完整的JavaScript框架，用于构建HTML5，WebGL，WebVR和Web Audio的3D游戏和体验,该引擎主要使用typescript，性能强大，对webgl2支持较多

Cesium.js

最低0.47元/天 解锁文章
玛卡瑞那
关注
专栏目录
从零开始构建自己的WebGL3D引擎—材质篇
zhgu1992的博客
03-16 1268
引言： 第二篇本来想讲讲摄影机的内容，但是还是想从渲染开始讲起。因为我们希望引擎更专注于渲染，等渲染结束我们再去慢慢的写摄影机和一些数学运算吧。 该篇主要思考基础材质类如何封装以及shader如何处理和优化、shader编译、uniform上传的细节和更好的实现 1.要设计一个好的材质，我们先想想别的引擎是如何设计的，有什么好的地方、有什么不足的地方 Three.js 使用方法(目前先拿自定义的s...
G3D是一款基于WebGL的javascript3D绘图引擎
08-10
G3D 是一款基于 WebGL 的 javascript 3D 绘图引擎。与其他的 WebGL 3D 引擎相比，G3D 是更加「纯粹」的渲染引擎，也就是说，它完全不依赖任何 DOM API，而是仅仅依赖一个 canvas 对象（或者类 canvas 对象）
Wonder 1.0 正式版发布，WebGL 3D引擎和编辑器
cpongo5
03-11 286
开发四年只会写业务代码，分布式高并发都不会还做程序员？ >>> 介绍 Wonder1...
图解：OpenGL、web3D、webGL、three.js、Babylon.js的关系
最新发布
2401_82881178的博客
07-16 1763
OpenGL 的全称是“Open Graphics Library”，中文名为“开放图形库”。它是一种跨平台的图形渲染 API（应用程序编程接口），用于创建 2D 和 3D 图形。OpenGL 可以在多种操作系统和硬件平台上运行，包括 Windows、macOS、Linux、Android 和 iOS 等。OpenGL 提供了一系列的函数和命令，用于管理图形渲染流程，包括创建和配置图形环境、定义和绘制图形对象等。因此，它被广泛应用于游戏开发、计算机辅助设计、虚拟现实、科学计算等领域。
【转】多线程游戏引擎设计
weixin_33862188的博客
07-23 120
随着多核CPU的普及，多线程设计对3D引擎已经变得越来越重要，很难想象一两年后推出的3D引擎还在使用单线程方式。但是多线程的引入使引擎变得更加复杂，不良的设计带来的性能提升非常有限，甚至在单核环境下还会出现明显的性能下降。所以找到一种清晰、简洁、高效的设计方式就变得至关重要。目前多线程3D引擎设计的资料还很少，多数只讨论一些原则性的概念，缺少具体实例的分析。 本文提出一种具体的3D引...
从零开始手撸WebGL3D引擎2：WebGL和3D编程基础概念
聚焦游戏和图形引擎开发技术
01-09 3249
我们在第一篇里面浏览了一下WebGL的参考卡片，也列出了一些WebGL的功能点，但是对于没有接触过3D编程的人来说，这些东西很难理解并形成一个统一的认识。所以这篇我就以WebGL为参考平台谈谈3D编程的一些基础概念。 3D坐标系变换 正常来说，人们学习新东西都会从已有的知识出发，对于3D编程，在屏幕上画出3D图形，如果有2D图形API使用的基础，就会想着从2D编程的经验出发。比如对于2D编程，都是...
剖析虚幻渲染体系（15）- XR专题
虚幻私塾
06-09 2981
目录* 15.1 本篇概述 + 15.1.1 本篇内容 + 15.1.2 XR概念 - 15.1.2.1 VR - 15.1.2.2 AR - 15.1.2.3 MR - 15.1.2.4 XR + 15.1.3 XR综述 + 15.1.4 XR生态 + 15.1.5 XR应用虚拟现实（VR）因伊万·萨瑟兰（Ivan Sutherland）在20世纪60年代的工作而广受赞誉。在过去的50年里，虚拟现实技术的普及程度上下波动。特别是，近年来，虚拟现实在虚拟现实及其对应产品增强现实（AR）方面的投资吸引了许多科
前端技术浪潮与应用
LittleRoundFace的博客
11-28 2247
2020年前端技术浪潮与应用 文章目录2020年前端技术浪潮与应用一、前端基建01.前端可视化01-1.页面可视化搭建①页面可视化背景-前端行业提效分析②业界-前端行业提效轮子：[前端可视化搭建工具业界的轮子](https://juejin.im/post/6858881797490098190)③背景-提效轮子总结归纳④智能化相关行业提效分析⑤举例可视化搭建其中的一个例子来看前端可视化——imgcookimgcook介绍-产品大图imgcook介绍-产品大图核心技术难点-智能识别表达拆解核心技术难点-智能
迈向三维：vue3+Cesium.js三维WebGIS项目实战
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
02-21 4086
WebGIS（Web地理信息系统）是指利用 Web 技术来构建和展示地理信息系统（GIS），使用户可以通过 Web 浏览器访问、查询、分析和可视化地理空间数据。WebGIS 通常结合地图服务、地理信息数据库、前端地图库和相关的数据处理技术，为用户提供交互式的地图浏览和空间数据分析功能。**JS一看名称即知道是为前端服务的JS框架，即装即用，学习新的技术最重要的是去原文档，api使用介绍。快去看下Cesium中文文档吧。
webgl开源三维引擎的选择
热门推荐
木头杭的学习博客
03-08 3万+
webgl发展的很快，可谓日新月异，所以下面的这些引擎过一个月，半年可能就不是现在这样了，对应的连接地址以方便查看比较。 一。小场景的开源三维js引擎 1.babylonjs:http://www.babylonjs.com/（当前在用） 优点：有微软背景，有不少的demo，有供测试的平台，有提供3dsmax转换模型的插件， 缺点：中文资料很少，没有系统的中文教程，如从入门到精通都可以
3DWebEngine:3D WebGL游戏引擎（JavaScript）
05-14
3DWebEngine 正在进行中，但您可以使用它。 3D WebGL游戏引擎（JavaScript）。 您可以在“测试”文件夹中查看其工作方式（也许我会做一个教程部分） 图书馆 WebGL-Obj-Loader： : 例子 Github 3DWebEngine： ://matrax.github.io/3DWebEngine/Test/ Aim-Upgrade： ://aim-upgrade.top/
webgl-engine
03-19
webgl-engine
基于WebGL的游戏引擎PlayCanvas.zip
07-18
一般来讲，游戏开发与web应用完全是两码事。但先试试，游戏世界的很多工具都可以被用于在网站中增加华丽界面。PlayCanvas就是一个基于WebGL的游戏引擎，结合了物理、光影、音效等工具用于创建一个复杂的界面。 示例代码： // Create a PlayCanvas application var canvas = document.getElementById("application-canvas"); var app = new pc.fw.Application(canvas, {}); app.start(); // Fill the available space at full resolution app.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW); app.setCanvasResolution(pc.fw.ResolutionMode.AUTO); // Create box entity var cube = new pc.fw.Entity(); app.context.systems.model.addComponent(cube, {     type: "box" }); // Create camera entity var camera = new pc.fw.Entity(); app.context.systems.camera.addComponent(camera, {     clearColor: new pc.Color(0.1, 0.1, 0.1) }); // Create directional light entity var light = new pc.fw.Entity(); app.context.systems.light.addComponent(light); // Add to hierarchy app.context.root.addChild(cube); app.context.root.addChild(camera); app.context.root.addChild(light); // Set up initial positions and orientations camera.setPosition(0, 0, 3); light.setEulerAngles(45, 0, 0); // Register an update event app.on("update", function (deltaTime) {     cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime); }); 标签：PlayCanvas
WWEngine:基于 html5 webgl 的 3D 动画引擎
06-04
ww.js Studio：工作室类，主要负责Camera，Light和Background对象的创建并保有对它们的引用。其中Camera类用于控制摄像机，Light用于设定并且控制光源，Background用于设置背景（它又包括了对地面和空中背景的设定），这三个对象是构建整个场景的基础。其他所有实体对象都派生于Object类，这些对象也都被包含在Studio中。 Actor与Actors：Actor是演员类，用于抽象那些能够“主动”运动的对象或者能够实现动画的模型（比如骨骼模型）。它的子类涵盖了日常生活中的可以自主运动的对象，包括Human，Animal和Auto(指机械)。这些子类将不同模型中的动作抽象成统一接口，如人类，鸟类和犬科动物都可以实现“移动”这个概念，但他们的动作是完全不同的，Human，Animal和Auto(指机械)就是将常见的对象的运动归纳为统一的概念，方便Proces
3D游戏引擎渲染内核架构及其技术
04-10
随着显卡性能和速度的不断提高，网络游戏在中国的发展 如火如荼。&/ 游戏因其逼真、虚幻的场景画面和人物造型，以 及灯光照明效果和爆炸烟火等特效，已取代了 !/ 游戏的地 位，成为市场上的主流。从内部技术的角度讲，这主要归功于 &/ 图形渲染器（嵌在客户端）。即如果一款网络游戏没有一 个高效的&/ 图形渲染器，那么它很难吸引玩家的目光。渲染 器是&/ 游戏引擎中最重要的部分之一。
Wonder 1.0正式版发布-----WebGL 3D引擎和编辑器
weixin_34296641的博客
03-11 257
介绍 我们很荣幸地向大家发布Wonder 1.0正式版！免费、开源，不用注册，直接打开在线编辑器即可使用！ Wonder是web端3D开发的解决方案，包括引擎、编辑器，致力于打造开放、分享、互助的生态。 您可以在制作第一个项目中学习如何开始。 Wonder功能上与Unity3D类似，但比起Unity3D我们有很多优势。 我们使用Reason语言和函数式编程范式来开发。 详见Wonder介绍。 ...
WebGL的引擎
WebGL专栏
05-11 3400
<br />WebGL的框架 WebGL http://www.khronos.org/webgl/wiki/Main_Page http://www.khronos.org C3DL ，一个JavaScript库，将使它更容易编写应用程序使用Canvas的三维立体（现在的WebGL） http://www.c3dl.org/ Copperlicht http://www.ambiera.com/copperlicht/ EnergizeGL 使用语言的灵感来自 加工 和类似
基于Web的3D游戏引擎
刘跃飞的专栏
06-30 1506
<br />我最感兴趣的Silverlight，和我的惊讶，我碰到一个在CodePlex上的3D游戏引擎，它是基于silveright，这是（一个由开源社区微软）在http://www.codeplex.com/Balder/ 。 <br />不过这个游戏引擎还亟待优化，在线演示的时候，cpu占到50%以上，只是个简单的演示都这么占资源，看来也只是个参考，不能拿来直接使用的。<br />然而，我发现了一个在线视频混合http://visitmix.com/blogs/OpenSpace/A-Silverli
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值