随笔分类 - WebGL/Canvas

[WebGL] sampler2DArray demo 多纹理渲染

摘要：背景之前尝试过利用多个纹理单元，再基于传入给 shader 的 vertexBuffer 信息决定选 1 号纹理单元还是 2 号纹理单元。虽然理论上，这个方式确实行得通，但是一次 drawcall 绘制多个纹理，本来目的是为了提高绘制性能，而实际上却无法提高性能，甚至还有反作用。因为有说法是阅读全文

posted @ 2023-10-24 11:52 拂晓风起-Kenko 阅读(446) 评论(0) 推荐(0) 编辑

iOS 14 egret H5游戏卡顿问题分析和部分解决办法

摘要：现象总体而言，iOS 14 渲染性能变差，可以从以下几个测试看出。测试1：简单demo，使用egret引擎显示3000个图（都是同一个100*100 png 纹理），逐帧做旋转。（博客园视频播放可能有问题，视频地址：https://github.com/kenkozheng/kenkozheng 阅读全文

posted @ 2020-10-28 20:00 拂晓风起-Kenko 阅读(2168) 评论(0) 推荐(0) 编辑

【WebGL】一次drawcall中绘制多个不同纹理的图形

摘要：Demo： http://kenkozheng.github.io/WebGL/multi-texture-in-one-drawcall/index.html 关键点： 1、fragment shader接受参数（从vertex shader传递vary），动态指定sampler 2、设置samp 阅读全文

posted @ 2020-07-24 18:16 拂晓风起-Kenko 阅读(844) 评论(0) 推荐(0) 编辑

HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画

摘要：Spine做骨骼动画是比较流行的，使用起来可能相对复杂，但功能毕竟强大，所以市场占有率较大。在unity、cocos2d、starling中使用spine已经很成熟了，而HTML5这一块可能刚刚起步，暂时spine对这一块也没有做得非常完善。整理了一下，找了一些比较好的方法，分享一下。 crea 阅读全文

posted @ 2016-01-27 17:10 拂晓风起-Kenko 阅读(13842) 评论(0) 推荐(1) 编辑

Canvas动画位图缓存提高效率和对应的内存问题

摘要：对一个矢量图动画，开启位图缓存能大大提高运行效率。所谓开启位图缓存，其实要自己动手，先创建一个临时canvas，然后把矢量图绘制到这个canvas上，到了实际绘制时，直接把这个临时canvas拷贝到真正canvas上。而位图拷贝的速度是非常快的，比重新绘制矢量图要快很多。三部曲：1、建立临时canv... 阅读全文

posted @ 2015-07-06 14:48 拂晓风起-Kenko 阅读(6050) 评论(2) 推荐(0) 编辑

关于0xFFFFFFFF和alpha，温故而知新

摘要：做图像处理都好多年了，今天随手做个小画板的时候，发现一个挺有趣的小坑。而其实这个小坑，以前也坑过自己，不过太久没处理了，又踩到坑里了。先来看看：0xFFFFFFFF>>24这个结果是什么呢？是不是妥妥的，0x000000FF？也就是要拿到的alpha？实际不然，而且这个也并不是什么bug，或者编译器... 阅读全文

posted @ 2015-05-30 11:14 拂晓风起-Kenko 阅读(1659) 评论(0) 推荐(0) 编辑

【HTML5 Canvas】计算元件/显示对象经过Matrix变换后在上级/舞台上的bounds（边界矩形rect）

摘要：如上图所示，这样的一个简单矩形，边界矩形是(x:-28, y:-35, width:152, height:128)，这是在这个元件/显示对象自己的坐标空间的范围。那么把这个放到父元件（舞台）中，再做一定变换。如下图所示，白色区域就是舞台，蓝色矩形中的白色十字架标记，就是世界坐标的（0，0）点。蓝色... 阅读全文

posted @ 2015-04-21 17:45 拂晓风起-Kenko 阅读(1672) 评论(0) 推荐(0) 编辑

HTML5动画软件工具编辑器 HTML5动画分类工具推荐

摘要：接下来介绍几款制作HTML5动画的工具，它们可以分为几类：1、导出canvas动画：FlashCC(13.1)、Animation、Radi2、导出DIV+CSS3动画：HTML5Maker、EdgeAnimation、TumultHype、Nodefire3、导出SVG动画：Hippo基本上所有工... 阅读全文

posted @ 2014-05-30 14:37 拂晓风起-Kenko 阅读(10051) 评论(2) 推荐(1) 编辑

HTML动画分类 HTML5动画 SVG库 SVG工具 Canvas动画工具

摘要：1、js配合传统css属性控制，可以使用setTimeout或者高级的requestAnimationFrame2、css33、svg4、canvas（当然，这个还是要配合js）也许这么分类是不对的，因为无论如何都需要脚本控制，那么也许应该分为1、js+传统css2、css33、js+svg4、js... 阅读全文

posted @ 2014-05-15 09:22 拂晓风起-Kenko 阅读(9997) 评论(4) 推荐(0) 编辑