webgl
文章平均质量分 51
很甜的西瓜
技术交流,技术研究。做自己想做的,做好自己想做的.
展开
-
glsl shader中实现canvas中的createRadialGradient效果
在网站找了好久,也没有发现有现成用shader去实现canvas radialGradient效果的.大部分都是简单的只有一个中心圆或者通过canvas绘制渐变再作为纹理图像进行贴图,没有类似像canvas有内圆与外圆,两圆心位置不一样,可以用实现类似焦点视锥效果.然后想到canvas底层用的是skia,就去看了一下skia源码,在skia官网搜索了一篇关于。原创 2024-07-29 17:52:45 · 331 阅读 · 0 评论 -
vscode shadertoy插件,非常方便的glsl着色器编写工具
vscode有一件shadertoy的插件,安装后可以新建一个*.glsl文件,写好代码就可以直接运行看效果了。我试了一下非常方便.如果想要学习shader和一些数学在图形方面的应用我觉得这是一个非常好的插件.很著名的shadertoy网站,集合了非常多大神利用数学写出美妙的shader效果。像shadertoy创始人之一的IQ大神它在之方面有很多的建树。下面写了四个简单示例,水波纹、风景(利用2维值躁声和fmb躁声模拟山和水的流动和天空和云朵) 波纹 雷达。原创 2024-04-02 19:38:39 · 1262 阅读 · 0 评论 -
使用regl测试glsl shader 一些尝试代码
【代码】使用regl测试glsl shader 一些尝试代码。原创 2023-05-22 20:23:35 · 92 阅读 · 0 评论 -
绘制图形的几种方式,性能优化测试
主要测试 canvas和webgl绘制2d平面圆的效率.随机生成20万个均匀分布的圆,圆的颜色和位置随机每个测试100次,取平均值时长下面每种测试数据都是通过不同手段,最终绘制圆:性能测试-每个图创建一个路径,耗时:376豪秒(每个圆创建一条路径,填充颜色)性能测试-颜色分组绘制,并且只创建一个路径,耗时:160豪秒(一条路径只能填充一种颜色,所以要分组)性能测试-createPattern,耗时:450.27豪秒 (比如复杂的图形绘制太麻烦,可以只绘制一遍,通过个来设置)性.原创 2021-09-21 16:02:07 · 981 阅读 · 0 评论 -
基于gl-martix矩阵库和canvas 2d实现3d效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-07-11 20:03:30 · 1399 阅读 · 0 评论