![](https://img-blog.csdnimg.cn/8b4d57bca39f48afa2b19c356181da91.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
webgl
文章平均质量分 97
webgl相关内容
南木元元
一位前端小菜鸟,梦想是成为全干工程师,欢迎大家交流,一起进步(互关私信)
展开
-
快速上手WebGL,代码+图解手把手教你使用WebGL一步步实现热力图
使用webgl绘制热力图。webgl中有顶点着色器和片元着色器,一个用于计算顶点位置,一个用于计算颜色值,所以,关键就是把数据传个这两个着色器。片元着色器,首先设置了float为中等精度,然后通过v_Color接收来自顶点着色器的颜色并将其设置给内置变量gl_FragColor,其中通过内置变量gl_FragColor来确定顶点像素颜色。缓冲是程序发送给GPU的数据,attribute用来从缓冲中获取所需数据,并将它提供给顶点着色器。原创 2023-05-04 15:02:01 · 1216 阅读 · 17 评论 -
WebGL简介
大家好,我是南木元元,热衷分享有趣实用的文章。HTML的元素为JavaScript提供了动态创建图形的API。第一种是Canvas,一般只能做2d操作,用canvas.getContext(“2d”)来建立一个CanvasRenderingContext2D二维渲染上下文。第二种是WebGL,通过canvas.getContext(‘webgl’)就能获取WebGL的3d上下文,进行3D的渲染。这两种都是常用的可视化方式,本文主要来介绍一下WebGL的使用。原创 2022-03-24 20:17:57 · 7958 阅读 · 11 评论