![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webgl
玛卡瑞那
这个作者很懒,什么都没留下…
展开
-
从零开始构建自己的WebGL3D引擎—材质篇
引言:第二篇本来想讲讲摄影机的内容,但是还是想从渲染开始讲起。因为我们希望引擎更专注于渲染,等渲染结束我们再去慢慢的写摄影机和一些数学运算吧。该篇主要思考基础材质类如何封装以及shader如何处理和优化、shader编译、uniform上传的细节和更好的实现1.要设计一个好的材质,我们先想想别的引擎是如何设计的,有什么好的地方、有什么不足的地方Three.js使用方法(目前先拿自定义的s...原创 2020-03-16 22:04:33 · 1247 阅读 · 1 评论 -
从零开始构建自己的WebGL3D引擎---思考与设计
test原创 2020-03-03 16:02:34 · 6127 阅读 · 5 评论 -
用three.js实现炫酷的城市扫光效果
最近由于工作需要实现一些比较炫酷的3d城市扫光效果,现在分享给大家思路和方法先看效果图具体怎么实现的那?首先像扫光这种效果是3D比较基本的效果,我们可以使用后处理、模版、材质三种方式来实现,鉴于后处理和模版这两块用three.js构建起来如果大家不熟悉会非常困难(但是维护起来确非常简单,如果实现了MRT,用后处理的方式性能也是最好的),因此本篇主要讲述如何用材质的方式来实现扫光效果。用材质实...原创 2020-02-08 20:07:09 · 13288 阅读 · 23 评论 -
three.js性能研究——第一篇
现在开源的webgl引擎中,three.js是功能最丰富的,而且社区活跃,使用简单,但是它的性能确实不太理想。本系列就和大家一一探究three.js的性能到底如何,原因是什么,以及有什么改进方案。首先我们模拟一个理论上性能最好的使用场景,scene下创建10000个sphere,每个sphere大概1000个顶点(测试显卡为mac Radeon Pro 555X 4 GB,相当于GTX1050左...原创 2019-12-15 21:45:29 · 3164 阅读 · 0 评论 -
用three.js构建自己的后处理渲染器第三篇---架构设计
上一篇主要讨论性能问题,这一篇我们开始设计后处理渲染器架构effectComposer ---(默认生成 sourceTarget(原场景), readBuffer(后续每一个pass的最终结果),writeBuffer(负责与readBuffer进行交换)) ---renderPass (负责渲染一遍原场景,最终渲染到sourceTarget) ---pass1 (针对物体的后处理...原创 2019-11-30 22:50:37 · 1623 阅读 · 1 评论 -
用three.js构建自己的后处理渲染器第一篇---抗锯齿的选择
说到渲染引擎就不得不提到延迟渲染,基本上一个引擎如果没有实现延迟渲染就不能说是一个好的渲染引擎,不过可惜的是three.js并没有实现延迟渲染(ps:呼吁作者赶紧实现mrt吧)。由于没有mrt和延迟渲染,本来不打算写后处理的,但是即使没有,我们也希望能实现一些炫酷的效果,那就在现在已有的基础上对three.js进行简单的改造来实现一套高性能的后处理渲染器吧。要实现后处理我们首先要考虑需求,是否要...原创 2019-11-30 12:22:10 · 4898 阅读 · 17 评论 -
用three.js构建自己的后处理渲染器第二篇---性能好要解决的问题
上一篇我们讲了抗锯齿的选择,这一篇我们讲一下常用的后处理功能的实现思路,如果想了解抗锯齿https://blog.csdn.net/zhgu1992/article/details/103322528首先看一下three.js自己实现的EffectComposer,它主要是创建了两个renderTarget,一个readBuffer一个writeBuffer,而three.js默认的后期则用的有...原创 2019-11-30 15:20:53 · 3395 阅读 · 2 评论 -
使用three.js渲染瓦片地球-第一篇
近期有个需求是想使用自己的3d引擎去渲染地球逻辑,如果从头实现一遍会比较耗费时间,而且后续还要实现倾斜摄影等等,所以打算使用cesium来帮我们做调度然后用自己的3d引擎渲染。原创 2019-07-16 23:12:52 · 8189 阅读 · 14 评论