高性能 img 标签 RedWebImage

码农软件 · 软件分类 · 图像(Image) · 2019-05-29 13:26:59

软件介绍

RedWebImage

Demo 演示

这是一个很有意思的项目,基于 WebGL 的滤镜系统,我们将使用 OpenGL ES 作为硬件加速,做一个高性能的 img 标签。你可以使用这个 img 标签完成非常多,非常炫酷的效果,例如,动态的高斯模糊,漩涡效果等。

我们的小工具

  • 使用默认Shader:我们默认写了一些Shader,这些Shader放在了 /shader 文件夹之下。我们在发布的时候,把这些文件的内容写成了 js 的变量,在 /build/red-web-shader-lib.js 里面,其实就是把这些文件的内容用引号阔了起来。你如果想使用,直接在你的 Html 页面里引入这个 js 文件就行了。

  • 自定义Shader:如果你觉得我写的 Shader 太差劲,或者你想要什么新的效果,需要自己写 Shader ,那么也很容易。/shader 文件夹之下有两个文件夹 Fragment 和 Vertex 。你直接把你需要的 Shader 写进去就好了,注意,文件不要加后缀,开头也不要以数字什么的开头,因为我们的工具会把你的文件名当成变量名。写好之后,就可以用我们的工具把 Shader 文件变成 js 的变量,写到 /build/red-web-shader-lib.js 里面。

  • 我们的工具是这个,/build.jar ,这是一个 Java 写的小工具,所以需要你的电脑安装 jre ,最好是 Java8 ,写好自己的的 Shader 以后,你就可以用这个工具了

java -jar build.jar shader

用这行命令就可以了。这行命令会把原先的 /build/red-web-shader-lib.js 删除掉,然后根据 /shader 下的内容,重新生成一个。

  • 使用的时候,要引入 /build 下面的两个 js 文件,我们的小工具除了把 Shader 文件写入 /build/red-web-shader-lib.js 中之外,还有一个功能是把我们的源文件写入 /build/red-web-image.js 里面。我们的项目源码在 /lib 文件夹之下,如果你改变了我们的项目源码,那么你可能需要下面这个命令。

java -jar build.jar all

本文地址:https://www.codercto.com/soft/d/6802.html

算法时代

算法时代

Luke Dormehl / 胡小锐、钟毅 / 中信出版集团 / 2016-4-1 / CNY 59.00

世界上的一切事物都可以被简化成一个公式吗?数字可以告诉我们谁是适合我们的另一半,而且能和我们白头偕老吗?算法可以准确预测电影的票房收入,并且让电影更卖座吗?程序软件能预知谁将要实施犯罪,并且精确到案发时间吗?这些事听起来都像是科幻小说中的情节,但事实上,它们仅是日益被算法主宰的人类世界的“冰山一角”。 近年来随着大数据技术的快速发展,我们正在进入“算法经济时代”。每天,算法都会对展示在我们眼......一起来看看 《算法时代》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试