一个js压缩图片的工具。功能用C编写，使用了 https://github.com/ImageOptim/libimagequant , https://github.com/glennrp/libpng, https://github.com/kohler/gifsicle 以及 https://www.ijg.org/ 库，读取图片进行压缩。
导出wasm在页面运行，从而使得可以直接在页面压缩图片，不需要上传到服务器处理。
shader toy效果收集
模糊倒影 https://www.shadertoy.com/view/tddcD8
弹性地面 https://www.shadertoy.com/view/3lsSzf
sky光遇 https://www.shadertoy.com/view/ldlcRf
fire follow https://www.shadertoy.com/view/4dGyRh
bump sphere environment normal mapping shader
Vertex shader
#version 150
in vec4 gxl3d_Position;
in vec4 gxl3d_Normal;
out VertexData
{
vec4 Position;
vec4 OPosition;
vec4 Normal;
vec4 ONormal;
vec4 UV;
} vertex;
// GLSL Hacker automatic uniforms
uniform mat4 gxl3d_ModelViewProjectionMatrix;
uniform mat4 gxl3d_ModelViewMatrix;
void main()
{
vec4 P = gxl3d_ModelViewMatrix * gxl3d_Position;
vertex.OPosition = P;
gl_Position = gxl3d_ModelViewProjectionMatrix * gxl3d_Position;
vertex.UV = normalize(P);
vertex.Position = gxl3d_Position;
vertex.Normal = gxl3d_ModelViewMatrix * gxl3d_Normal;
vertex.ONormal = gxl3d_Normal;
}
Fragment shader
#version 150
in VertexData
{
vec4 Position;
vec4 OPosition;
vec4 Normal;
vec4 ONormal;
vec4 UV;
} vertex;
uniform sampler2D textureMap;
uniform sampler2D normalMap;
uniform vec3 color;
uniform float normalScale;
uniform float texScale;
uniform float useSSS;
uniform float useScreen;
float random(vec3 scale,float seed)
{return fract(sin(dot(gl_FragCoord.xyz+seed,scale))*43758.5453+seed);}
out vec4 FragColor;
void main()
{
vec3 vNormal = vertex.Normal.xyz;
vec3 vONormal = vertex.ONormal.xyz;
vec4 vPosition = vertex.Position;
vec4 vOPosition = vertex.OPosition;
vec3 vU = vertex.UV.xyz;
vec3 n = normalize( vONormal.xyz );
vec3 blend_weights = abs( n );
blend_weights = ( blend_weights - 0.2 ) * 7.;
blend_weights = max( blend_weights, 0. );
blend_weights /= (blend_weights.x + blend_weights.y + blend_weights.z);
vec2 coord1 = vPosition.yz * texScale;
vec2 coord2 = vPosition.zx * texScale;
vec2 coord3 = vPosition.xy * texScale;
vec3 bump1 = texture2D(normalMap, coord1).rgb;
vec3 bump2 = texture2D(normalMap, coord2).rgb;
vec3 bump3 = texture2D(normalMap, coord3).rgb;
vec3 blended_bump = bump1 * blend_weights.xxx +
bump2 * blend_weights.yyy +
bump3 * blend_weights.zzz;
vec3 tanX = vec3(vNormal.x, -vNormal.z, vNormal.y);
vec3 tanY = vec3(vNormal.z, vNormal.y, -vNormal.x);
vec3 tanZ = vec3(-vNormal.y, vNormal.x, vNormal.z);
vec3 blended_tangent = tanX * blend_weights.xxx +
tanY * blend_weights.yyy +
tanZ * blend_weights.zzz;
vec3 normalTex = blended_bump * 2.0 - 1.0;
normalTex.xy *= normalScale;
normalTex.y *= -1.;
normalTex = normalize( normalTex );
mat3 tsb = mat3( normalize( blended_tangent ),
normalize( cross( vNormal, blended_tangent ) ),
normalize( vNormal ) );
vec3 finalNormal = tsb * normalTex;
vec3 r = reflect( normalize( vU ), normalize( finalNormal ) );
float m = 2.0 * sqrt( r.x * r.x + r.y * r.y + ( r.z + 1.0 ) * ( r.z + 1.0 ) );
vec2 calculatedNormal = vec2( r.x / m + 0.5, r.y / m + 0.5 );
vec3 base = texture2D( textureMap, calculatedNormal ).rgb;
float rim = 1.75 * max( 0., abs( dot( normalize( vNormal ),
normalize( -vOPosition.xyz ) ) ) );
base += useSSS * color * ( 1. - .75 * rim );
base += ( 1. - useSSS ) * 10. * base * color * clamp( 1. - rim, 0., .15 );
if (useScreen == 1.)
{
base = vec3( 1. ) - ( vec3( 1. ) - base ) * ( vec3( 1. ) - base );
}
float nn = .05 * random( vec3( 1. ), length( gl_FragCoord ) );
base += vec3( nn );
FragColor = vec4( base.rgb, 1. );
}
Volumetric Light / Radial Blur Post Processing Filter
radial blur effect fragment shader
uniform sampler2D tex0;
uniform vec3 resolution; // screen resolution
#define T texture2D(tex0,.5+(p.xy*=.992))
void main()
{
vec3 p = gl_FragCoord.xyz/resolution-.5;
vec3 o = T.rbb;
for (float i=0.;i<100.;i++)
p.z += pow(max(0.,.5-length(T.rg)),2.)*exp(-i*.08);
gl_FragColor=vec4(o*o+p.z,1);
}
Toonify Post Processing Filter
fragment shader
#version 150
uniform sampler2D tex0;
uniform float mouse_x_offset; // 0.5
in vec4 Vertex_UV;
out vec4 FragColor;
uniform float edge_thres; // 0.2;
uniform float edge_thres2; // 5.0;
#define HueLevCount 6
#define SatLevCount 7
#define ValLevCount 4
float[HueLevCount] HueLevels = float[] (0.0,140.0,160.0,240.0,240.0,360.0);
float[SatLevCount] SatLevels = float[] (0.0,0.15,0.3,0.45,0.6,0.8,1.0);
float[ValLevCount] ValLevels = float[] (0.0,0.3,0.6,1.0);
vec3 RGBtoHSV( float r, float g, float b)
{
float minv, maxv, delta;
vec3 res;
minv = min(min(r, g), b);
maxv = max(max(r, g), b);
res.z = maxv; // v
delta = maxv - minv;
if( maxv != 0.0 )
res.y = delta / maxv; // s
else {
// r = g = b = 0 // s = 0, v is undefined
res.y = 0.0;
res.x = -1.0;
return res;
}
if( r == maxv )
res.x = ( g - b ) / delta; // between yellow & magenta
else if( g == maxv )
res.x = 2.0 + ( b - r ) / delta; // between cyan & yellow
else
res.x = 4.0 + ( r - g ) / delta; // between magenta & cyan
res.x = res.x * 60.0; // degrees
if( res.x < 0.0 )
res.x = res.x + 360.0;
return res;
}
vec3 HSVtoRGB(float h, float s, float v )
{
int i;
float f, p, q, t;
vec3 res;
if( s == 0.0 )
{
// achromatic (grey)
res.x = v;
res.y = v;
res.z = v;
return res;
}
h /= 60.0; // sector 0 to 5
i = int(floor( h ));
f = h - float(i); // factorial part of h
p = v * ( 1.0 - s );
q = v * ( 1.0 - s * f );
t = v * ( 1.0 - s * ( 1.0 - f ) );
switch(i)
{
case 0:
res.x = v;
res.y = t;
res.z = p;
break;
case 1:
res.x = q;
res.y = v;
res.z = p;
break;
case 2:
res.x = p;
res.y = v;
res.z = t;
break;
case 3:
res.x = p;
res.y = q;
res.z = v;
break;
case 4:
res.x = t;
res.y = p;
res.z = v;
break;
default: // case 5:
res.x = v;
res.y = p;
res.z = q;
break;
}
return res;
}
float nearestLevel(float col, int mode)
{
int levCount;
if (mode==0) levCount = HueLevCount;
if (mode==1) levCount = SatLevCount;
if (mode==2) levCount = ValLevCount;
for (int i =0; i<levCount-1; i++ ) {
if (mode==0) {
if (col >= HueLevels[i] && col <= HueLevels[i+1]) {
return HueLevels[i+1];
}
}
if (mode==1) {
if (col >= SatLevels[i] && col <= SatLevels[i+1]) {
return SatLevels[i+1];
}
}
if (mode==2) {
if (col >= ValLevels[i] && col <= ValLevels[i+1]) {
return ValLevels[i+1];
}
}
}
}
// averaged pixel intensity from 3 color channels
float avg_intensity(vec4 pix)
{
return (pix.r + pix.g + pix.b)/3.;
}
vec4 get_pixel(vec2 coords, float dx, float dy)
{
return texture(tex0,coords + vec2(dx, dy));
}
// returns pixel color
float IsEdge(in vec2 coords)
{
float dxtex = 1.0 /float(textureSize(tex0,0)) ;
float dytex = 1.0 /float(textureSize(tex0,0));
float pix[9];
int k = -1;
float delta;
// read neighboring pixel intensities
for (int i=-1; i<2; i++) {
for(int j=-1; j<2; j++) {
k++;
pix[k] = avg_intensity(get_pixel(coords,float(i)*dxtex,
float(j)*dytex));
}
}
// average color differences around neighboring pixels
delta = (abs(pix[1]-pix[7])+
abs(pix[5]-pix[3]) +
abs(pix[0]-pix[8])+
abs(pix[2]-pix[6])
)/4.;
//return clamp(5.5*delta,0.0,1.0);
return clamp(edge_thres2*delta,0.0,1.0);
}
void main()
{
vec2 uv = Vertex_UV.xy;
vec4 tc = vec4(1.0, 0.0, 0.0, 1.0);
if (uv.x > (mouse_x_offset+0.002))
{
vec3 colorOrg = texture(tex0, uv).rgb;
vec3 vHSV = RGBtoHSV(colorOrg.r,colorOrg.g,colorOrg.b);
vHSV.x = nearestLevel(vHSV.x, 0);
vHSV.y = nearestLevel(vHSV.y, 1);
vHSV.z = nearestLevel(vHSV.z, 2);
float edg = IsEdge(uv);
vec3 vRGB = (edg >= edge_thres)? vec3(0.0,0.0,0.0):HSVtoRGB(vHSV.x,vHSV.y,vHSV.z);
tc = vec4(vRGB.x,vRGB.y,vRGB.z, 1);
}
else if (uv.x < (mouse_x_offset-0.002))
{
tc = texture(tex0, uv);
}
FragColor = tc;
}
VBA自动合并不同excel文件同一个位置的数据
Sub Merge()
Dim DestWB As Workbook, WB As Workbook, WS As Worksheet, SourceSheet As String
Set DestWB = ActiveWorkbook
SourceSheet = "Input"
Dim val
Dim tmpval
FileNames = Application.GetOpenFilename( _
filefilter:="Excel Files (*.xls*),*.xls*", _
Title:="Select the workbooks to merge.", MultiSelect:=True)
If IsArray(FileNames) = False Then
If FileNames = False Then
Exit Sub
End If
End If
For n = LBound(FileNames) To UBound(FileNames)
Set WB = Workbooks.Open(Filename:=FileNames(n), ReadOnly:=True)
Set WS = WB.Worksheets(1)
With WS
If .UsedRange.Cells.Count >= 1 Then
val = .Range("A1").Value
tmpval = DestWB.Worksheets("merge").Range("A1").Value
DestWB.Worksheets("merge").Range("A1").Value = tmpval + val
End If
End With
WB.Close savechanges:=False
Next n
End Sub
cycleGan一些数据资料
https://people.eecs.berkeley.edu/~taesung_park/
webgl过场效果2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
background:#000;
}
#view{position:absolute;left:0;top:0}
#btn{position:absolute;width:250px;height:60px;text-align:center;line-height:60px;color:#ffffff;left:200px;top:300px;cursor:pointer;background:rgba(0,0,0,0.5)}
</style>
</head>
<body>
<div id="view"></div>
<div id="btn">点击显示切换效果</div>
<script src="http://h5.skyfish.me/comm/js/zepto.min.js"></script>
<script src="pixi.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<script type="text/javascript">
var requestAnimFrame = (function () {
return window.requestAnimationFrame || (window).webkitRequestAnimationFrame || (window).mozRequestAnimationFrame || (window).oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60, new Date().getTime());
};
})();
var renderer,stage,imgCon,displacementMap,displacementMap2;
var crossfade = {
vertexShader: ["attribute vec2 aVertexPosition;", "attribute vec2 aTextureCoord;", "varying vec2 vTextureCoord;", "uniform mat3 projectionMatrix;", "void main() {", "gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);", "vTextureCoord = aTextureCoord;", "}"].join("\n"),
fragmentShader: [
"precision highp float;",
"varying vec2 vTextureCoord;",
"uniform sampler2D uSampler;",
"uniform sampler2D displacementMap;",
"uniform sampler2D displacementMap2;",
"uniform float time;",
"uniform float elapsed;",
"uniform float width;",
"uniform vec2 resolution;",
"uniform float scale;",
"float snoise(vec2 co, float seed) {",
"return fract(sin(dot(co * seed, vec2(12.9898, 78.233))) * 43758.5453);",
"}",
"void main() {",
"vec2 repeat = vec2(scale, scale * resolution.y / resolution.x);",
"vec2 uv = gl_FragCoord.xy / vec2(resolution.x, resolution.y);",
"vec2 vCoord = fract(uv.xy * repeat.xy);",
"vec4 displacement1 = texture2D( displacementMap, vCoord);",
"vec4 displacement2 = texture2D( displacementMap2, vCoord);",
"vec4 displacement = mix(displacement1, displacement2, vec4(time));",
"vec2 mixTexture = mix(displacement.xy, vTextureCoord.xy, vec2(time));",
"vec2 testPos1 = mixTexture + (1.0 - time) * displacement.xy * 0.5;",
"vec2 testPos = mix(testPos1, vec2(1.0), vec2(1.0 - time));",
"vec2 distUv = vec2(testPos.x,vTextureCoord.y);",
"float noise = snoise(distUv, elapsed);",
"vec4 color = texture2D(uSampler, distUv);",
"gl_FragColor = vec4(mix(color, vec4(vec3(color * noise), 0.0), 0.18));",
"}"
].join("\n"),
val:0
};
var shader;
var w = $(window).width();
var h = $(window).height();
var isAni=false;
var isShow=true;
function init() {
try {
renderer = PIXI.autoDetectRenderer(w, h,{transparent: true});
} catch(e) {
renderer = new PIXI.CanvasRenderer(w, h,{transparent: true});
}
document.getElementById('view').appendChild(renderer.view);
stage = new PIXI.Container();
imgCon = new PIXI.DisplayObjectContainer();
stage.addChild(imgCon);
var bg = new PIXI.Sprite.fromImage('b.jpg');
imgCon.addChild(bg);
displacementMap = new PIXI.Texture.fromImage("displacement-map3.png");
displacementMap2 = new PIXI.Texture.fromImage("displacement-map2.png");
var uniform = {
time: {
type: "f",
value: 1
},
elapsed: {
type: "f",
value: 1
},
scale: {
type: "f",
value: 1
},
displacementMap: {
type: "sampler2D",
value: displacementMap
},
displacementMap2: {
type: "sampler2D",
value:displacementMap2
},
resolution: {
type: "v2",
value: [w, h]
}
}
var s = crossfade.vertexShader;
var f = crossfade.fragmentShader;
shader = new PIXI.AbstractFilter(s,f,uniform);
imgCon.filters = [shader];
}
function animate() {
shader.uniforms.elapsed +=0.01;
if(isAni) {
shader.uniforms.time =1-crossfade.val;
}
renderer.render(stage);
requestAnimFrame(animate);
}
init();
animate();
$('#btn').click(function(){
isAni=true;
if(isShow) {
isShow=false;
TweenMax.to(crossfade, h <= 1056 ? 3 : 2.4, {
val: h <= 1056 ? 1 : .5,
ease: Quint.easeInOut,
onComplete: function() {
crossfade.val = 1;
isAni=false;
}
});
} else {
isShow=true;
TweenMax.to(crossfade, 2.4, {
val: 0,
ease: Quint.easeOut,
onComplete: function() {
crossfade.val = 0;
isAni=false;
}
});
}
});
</script>
</body>
</html>
webgl过场效果shader
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
<title>test</title>
<style type="text/css">
body {
margin: 0px;
overflow: hidden;
background:#000;
}
#view{position:absolute;left:0;top:0}
#btn{position:absolute;width:250px;height:60px;text-align:center;line-height:60px;color:#ffffff;left:200px;top:300px;cursor:pointer;background:rgba(0,0,0,0.5)}
</style>
</head>
<body>
<div id="view"></div>
<div id="btn">点击显示切换效果</div>
<script src="http://h5.skyfish.me/comm/js/zepto.min.js"></script>
<script src="pixi.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<!-- shaders -->
<script id="vshader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
attribute vec2 aTextureCoord;
uniform mat3 projectionMatrix;
varying vec2 vTextureCoord;
void main(void)
{
vTextureCoord = aTextureCoord;
gl_Position = vec4((projectionMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);
}
</script>
<script id="fshader" type="x-shader/x-fragment">
precision highp float;
varying vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform sampler2D uHeightMap;
uniform float uTime;
void main(void)
{
float height = texture2D(uHeightMap, vTextureCoord).r;
vec4 color = texture2D(uSampler, vTextureCoord);
if (height < uTime) {
discard;
}
if (height < (uTime + uTime * 0.1)) {
color = vec4(1.0, 0.2, 0.0, 1.0);
}
gl_FragColor = color;
}
</script>
<script type="text/javascript">
var requestAnimFrame = (function () {
return window.requestAnimationFrame || (window).webkitRequestAnimationFrame || (window).mozRequestAnimationFrame || (window).oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
window.setTimeout(callback, 1000 / 60, new Date().getTime());
};
})();
var renderer,stage,imgCon,displacementMap,displacementMap2;
var crossfade = {
vertexShader: document.getElementById('vshader').textContent,
fragmentShader: document.getElementById('fshader').textContent,
val:0
};
var shader;
var w = $(window).width();
var h = $(window).height();
var isAni=false;
var isShow=true;
function init() {
try {
renderer = PIXI.autoDetectRenderer(w, h,{transparent: true});
} catch(e) {
renderer = new PIXI.CanvasRenderer(w, h,{transparent: true});
}
document.getElementById('view').appendChild(renderer.view);
stage = new PIXI.Container();
imgCon = new PIXI.Container();
stage.addChild(imgCon);
var bg = new PIXI.Sprite.fromImage('b.jpg');
imgCon.addChild(bg);
displacementMap = new PIXI.Texture.fromImage("displacement-map3.png");
displacementMap2 = new PIXI.Texture.fromImage("clouds.jpg");
var uniform = {
uTime: {
type: "f",
value: 0
},
uHeightMap: {
type: "sampler2D",
value:displacementMap2
}
}
var s = crossfade.vertexShader;
var f = crossfade.fragmentShader;
shader = new PIXI.Filter(s,f,uniform);
imgCon.filters = [shader];
}
function animate() {
if(isAni) {
shader.uniforms.uTime =crossfade.val;
}
renderer.render(stage);
requestAnimFrame(animate);
}
init();
animate();
$('#btn').click(function(){
isAni=true;
if(isShow) {
isShow=false;
TweenMax.to(crossfade, 2, {
val: 1,
ease: Sine.easeOut,
onComplete: function() {
crossfade.val = 1;
isAni=false;
}
});
} else {
isShow=true;
TweenMax.to(crossfade, 2, {
val: 0,
ease: Sine.easeOut,
onComplete: function() {
crossfade.val = 0;
isAni=false;
}
});
}
});
</script>
</body></html>
mac Sierra下torch安装hdf5
在mac下一直加载不了hdf5，库已经安装，经过一番搜索查资料，原来是新版mac os sierra下出来的bug.
需要修改两个文件
1) 修改config.lua，路径/Users/your_name/torch/install/share/lua/5.1/hdf5.
原来的路径是空的，需要填写hdf5的真实路径，还不能是软链接的路径，
HDF5_INCLUDE_PATH =“/usr/local/Cellar/hdf5/版本/include
2) Error: ffi.lua:56: ‘)’ expected near ‘_close’
需要修改第45行成下面这样子
local process = io.popen(“gcc -D ‘_Nullable=’ -E ” .. headerPath)
测试一下
th -e “require ‘hdf5′”
如果正常就成功了。