基于TypeScript + WebGL 游戏引擎 笔记

最新推荐文章于 2025-06-08 09:00:53 发布
最新推荐文章于 2025-06-08 09:00:53 发布
阅读量5.1k 收藏 13
点赞数 3
CC 4.0 BY-SA版权
分类专栏： Node.js&Typescript&H5游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u010019717/article/details/88087254
这篇博客记录了作者使用TypeScript和WebGL开发游戏引擎的学习过程，包括从基础设置、初始化WebGL到Shader、纹理、材质、组件、输入、音频、碰撞检测等各个方面的详细步骤，并提供了一系列的学习资源链接和开源代码仓库。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一直从事Unity游戏开发，其他领域只能业余时间学习一下。 TypeScript 我很喜欢的语言，可以使用它写基于Node的游戏服务器。 在Web前端的火热程度就更不用说了。 WebGL早就不再是游戏开发的专属了，年前看到淘宝工程师的分享《淘宝Web 3D应用与游戏开发》

WebGL 教程：  

《WebGL 1 理论基础  https://webglfundamentals.org/webgl/lessons/zh_cn/》

《WebGL2 理论基础  https://webgl2fundamentals.org/ 》

《Three.js 中文教程   http://techbrood.com/threejs/docs/》

《Fun With WebGL 2.0 

最低0.47元/天 解锁文章

