CommentCoreLibrary 和 SVG优化计划

之前那个3D球一直卡在<20fps下(目测在200px,40三角x9环的默认配置下仅有10fps不到),还有经常因为帧率不匹配会“闪”。后来发现是Host端的问题,采用了低效率的draw函数,而没有用批量绘制的 drawPath实现,所以修正了一下 基于 SVG 的 drawTriangles,现在已经可以在即使是 200px, 80三角x20环的情况下流畅的播放到近乎20fps。

第二个解决的问题是 clear() 诱发的闪烁问题。这个是因为绘图是非同步的,所以经常会产生出赛跑状况(Race Condition)。比如下面的例子:

沙箱 Sandbox        |   外部  Host
drawTrianges        |   DOM Draw Start
clear()             |   DOM Draw End / Clear Begin
drawTriangles       |   Clear End / Draw Start
clear()             |   Clear Begin

可见 clear() 在 drawTriangles 没完毕前就发过去就会导致有一帧啥都不画,却clear两次,而产生闪烁空白。所以,去而代之的是我们采取了在Host端动态删除的策略。每次发送 clear() 并不真的立即清除,而是把需要清除的东西加到一个队列里面,下次执行别的绘图动作后,再把队列里面的东西清除掉。这样先绘图再删除的策略就可以避免任何闪烁了。不过也带来了一个缺点,就是如果不连续绘图,那么采取 clear() 则会导致绘图并不真的被clear()掉了。所以在加入队列的同时还会启动一个短暂的定时器,如果定时器时间到了,也会强制删除,但是如果定时器时间到之前就进行了绘图操作,那么定时器就会被取消。这样以来render图像就可以相对非常的流畅了,在各个浏览器下。

还有一大改进就是对于  Tween库的修正,这样保证 parallel 平行任务的每一个任务在完成后都会真的“完成”(达到 currentTime == duration)。这样几乎就不会有动画残留问题了!

下一个挑战是 2D和3D的变幻,目前是用 matrix/matrix3d 进行操作后,通过transform返回给Host然后通过 CSS3 的 transform: matrix/matrix3d 来渲染。这样 scaleXYZ 和 rotXYZ 就都可以一气呵成了~。

CommentCoreLibrary与代码弹幕支持更新

近期发现了一个相对完整很多的社区对于B站代码弹幕的API总结的文档:http://biliscript-syndicate.github.io/ 于是在参考了其中的许多内容,大量AS3文档后,彻底改变了CCL的代码弹幕实现(以确保未来更高的模块化支持)。现在的CCL代码弹幕部分,采取TypeScript编译而成,已经还原了很多很多的新接口,一改以前的自行探索接口。

测试一如既往的在:http://jabbany.github.io/CommentCoreLibrary/demo/scripting/

3D代码弹幕渲染支持
Continue reading →

高级脚本弹幕@CommentCoreLibrary

终于放假了有时间继续研发CommentCoreLibrary了。之前就有所研究高级弹幕的可行性,安全问题和兼容问题,经过一些思考终于在新的实验性平台上实现了代码弹幕的基本还原!(卧槽!)

一、安全性/沙箱

