对于一次直播分享的文字版记录 (建议看视频), 视频云盘链接 全篇主要分为几个方向进行了介绍:Computer Graphics相关WebGL相关Threejs相关Q&A 暂不记录注意下述内容与直播内容可能稍微存在差异。Computer Graphics - 计算机图形学相关什么是图形学? 如何学习计算机图形学?计算机图形学就是研究如何在计算机中表示图形、以...

以下分析均采用 Sigmajs 框架源码进行分析,有兴趣的同学可以去查看一下。 本文主要介绍下Canvas的事件机制，和一些设计思路。图形事件,设计思路及实现介绍。图形事件需要支持以下的内容:支持各类事件类型事件触发机制事件冲突问题事件类型mousemousedownmousemovemouseupmouseentermouseleavedblclickcontextmenuclickwh...

渲染机制渲染性能分析非即时渲染 (即时渲染)分片渲染分画布图元拆分渲染渲染机制Canvas绘制机制：整个画布是一个画板,在上面进行绘制各种各样的图形,一旦绘制错误需要改正,就需要重新绘制。 {代码...} 渲染性能分析注意关于图形计算,例如复杂图形推导 不算在渲染性能进行分析。渲染性能主要分析以下几点:渲染图元数量 (...

代码是其次 背后的设计 思路 落地方案才是重中之重； 开始源码分析之前先看看g的技术方案(以及截取一张内部开发人员的自我评价..) [各个渲染模式不同的入口，不同版本的 G 都有 Canvas、Group 和 Shape 的实现，通过统一的 interface 对外提供支持。】

前言《数据结构-使用JS实现四叉树》 上文中简单介绍了四叉树的一些实现和应用场景 本篇文章应评论区各位小伙伴的留言 基于四叉树实现一下2D的碰撞检测。话不多说开始今天的内容。首先看下quadtree测试效果图正文coding部分实现思路数据结构采取四叉树碰撞节点比对进行四叉树查找sample采取canvas2d进行绘制,JavaScript进...

上文介绍了纹理相关的内容,并使用WebGL进行了3d的实现,emm.....本篇文章呢算是一个新方向,也算探索写作的一个思路。(应着群内小伙伴的需求来讲讲框架的日常使用) 当然理论知识肯定是依旧会穿插进来。

上文介绍了纹理相关的内容,并使用WebGL进行了2d的实现,今天延续上节课的内容对于纹理的3D实现 也算是吸取了MDN-Tutorial的模式,感觉这样的学习轨道 也算是初衷(每次长篇大论的讲图形学的理论我怕我和你都坚持不下去)目前来说最好的方式了，对于WebGL的学习还是图形学的学习都能有一个认识。话不多说开始今天的内容(大部...

上文谈到在 纠结 中砥砺前行,写下了第一篇专栏文章对于图形学和可视化的认知篇 实现了一个简单的程序。本来打算后续序列已算法和渲染方向为主.但是综合微信/QQ圈内同学反馈晦涩问题 后续文章更多已结论(小节产生效果)为导向进行展开学习。