轻量级绘图库NanoVG使用简介
开源项目地址：https://github.com/memononen/nanovg 一 NanoVG NanoVG是一个跨平台、基于OpenGL的矢量图形渲染库。它非常轻量级，用C语言实现，代码不到5000行，非常精简地实现了一套HTML5 Canvas API，做为一个实用而有趣的工具集，用来构… 阅读更多 »轻量级绘图库NanoVG使用简介
图形渲染
随笔：WebGL着色器
使用WebGL的方便之处在于，无需搭建开发环境，只要有一个支持WebGL的浏览器就可以了。 着色器 用WebGL绘图必须使用着色器。分为两种： 顶点着色器 顶点是指二维或三维空间中的一个点，例如二维或三维图形的端点或交点。顶点着色器就是用来描述顶点特性（如：位置、颜色）的程序。 示例如下： void… 阅读更多 »随笔：WebGL着色器
3D游戏引擎笔记
1 数学知识 1.1 坐标系 分为左手坐标系和右手坐标系两种，主要区别在于z轴的指向，z轴指向屏幕内的是左手坐标系，z轴指向屏幕外的右手坐标系。Unity和Direct3D使用的是左手坐标系，OpenGL使用的右手坐标系。 法线和切线 与椭圆有且仅有一个交点的直线，叫做椭圆的切线。二者公共点，叫做切… 阅读更多 »3D游戏引擎笔记
JavaScript实现软件光栅化渲染器02-如何画直线
项目代码：https://github.com/foupwang/JavaScript3DRenderer 开发环境：VSCode+Chrome浏览器 参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe） 前文介绍了画点函数，本文说明如何绘制直… 阅读更多 »JavaScript实现软件光栅化渲染器02-如何画直线
Bresenham快速画直线算法(中文翻译+注释)
原文：https://www.cs.helsinki.fi/group/goa/mallinnus/lines/bresenh.html 基本Bresenham算法 考虑在光栅网格上绘制一条直线，这条直线的斜率是 $0\leq m \leq 1$。 斜率定义：假设直线起点是(x1, y1)，终点是(… 阅读更多 »Bresenham快速画直线算法(中文翻译+注释)
JavaScript实现软件光栅化渲染器01-如何画点
项目代码：https://github.com/foupwang/JavaScript3DRenderer 开发环境：VSCode+Chrome浏览器 参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe） 整个项目跟平台相关的，只需要一个类似D… 阅读更多 »JavaScript实现软件光栅化渲染器01-如何画点
JavaScript实现软件光栅化渲染器-前言
项目代码：https://github.com/foupwang/JavaScript3DRenderer 开发环境：VSCode+Chrome浏览器 参考：《Windows游戏编程大师技巧》(第2版) /《3D游戏编程大师技巧》（André LaMothe） 软件光栅化渲染器，是指用CPU（软件）… 阅读更多 »JavaScript实现软件光栅化渲染器-前言
WebGL编程01
WebGL是什么 WebGL是一项结合了HTML5和JavaScript，用来在网页上绘制和渲染复杂三维图形(3D图形)的技术。WebGL基于OpenGL ES 2.0，也使用GLSL ES编写着色器。 Canvas是什么 HTML5引入标签，定义了网页上的绘图区域，允许JavaScript动态地绘… 阅读更多 »WebGL编程01