随便让一些代码在浏览器里运行是非常危险且可怕的。而代码弹幕却需要带给用户一个相对较大的活动空间,却又需要保持代码的安全性。所以沙箱(Sandboxing)设计成为了重要的第一关。有关JS沙箱,有那么两三种当时在考虑范围内。一个是通过JS实现一个 JS解释器,这样用户代码就在虚拟的解释器里面运行,而外部则可以开放一些指定的API 供其调用。然而经过一番实验发现现有的很多JS下的JS解释器速度非常慢,或者占用内存不少(比如有的用LLVM编译的,然后再用Emscripten运行的。会时不时带着浏览器崩溃。。。 Continue reading →

CommentCoreLibrary的三重过滤器

马上就要考试了,所以趁着考试前,先把CCL的最新改良介绍一下。CommentCoreLibrary的宗旨是采用HTML + JS来实现复杂的弹幕效果和比Flash版本灵活许多倍的过滤器和效果库,于是这次的技术更新更是加强了这一点的优势,让大家有机会见识到可能的下一代过滤器效果。

CommentCoreLibrary目前的过滤器共有三重,分别为“规则过滤器”,“函数预处理器”和“行进间修正器”。

第一重过滤器 规则过滤器

规则过滤器是一个基于简单语法规则的弹幕过滤器,设计宗旨是能让观看者简单定义过滤器规则又能发挥强大的智能过滤效果。与传统的正则表达式过滤器相区别的是,规则过滤器提供的可扩展性语法更加强悍匹配对象。

规则过滤器采用一套近似编程判断式的语法,但是规则及其简单:[对象.属性] [操作符] [内容]

对象是一个能简单表达过滤器过滤对象的特征字符,比如 $ 表示“滚动弹幕”,即弹幕类型 1,2 ,而 B表示底部弹幕,P表示定位弹幕等等。属性是弹幕对象的原始属性的内部表达,比如 text 是弹幕内容文字,color是弹幕颜色,size是弹幕大小等等。操作符是一种用于进行判断的符号,比如 == 表示相同于…时过滤, ~ 表示匹配正则表达式…则过滤,range 表示数字在某范围内则过滤等等。内容则是符合对象相应属性下的可被操作符操作的一个样本。 Continue reading →

[概念播放器]ABPlayerHTML5实体测试

之前有把ABPlayerHTML5的JS内部机制制作完成,不过呢,这次算是把一个基础界面也制作完毕了。用过G+的人们可能能认出来这个界面“灵感”的来源,没用过的赶紧去试试,那里有很多有意思的人。好吧,言归正传。

这是ABPlayerHTML5的概念界面

整个播放器除了视频部分全部应用了HTML5, CSS和JS实现。通过在Flash层上放置弹幕滚动层来实现出滚动弹幕的效果。可以耐受较大高压的弹幕,不过呢,由于需要通过Flash和JS的桥来进行,所以似乎非常的耗费处理资源。 Continue reading →

ABPlayer开发日志(二)

我发现命名撞车是件好可怕的事情= =这和所谓的“爱播搞清播放器”之类的没关系哈——ABP是纯Flash的弹幕播放器。

好吧,废话说到这里,ABPlayer基础构架貌似差不多了,目前能比较流畅的运行弹幕了,而且有了第一套Javascript接口功能。有感兴趣看看下面吧~ Continue reading →

ABPlayer 开发日志(一)

这大概是ABPlayer开发以来的第一个开发日志了,为什么前面好久没发?因为ABPlayer开发难度真的好高好高,特别是一些高级的基本功能实现,并不是那么得容易,不过也就借此机会在这里展示一下ABPlayer(正在成熟中)的核心构思。要是有弹幕播放器开发者恰巧路过,欢迎借鉴,这几本是弹幕播放器的一些核心思想~

开发得各种杂合体

Continue reading →

ABPlayer 开发开始

最近发现有对KnDanmakuWP 很感兴趣的同志们,正好限于KnLiveCommentary这个东西效率实在是差,所以打算以KnLiveCommentary功能设计为基础,以PADPlayer和MukioPlayer为两个基本点,以A站播放器,B站播放器,CMP4和KnLC 为四个指导方针开始研发 ABPlayer。于是,这称作C站的计划开始。

注意此ABPlayer非彼ABPlayer(AmbiencePlayer)。

“坑爹”的研发测试界面

Continue reading →

KnLiveCommentary V1.2

KnH弹幕播放器 – KnLiveCommentary V1.2

KnLiveCommentary V1.2

KnLiveCommentary V1.2 截图

弹幕播放器通常是指在线视频所用的FLASH播放器,这种播放器与普通的播放器不同,除了最基本的播放功能以外,用户还可以通过播放器进行“弹幕”,同时这些弹幕会被保存起来,在播放器加载的时候会载入以前的弹幕,这样每一个用户都可以看到其他用户的弹幕。相对与传统的播放器来说,弹幕播放器增强了交互性,增强了用户间的交流。

Continue reading →