摘要: 基本三角形构建矩形 们知道,一个矩形其实可以由两个共线的三角形组成,即 V0, V1, V2, V3,其中 V0 → V1 → V2 代表三角形A,V0 → V2 → V3代表三角形B。 默认情况下,WebGL 会认为顶点顺序为逆时针时代表正面,反之则是背面,区分正面、背面的目的在于,如果开启了背面 阅读全文
posted @ 2022-02-07 10:58 自在一方 阅读(200) 评论(0) 推荐(0) 编辑
摘要: 三角形图元的分类 WebGL 的基本图元包含点、线段、三角形,而三角形又分为三类 基本三角形 三角带 三角扇 #####基本三角形(TRIANGLES) 三角带(TRIANGLE_STRIP) 三角扇(TRIANGLE_FAN) 绘制三角形的步骤 但是图形是有多个点组成,那么就应该考虑如何绘制多个点 阅读全文
posted @ 2022-01-19 09:03 自在一方 阅读(396) 评论(0) 推荐(0) 编辑
摘要: WebGL 应用包含两个要素:JavaScript程序和着色器程序。本节我们通过绘制一个点来演示这个过程,麻雀虽小,但五脏俱全。使用 WebGL 绘制一个点虽然简单,但是它仍需要 JavaScript 程序和着色器程序共同完成。 我们的目标是绘制一个在屏幕中心,大小为 10,颜色是红色的点。 1、准 阅读全文
posted @ 2022-01-11 15:44 自在一方 阅读(314) 评论(0) 推荐(0) 编辑
摘要: 专业术语介绍 图元:WebGL 能够绘制的基本图形元素,包含三种:点、线段、三角形。 WebGL绘图API: 它只能会点、线、三角形?一定是我看错了。你没看错,就算是这样一个复杂的模型,也是一个个三角形画出来的。 片元:可以理解为像素,像素着色阶段是在片元着色器中。通过图元装配生成的多边形,计算像素 阅读全文
posted @ 2021-12-29 08:55 自在一方 阅读(239) 评论(0) 推荐(0) 编辑
摘要: WebGL 产生的背景和历史 在学习 WebGL 之前,我们先简单了解一下 WebGL 产生的背景。WebGL 规范产生以前,浏览器如果想实现 3D 动画效果,只能借助一些浏览器插件,比如 Adobe 的 Flash、微软的 SilverLight 等来实现,那么,为了打破这一局限,各大知名公司联手 阅读全文
posted @ 2021-12-24 15:32 自在一方 阅读(1108) 评论(0) 推荐(0) 编辑
摘要: 上一节我们已经实现了diff和比较两个vnode之后手动更新视图,这一节我们除了要给数据进行proxy劫持之外,还要给数据添加watcher,监听数据改变时更新视图。下面是响应式原理的图解: ;(function () { function defineReactive (obj, key, val 阅读全文
posted @ 2021-12-21 09:18 自在一方 阅读(39) 评论(0) 推荐(0) 编辑
摘要: 在上一节中我们已经将代码整理了一下,这一节我们要做的是比较新旧dom,然后通过diff算法判断虚拟dom时候有变化,是否需要刷新视图。为了让代码更加清晰,我们这边还是做了简化,假设父节点下只有一个元素。并且手动调用更新方法,暂时不做数据双向绑定更新视图。 理解patch函数 不管是第一次挂载到视图还 阅读全文
posted @ 2021-12-20 09:48 自在一方 阅读(51) 评论(0) 推荐(0) 编辑
摘要: 前面我们已经实现了虚拟dom转变为真实dom,并且挂载到页面的逻辑了,其实已经很接近vue源码的思想了,但是我们还是稍微调整一下代码,让我们调用的时候更加像vue。现在我们要声明一个vue函数,做以下几件事: 声明一个Vue函数,让我们可以new调用这个函数 获取传入的options参数 初始化数据 阅读全文
posted @ 2021-12-17 11:02 自在一方 阅读(107) 评论(0) 推荐(0) 编辑
摘要: 其实看了很多的vue源码,很多的东西只是脑子会了,能说就是写不出来。vue的源码有很多的边界判断的代码,纯粹的核心原理代码其实并不多,刚好看到一个比较好的vue2源码精简版,自己手动跟着敲一敲,作为记录,希望自己对源码的理解更深一点。Talk is cheap,Show me the code,让我 阅读全文
posted @ 2021-12-14 15:59 自在一方 阅读(90) 评论(0) 推荐(0) 编辑
摘要: 什么是职责链模式 职责链模式的定义是:使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止。职责链模式的名字非常形象,一系列可能会处理请求的对象被连接成一条链,请求在这些对象之间依次传递,直到遇到一个可以处理它 阅读全文
posted @ 2021-12-09 10:33 自在一方 阅读(60) 评论(0) 推荐(0) 编辑