200万优质内容无限畅学
feng3d是使用TypeScript进行编写基于WebGL的3D游戏引擎
08-10
feng3d是使用TypeScript进行编写基于WebGL的3D游戏引擎，致力于打造一个优秀的3d游戏引擎以及易用且可以快速开发项目的配套编辑器。
【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建
weixin_34321977的博客
09-04 282
目前Web实现矢量渲染的主流技术包括SVG、VML和WebGL。相对而言，VML是一种较古老的技术，虽然未成为W3C标准，但被早期的IE浏览器（IE9以下）和微软Office广泛使用，目前已经远离了浏览器战场。所以可供选择的仅剩SVG和WebGL。SVG是XML的一个子集，秉承了一个标签对应一条数据的原则，目前经常被使用于数据量较小的web项目，比如图表和地铁图。Web矢量地图的数据量非常庞大，举...
Puerts在Unity中的技术解析与应用指南
gitblog_01086的博客
06-08 476
Puerts在Unity中的技术解析与应用指南 什么是Puerts Puerts是一个将TypeScript/JavaScript与Unity引擎深度集成的技术解决方案。它允许开发者使用TypeScript作为Unity项目的脚本语言，同时保持与C#原生代码的无缝交互能力。 核心优势 1. 静态类型检查支持 Puerts提供了完整的TypeScript支持，这意味着开发者可以获得静态类型检查带来的...
搭建一个typescript下的webgl写代码环境。
weixin_30885111的博客
03-01 491
一、准备工作安装软件： 1、安装代码编辑器 vscode 官网地址：https://code.visualstudio.com/ 软件下载地址：https://code.visualstudio.com/Download 2、安装nodejs 官网地址：https://nodejs.org 软件下载地址：https://code.visualstudio.com/Downloa...
玩转WebGL(二)TypeScript开发环境搭建
q641187432的专栏
01-21 936
1.安装 安装好NodeJs和VsCode 安装好TypeScript 执行 npm i typescript -g 2.初始化 创建一个项目文件夹,执行命令生成package.json npm init 创建tsconfig.json tsc --init 创建项目子文件夹 src 目录：存放项目ts源码 lib 目录：存放库文件 bin 目录：存放编译后的js 3.初始化 安装vscode插件Debugger for Chrome 在.vscode文件夹下新增launch.json
webgl-3d-renderer:使用typescript实现的webgl 3d模型渲染器
04-16
WebGL 3D重做器 在打字稿中实现的webgl 3d渲染器。 利用Webpack进行部署构建。 开发人员使用情况 克隆或下载仓库 npm安装 npm run dev 部署方式 npm运行构建 未来的核心更新 添加边界框图元以动态设置所有导入模型的初始位置。 添加调试器 未来的UI更新 为UI框架添加Vue.js 为UI组件集成bulma / buefy和顺风。 未来部署更新 Webpack捆绑分析器 CI / CD管道
游戏开发_基于CocosCreator2010引擎_使用TypeScript实现_包含多线程优化_支持WebGL渲染_跨平台发布_细胞自动机模拟系统_生命游戏算法可视化_提供交.zip
最新发布
07-15
本压缩包内容涉及了当前游戏开发的多个关键技术和理念，包括CocosCreator引擎的使用、TypeScript编程语言的实践、多线程优化策略、WebGL技术的应用以及细胞自动机的模拟系统。开发者通过将这些先进技术融合在一起，...
基于egret框架的html5游戏开发笔记.zip
02-13
1. **Egret框架**：Egret是一个开源的JavaScript游戏引擎，基于TypeScript开发。它提供了丰富的API和工具集，支持快速构建高性能的跨平台HTML5游戏。Egret的主要特点包括2D渲染、资源管理、事件系统、动画系统以及对...
优化Three.js性能：提升WebGL渲染效率
weixin_41770018的博客
05-21 788
LOD技术 废话 当渲染顶点信息时，WebGL 将这些顶点信息发送到 GPU 中，并使用着色器程序来处理这些顶点信息并最终将它们渲染到屏幕上。在渲染过程中，GPU 对每个顶点执行各种操作，如变换、光照计算、纹理映射等，然后将结果输出到屏幕上。这就意味着，顶点信息越多对于GPU的压力越大，threejs官网提供# 多细节层次(LOD，Levels of Detail)用于优化这种情形，主要原理是...
cocosCreator笔记
07-18
1. **Cocos Creator简介**：Cocos Creator基于JavaScript，支持WebGL渲染，同时也可导出到iOS、Android等多平台。它的核心是组件系统，通过组合各种组件来构建游戏对象，如精灵、标签、脚本、碰撞器等。 2. **项目...
引擎：基于WebGL和glTF的快速，轻量级JavaScript游戏引擎
02-03
PlayCanvas WebGL游戏引擎 PlayCanvas是一个开源游戏引擎。 它使用HTML5和WebGL在任何移动或桌面浏览器中运行游戏和其他交互式3D内容。 项目展示 已经使用PlayCanvas引擎发布了许多游戏和应用。 这是一个小选择： 您可以在上查看更多游戏。 用户数 领先的公司将PlayCanvas用于视频游戏，广告和可视化，例如： 动漫，手臂，迪士尼，Facebook，IGT，国王，Miniclip，Leapfrog，Mozilla，Nickelodeon，Nordeus，PikPok，PlaySide Studios，Polaris，Product Madness，三星，Snap，Spry Fox，Zeptolab，Zynga 产品特点 PlayCanvas是功能齐全的游戏引擎。 :ice: 图形-基于WebGL 1和2构建的高级2D + 3D图形引擎。 :person_running: 动画-强大的基于状态的动画，用于角色和任意场景属性 :atom_symbol_selector: 物理-与3D刚体物理引擎完全集成 :video_game: 输
webgl-operate:基于TypeScript的WebGL渲染框架
03-18
webgl-operate （或WebGL的 ）是一个基于TypeScript的WebGL呈现框架。 webgl-operate封装了WebGL，并提供了各种渲染功能，例如用于单帧和多帧渲染的通用渲染控制器，光线投射或渐进式路径跟踪，以及多种常见的渲染过程和着色器。与大多数其他渲染引擎相比，既不支持特定的渲染方法/管道或样式，也不假定特定的用例。相反，它以任意渲染实现为基础，并以原子方式简化了常见的渲染过程。它可以用于例如复杂的图表，体积渲染，点云渲染，产品可视化，学习webgl，光线行进或路径跟踪，渲染隐式或过程几何，以及3D模型和复杂场景的现代渲染。 如何安装 webgl-operate可以通过npm用作JavaScript或TypeScript库（包括类型）： npm install --save-dev webgl-operate 或者，可以将webgl-operate作为捆绑
cra-ts-deckgl:具有Create React App和Typescript的Deck.GL
04-16
Deck.GL与使用Typescript创建React App 参考： : 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。
使用者：使用TypeScript在ue4或unity中编写游戏
02-05
什么？ puerts是游戏引擎下​​的TypeScript编程解决方案 提供了一个JavaScript运行时 提供通过TypeScript访问宿主引擎的能力（JavaScript的绑定以及TypeScript声明生成） 为什么？ JavaScript生态有众多的库和工具链，结合专业商业引擎的渲染能力，快速打造游戏 几种游戏领域常用的lua脚本，TypeScript的静态类型检查有助于编写更健壮，可维护性更好的程序 高效：全引擎，全平台支持反射绑定，无需额外（生成代码）步骤即可开发 高级：全引擎，全平台支持静态绑定，兼顾了高级的场景 安装 git clone 拷贝插件到您项目 虚幻引擎 副本
webGL的框架与引擎
前端啤酒屋
10-20 1269
参考：https://zhuanlan.zhihu.com/p/162878354 webGL框架和引擎按照定位可以分成这三种类型： webGL封装：定位是简化WebGL开发。最大的特点是必须自己写GLSL； 渲染引擎：定位是三维物体及场景展示，一般会抽象出场景，相机，灯光等概念。不需要自己写GLSL； 游戏引擎：定位是游戏开发，在前面的渲染引擎的基础上，还提供了骨骼动画，物理引擎，AI,GUI等功能，以及可视化编辑来设计关卡，支撑大型游戏的开发。 webGL封装 twgl.js https://gi.
WebGL2.0从入门到精通-1、前端项目搭建（html+typescript+vite）
碳学长的博客
01-26 1633
webgl2 typescript 入门到精通系列
webgl入门（002）：开源引擎有哪些？ 10种
大剑师兰特的GIS世界
06-13 1745
WebGL开源引擎提供了丰富的工具集，使开发者能够构建复杂的3D图形和游戏，直接在Web浏览器中运行而无需额外的插件。下面列出了一些知名的WebGL开源引擎，包括它们的网址、特点、优势以及典型的应用场景：
W.js ，一个超级小的三维 WebGL 引擎的使用方法
weixin_29212429的博客
05-03 49
我们知道，在网页上搞三维，three.js和babylon.js都是成熟最佳的选择，可是有时候它们体积又显得太大了。我以前有研究过各种网页三维引擎，体积都挺大。我为什么要找体积小的呢？因为我对计算机图形学懂得不多，体积小让我有对它运行方式的探索欲。我曾经找过一个最小的，这个只有不到 10 kb 大小，但感觉有点太底层了。后来我又找到了这个，，它的官网是，这个显然做的用心多了，因为它是为极致小体积的JS游戏提供三维解决方案而设计，所以语法非常精妙，玩了一会儿，感觉很有意思。
尝试搭建webgl游戏引擎-起头
q314235965的专栏
06-28 984
一个简单的，初阶的，外行的webgl游戏引擎开发日志。
ProtoGL：TypeScript下WebGL游戏原型开发引擎
资源摘要信息:"ProtoGL是一个正在开发中的WebGL游戏原型引擎，使用TypeScript编写，旨在提供快速构建和实现WebGL浏览器游戏原型的能力。该引擎基于Entity-Component-System（ECS）体系结构，强调模块化和可扩展性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值