【WebGL系列-01】获取WebGL上下文

【【WebGL系列-01】获取WebGL上下文】的更多相关文章

学废了系列 - WebGIS vs WebGL图形编程

目前工作中有不少涉及到地图的项目,我参加了几次技术评审,前端伙伴们在 WebGIS 方面的知识储备稍有不足,这次分享的主要目的是科普一些在前端领域比较常用的 WebGIS 知识.另外,我之前的工作中积攒了一些从零开始搭建 WebGL 地图引擎的微薄经验,虽然最终遗憾没有上线,但在其中学到的一些WebGL知识还是值得分享一下.WebGL 可以说是前端可视化技术领域难度最大的一项图形编程技术,所以今天就结合 WebGIS 这个话题顺带分享一些 WebGL 的相关知识,不会太深入,很细节的技术点在后续…

webgl 系列 —— 绘制猫

其他章节请看: webgl 系列绘制猫上文我们了解了如何绘制渐变彩色三角形,明白了图形装配.光栅化,以及片元着色器计算片元的颜色. 现在如果让你绘制如下一只猫.难道绘制很多三角形,然后指定它们的颜色?那样简直太难.太繁琐了. 这时可以使用三维图形学中的纹理映射技术来解决这个问题. 纹理映射简单来讲就是将一张图映射(贴)到一个几何图形的表面. 例如这样: 本篇最后将实现如下效果: 渐变矩形根据渐变三角形,我们很容易就可以绘制一个渐变矩形.就像这样: 完整代码如下: const VSHADER…

webgl 系列 —— 变换矩阵和动画

其他章节请看: webgl 系列变换矩阵和动画动画就是不停地将某个东西变换(transform).例如将三角形不停地旋转就是一个动画和 CSS transform 类似,变换有三种形式:平移.缩放和旋转. 简单的变换用普通表达式容易实现,如果事情复杂,比如旋转后平移,这时就可以使用变换矩阵. 普通表达式平移比如要平移一个三角形,只需要将三个顶点移动相同的距离即可(这是一个逐顶点操作) 用二维向量表示,就像这样:[x1, y1] + [tx1, ty2] = [x2, y2] 比如要实现…

webgl 系列 —— 渐变三角形

其他章节请看: webgl 系列渐变三角形本文通过一个渐变三角形的示例逐步分析:varying变量.合并缓冲区.图形装配.光栅化.varying 内插绘制三个点v1 需求:绘制三个相同颜色的点,效果如下: 通过三角形的学习,这个需求非常容易实现.代码如下: const VSHADER_SOURCE = ` attribute vec4 a_Position; void main() { gl_Position = a_Position; gl_PointSize = 10.0; } ` c…

webgl 系列 —— 着色器语言

其他章节请看: webgl 系列着色器语言本篇开始学习着色器语言 -- GLSL全称是 Graphics Library Shader Language (图形库着色器语言) GLSL 是一门独立的语言,和其他语言一样有自己的变量.运算符.函数.循环(for).控制语句(if).函数.数组等等. GLSL 比较简单.其专门用于编写着色器,舍弃了许多编程语言中复杂的东西,比如没有字符串,只有数字. Tip: webgl 1.0 绝大多数浏览器都支持,webgl 2.0 支持度差些.webgpu…

WebGL入门教程(二)-webgl绘制三角形

前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用webgl画出一个三角形. 效果图: 在WebGL入门教程(一)-初识webgl中,知道如何绘制一个点 //绘制一个点 gl.drawArrays(gl.POINTS, 0, 1); 但是图形是有多个点组成,那么就应该考虑如何绘制多个点,WebGL提供了一种很方便的机制,缓冲区对象(buffer obje…