junbeile

赞

12

|

搜索文章

赞了这篇文章

1年前

如何实现一个Canvas渲染引擎(三)：碰撞检测(射线法和像素标记法)

假设我们现在在canvas上画了很多个节点(DisplayObject)，这些节点形成了一套层级关系，我们将鼠标移动到canvas元素上并点击了一下左键，这个时候，如何判断...

44

14

赞了这篇文章

1年前

如何实现一个Canvas渲染引擎(四)：事件系统

原生的canvas并没有提供事件系统，而事件系统又是一个canvas渲染引擎必不可少的一个模块，它实在是太重要了，想象一下，我们在画布上创建了一堆节点，然后我们点击了画布，...

69

8

赞了这篇文章

1年前

如何实现一个Canvas渲染引擎(五)：webGL渲染(Part 1)

在2011年左右，webGL登陆了浏览器，在这之前，我们已经可以用canvas来构建高性能(相较于DOM)的web端应用了，虽然canvas相对于DOM比较底层一些，但是c...

14

1

赞了这篇文章

1年前

如何实现一个Canvas渲染引擎(六)：webGL渲染(Part 2)

webGL支持的最复杂的图形就是三角形了，对于任何我们想要绘制的图形，我们都需要将其转化成三角形(三角剖分)......本文的内容则是讲述如何将这些数据送入GPU，让GPU...

14

评论

赞了这篇文章

1年前

如何实现一个Canvas渲染引擎(七)：webGPU渲染

谷歌于2023年4月份在chrome113上发布了webGPU，它的前景是非常优秀的，甚至可以说是web端渲染的未来，很多基于webGL的引擎已经开始支持webGPU了，如...

22

1

赞了这篇文章

1年前

如何实现一个Canvas渲染引擎(八)：图片处理

如果你在使用一个Canvas渲染引擎，那么你一定会使用图片作为画布上的元素，因为很多复杂的图形，是很难通过Graphics类来手动构建的，所以图片处理是一个Canvas渲染...

18

评论

关注了标签

关注了

关注了

赞了这篇文章

3年前

Cesium帧渲染中疑惑

cesium渲染是通过帧后台不停渲染方式，主要是实现方式是startRenderLoop来处理，调用requestAnimationFrame方法，因为是脱离window，...

3

2

3年前

OpenGL 工作原理

OpenGL 工作原理 OpenGL 图形接口的设计 The Design of the OpenG...

0

评论

3年前

光栅化全面解析

光栅化全面解析 0 两种方法图形学中渲染过程基本上可以分解为两个主要任务：可见性和着色。光栅化可以...

1

评论

赞了这篇文章

全栈工程师 @某创业公司

·

6年前

为什么说ES6的class是语法糖?

0. 前言 1. 基于Prototype的OOP 这是我们使用原型的一个很简单的例子，Person具有名字和性别，Man是一个性别为男的Person，Jy是一个Man。我们...

44

6

赞了这篇文章

公众号|秋风的笔记 @zerolty

·

4年前

2021前端学习路径书单—自我成长之路

正式学习前端大概 3 年多了，接触前端大概 4 年了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然...

891

72

赞了这篇文章

公众号|秋风的笔记 @zerolty

·

4年前

Chrome 89 更新事件触发顺序，导致99%的文章都错了（包括MDN）

在 Chrome 89.0.4363.0 以及之后版本中,目标元素的触发事件顺序不再按照注册顺序触发! 而是按照先捕获再冒泡的形式依次执行！...

58

26

赞了这篇文章

web前端 @众安保险

·

6年前

实战篇 - 如何实现和淘宝移动端一样的模块化加载（task-silce）

很明显，我们的对于用户的响应速度和界面渲染速度，提升了 50% 左右。该工具已经在 npm 发了包，也在 git 提交了项目，有兴趣的可以去看看，顺便点个 star ，谢...

698

114

赞了这篇文章

前端 @上海

·

6年前

浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]

很多人都知道要减少浏览器的重排和重绘，但对其中的具体原理以及如何具体操作并不是很了解，当突然提起这个话题的时候，还是会一脸懵逼。希望大家可以耐着性子阅读本文，仔细琢磨，彻底...

411

42

关注了

关注了

关注了

个人成就

文章被点赞 1

文章被阅读 268

加入于

2018-11-11