分享一个酷炫动态登录页面html
程序员文章站
2022-03-07 22:57:01
话不多说，如下图： 代码如下： ......
话不多说，如下图：
代码如下：
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> 叶子 </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus">
<meta name="author" content="">
<meta name="keywords" content="">
<meta name="description" content="">
<style>body {
padding:0;
margin:0;
overflow:hidden;
height: 600px;
}
canvas {
padding:0;
margin:0;
}
div.btnbg {
position:fixed;
left:0;
top:0;
}</style>
<style>
html{
width: 100%;
height: 100%;
overflow: hidden;
font-style: sans-serif;
}
body{
width: 100%;
height: 100%;
font-family: 'open sans',sans-serif;
margin: 0;
}
#login{
position: absolute;
top: 50%;
left:50%;
margin: -150px 0 0 -150px;
width: 300px;
height: 300px;
}
#login h1{
color: #fff;
text-shadow:0 0 10px;
letter-spacing: 1px;
text-align: center;
}
h1{
font-size: 2em;
margin: 0.67em 0;
}
input{
width: 300px;
height: 40px;
margin-bottom: 10px;
outline: none;
padding: 10px;
font-size: 13px;
color: #fff;
text-shadow:1px 1px 1px;
border-top: 1px solid #312e3d;
border-left: 1px solid #312e3d;
border-right: 1px solid #312e3d;
border-bottom: 1px solid #56536a;
border-radius: 4px;
background-color: #2d2d3f;
}
.but{
width: 300px;
min-height: 20px;
display: block;
background-color: #4a77d4;
border: 1px solid #3762bc;
color: #fff;
padding: 9px 14px;
font-size: 15px;
line-height: normal;
border-radius: 5px;
margin: 0;
}
</style>
</head>
<body>
<div id="login">
<h1>login</h1>
<form method="post">
<input type="text" required="required" placeholder="用户名" name="u"></input>
<input type="password" required="required" placeholder="密码" name="p"></input>
<button class="but" type="submit">登录</button>
</form>
</div>
<canvas id="sakura"></canvas>
<div class="btnbg">
</div>
<!-- sakura shader -->
<script id="sakura_point_vsh" type="x-shader/x_vertex">
uniform mat4 uprojection;
uniform mat4 umodelview;
uniform vec3 uresolution;
uniform vec3 uoffset;
uniform vec3 udof; //x:focus distance, y:focus radius, z:max radius
uniform vec3 ufade; //x:start distance, y:half distance, z:near fade start
attribute vec3 aposition;
attribute vec3 aeuler;
attribute vec2 amisc; //x:size, y:fade
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotmat;
varying vec3 normx;
varying vec3 normy;
varying vec3 normz;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
void main(void) {
// projection is based on vertical angle
vec4 pos = umodelview * vec4(aposition + uoffset, 1.0);
gl_position = uprojection * pos;
gl_pointsize = amisc.x * uprojection[1][1] / -pos.z * uresolution.y * 0.5;
pposition = pos.xyz;
psize = amisc.x;
pdist = length(pos.xyz);
palpha = smoothstep(0.0, 1.0, (pdist - 0.1) / ufade.z);
vec3 elrsn = sin(aeuler);
vec3 elrcs = cos(aeuler);
mat3 rotx = mat3(
1.0, 0.0, 0.0,
0.0, elrcs.x, elrsn.x,
0.0, -elrsn.x, elrcs.x
);
mat3 roty = mat3(
elrcs.y, 0.0, -elrsn.y,
0.0, 1.0, 0.0,
elrsn.y, 0.0, elrcs.y
);
mat3 rotz = mat3(
elrcs.z, elrsn.z, 0.0,
-elrsn.z, elrcs.z, 0.0,
0.0, 0.0, 1.0
);
mat3 rotmat = rotx * roty * rotz;
normal = rotmat[2];
mat3 trrotm = mat3(
rotmat[0][0], rotmat[1][0], rotmat[2][0],
rotmat[0][1], rotmat[1][1], rotmat[2][1],
rotmat[0][2], rotmat[1][2], rotmat[2][2]
);
normx = trrotm[0];
normy = trrotm[1];
normz = trrotm[2];
const vec3 lit = vec3(0.6917144638660746, 0.6917144638660746, -0.20751433915982237);
float tmpdfs = dot(lit, normal);
if(tmpdfs < 0.0) {
normal = -normal;
tmpdfs = dot(lit, normal);
}
diffuse = 0.4 + tmpdfs;
vec3 eyev = normalize(-pos.xyz);
if(dot(eyev, normal) > 0.0) {
vec3 hv = normalize(eyev + lit);
specular = pow(max(dot(hv, normal), 0.0), 20.0);
}
else {
specular = 0.0;
}
rstop = clamp((abs(pdist - udof.x) - udof.y) / udof.z, 0.0, 1.0);
rstop = pow(rstop, 0.5);
//-0.69315 = ln(0.5)
distancefade = min(1.0, exp((ufade.x - pdist) * 0.69315 / ufade.y));
}
</script>
<script id="sakura_point_fsh" type="x-shader/x_fragment">
#ifdef gl_es
//precision mediump float;
precision highp float;
#endif
uniform vec3 udof; //x:focus distance, y:focus radius, z:max radius
uniform vec3 ufade; //x:start distance, y:half distance, z:near fade start
const vec3 fadecol = vec3(0.08, 0.03, 0.06);
varying vec3 pposition;
varying float psize;
varying float palpha;
varying float pdist;
//varying mat3 rotmat;
varying vec3 normx;
varying vec3 normy;
varying vec3 normz;
varying vec3 normal;
varying float diffuse;
varying float specular;
varying float rstop;
varying float distancefade;
float ellipse(vec2 p, vec2 o, vec2 r) {
vec2 lp = (p - o) / r;
return length(lp) - 1.0;
}
void main(void) {
vec3 p = vec3(gl_pointcoord - vec2(0.5, 0.5), 0.0) * 2.0;
vec3 d = vec3(0.0, 0.0, -1.0);
float nd = normz.z; //dot(-normz, d);
if(abs(nd) < 0.0001) discard;
float np = dot(normz, p);
vec3 tp = p + d * np / nd;
vec2 coord = vec2(dot(normx, tp), dot(normy, tp));
//angle = 15 degree
const float flwrsn = 0.258819045102521;
const float flwrcs = 0.965925826289068;
mat2 flwrm = mat2(flwrcs, -flwrsn, flwrsn, flwrcs);
vec2 flwrp = vec2(abs(coord.x), coord.y) * flwrm;
float r;
if(flwrp.x < 0.0) {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.36, 0.96) * 0.5);
}
else {
r = ellipse(flwrp, vec2(0.065, 0.024) * 0.5, vec2(0.58, 0.96) * 0.5);
}
if(r > rstop) discard;
vec3 col = mix(vec3(1.0, 0.8, 0.75), vec3(1.0, 0.9, 0.87), r);
float grady = mix(0.0, 1.0, pow(coord.y * 0.5 + 0.5, 0.35));
col *= vec3(1.0, grady, grady);
col *= mix(0.8, 1.0, pow(abs(coord.x), 0.3));
col = col * diffuse + specular;
col = mix(fadecol, col, distancefade);
float alpha = (rstop > 0.001)? (0.5 - r / (rstop * 2.0)) : 1.0;
alpha = smoothstep(0.0, 1.0, alpha) * palpha;
gl_fragcolor = vec4(col * 0.5, alpha);
}
</script>
<!-- effects -->
<script id="fx_common_vsh" type="x-shader/x_vertex">
uniform vec3 uresolution;
attribute vec2 aposition;
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
gl_position = vec4(aposition, 0.0, 1.0);
texcoord = aposition.xy * 0.5 + vec2(0.5, 0.5);
screencoord = aposition.xy * vec2(uresolution.z, 1.0);
}
</script>
<script id="bg_fsh" type="x-shader/x_fragment">
#ifdef gl_es
//precision mediump float;
precision highp float;
#endif
uniform vec2 utimes;
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
vec3 col;
float c;
vec2 tmpv = texcoord * vec2(0.8, 1.0) - vec2(0.95, 1.0);
c = exp(-pow(length(tmpv) * 1.8, 2.0));
col = mix(vec3(0.02, 0.0, 0.03), vec3(0.96, 0.98, 1.0) * 1.5, c);
gl_fragcolor = vec4(col * 0.5, 1.0);
}
</script>
<script id="fx_brightbuf_fsh" type="x-shader/x_fragment">
#ifdef gl_es
//precision mediump float;
precision highp float;
#endif
uniform sampler2d usrc;
uniform vec2 udelta;
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
vec4 col = texture2d(usrc, texcoord);
gl_fragcolor = vec4(col.rgb * 2.0 - vec3(0.5), 1.0);
}
</script>
<script id="fx_dirblur_r4_fsh" type="x-shader/x_fragment">
#ifdef gl_es
//precision mediump float;
precision highp float;
#endif
uniform sampler2d usrc;
uniform vec2 udelta;
uniform vec4 ublurdir; //dir(x, y), stride(z, w)
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
vec4 col = texture2d(usrc, texcoord);
col = col + texture2d(usrc, texcoord + ublurdir.xy * udelta);
col = col + texture2d(usrc, texcoord - ublurdir.xy * udelta);
col = col + texture2d(usrc, texcoord + (ublurdir.xy + ublurdir.zw) * udelta);
col = col + texture2d(usrc, texcoord - (ublurdir.xy + ublurdir.zw) * udelta);
gl_fragcolor = col / 5.0;
}
</script>
<!-- effect fragment shader template -->
<script id="fx_common_fsh" type="x-shader/x_fragment">
#ifdef gl_es
//precision mediump float;
precision highp float;
#endif
uniform sampler2d usrc;
uniform vec2 udelta;
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
gl_fragcolor = texture2d(usrc, texcoord);
}
</script>
<!-- post processing -->
<script id="pp_final_vsh" type="x-shader/x_vertex">
uniform vec3 uresolution;
attribute vec2 aposition;
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
gl_position = vec4(aposition, 0.0, 1.0);
texcoord = aposition.xy * 0.5 + vec2(0.5, 0.5);
screencoord = aposition.xy * vec2(uresolution.z, 1.0);
}
</script>
<script id="pp_final_fsh" type="x-shader/x_fragment">
#ifdef gl_es
//precision mediump float;
precision highp float;
#endif
uniform sampler2d usrc;
uniform sampler2d ubloom;
uniform vec2 udelta;
varying vec2 texcoord;
varying vec2 screencoord;
void main(void) {
vec4 srccol = texture2d(usrc, texcoord) * 2.0;
vec4 bloomcol = texture2d(ubloom, texcoord);
vec4 col;
col = srccol + bloomcol * (vec4(1.0) + srccol);
col *= smoothstep(1.0, 0.0, pow(length((texcoord - vec2(0.5)) * 2.0), 1.2) * 0.5);
col = pow(col, vec4(0.45454545454545)); //(1.0 / 2.2)
gl_fragcolor = vec4(col.rgb, 1.0);
gl_fragcolor.a = 1.0;
}
</script>
<script>
// utilities
var vector3 = {};
var matrix44 = {};
vector3.create = function(x, y, z) {
return {'x':x, 'y':y, 'z':z};
};
vector3.dot = function (v0, v1) {
return v0.x * v1.x + v0.y * v1.y + v0.z * v1.z;
};
vector3.cross = function (v, v0, v1) {
v.x = v0.y * v1.z - v0.z * v1.y;
v.y = v0.z * v1.x - v0.x * v1.z;
v.z = v0.x * v1.y - v0.y * v1.x;
};
vector3.normalize = function (v) {
var l = v.x * v.x + v.y * v.y + v.z * v.z;
if(l > 0.00001) {
l = 1.0 / math.sqrt(l);
v.x *= l;
v.y *= l;
v.z *= l;
}
};
vector3.arrayform = function(v) {
if(v.array) {
v.array[0] = v.x;
v.array[1] = v.y;
v.array[2] = v.z;
}
else {
v.array = new float32array([v.x, v.y, v.z]);
}
return v.array;
};
matrix44.createidentity = function () {
return new float32array([1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0]);
};
matrix44.loadprojection = function (m, aspect, vdeg, near, far) {
var h = near * math.tan(vdeg * math.pi / 180.0 * 0.5) * 2.0;
var w = h * aspect;
m[0] = 2.0 * near / w;
m[1] = 0.0;
m[2] = 0.0;
m[3] = 0.0;
m[4] = 0.0;
m[5] = 2.0 * near / h;
m[6] = 0.0;
m[7] = 0.0;
m[8] = 0.0;
m[9] = 0.0;
m[10] = -(far + near) / (far - near);
m[11] = -1.0;
m[12] = 0.0;
m[13] = 0.0;
m[14] = -2.0 * far * near / (far - near);
m[15] = 0.0;
};
matrix44.loadlookat = function (m, vpos, vlook, vup) {
var frontv = vector3.create(vpos.x - vlook.x, vpos.y - vlook.y, vpos.z - vlook.z);
vector3.normalize(frontv);
var sidev = vector3.create(1.0, 0.0, 0.0);
vector3.cross(sidev, vup, frontv);
vector3.normalize(sidev);
var topv = vector3.create(1.0, 0.0, 0.0);
vector3.cross(topv, frontv, sidev);
vector3.normalize(topv);
m[0] = sidev.x;
m[1] = topv.x;
m[2] = frontv.x;
m[3] = 0.0;
m[4] = sidev.y;
m[5] = topv.y;
m[6] = frontv.y;
m[7] = 0.0;
m[8] = sidev.z;
m[9] = topv.z;
m[10] = frontv.z;
m[11] = 0.0;
m[12] = -(vpos.x * m[0] + vpos.y * m[4] + vpos.z * m[8]);
m[13] = -(vpos.x * m[1] + vpos.y * m[5] + vpos.z * m[9]);
m[14] = -(vpos.x * m[2] + vpos.y * m[6] + vpos.z * m[10]);
m[15] = 1.0;
};
//
var timeinfo = {
'start':0, 'prev':0, // date
'delta':0, 'elapsed':0 // number(sec)
};
//
var gl;
var renderspec = {
'width':0,
'height':0,
'aspect':1,
'array':new float32array(3),
'halfwidth':0,
'halfheight':0,
'halfarray':new float32array(3)
// and some render targets. see setviewport()
};
renderspec.setsize = function(w, h) {
renderspec.width = w;
renderspec.height = h;
renderspec.aspect = renderspec.width / renderspec.height;
renderspec.array[0] = renderspec.width;
renderspec.array[1] = renderspec.height;
renderspec.array[2] = renderspec.aspect;
renderspec.halfwidth = math.floor(w / 2);
renderspec.halfheight = math.floor(h / 2);
renderspec.halfarray[0] = renderspec.halfwidth;
renderspec.halfarray[1] = renderspec.halfheight;
renderspec.halfarray[2] = renderspec.halfwidth / renderspec.halfheight;
};
function deleterendertarget(rt) {
gl.deleteframebuffer(rt.framebuffer);
gl.deleterenderbuffer(rt.renderbuffer);
gl.deletetexture(rt.texture);
}
function createrendertarget(w, h) {
var ret = {
'width':w,
'height':h,
'sizearray':new float32array([w, h, w / h]),
'dtxarray':new float32array([1.0 / w, 1.0 / h])
};
ret.framebuffer = gl.createframebuffer();
ret.renderbuffer = gl.createrenderbuffer();
ret.texture = gl.createtexture();
gl.bindtexture(gl.texture_2d, ret.texture);
gl.teximage2d(gl.texture_2d, 0, gl.rgba, w, h, 0, gl.rgba, gl.unsigned_byte, null);
gl.texparameteri(gl.texture_2d, gl.texture_wrap_s, gl.clamp_to_edge);
gl.texparameteri(gl.texture_2d, gl.texture_wrap_t, gl.clamp_to_edge);
gl.texparameteri(gl.texture_2d, gl.texture_mag_filter, gl.linear);
gl.texparameteri(gl.texture_2d, gl.texture_min_filter, gl.linear);
gl.bindframebuffer(gl.framebuffer, ret.framebuffer);
gl.framebuffertexture2d(gl.framebuffer, gl.color_attachment0, gl.texture_2d, ret.texture, 0);
gl.bindrenderbuffer(gl.renderbuffer, ret.renderbuffer);
gl.renderbufferstorage(gl.renderbuffer, gl.depth_component16, w, h);
gl.framebufferrenderbuffer(gl.framebuffer, gl.depth_attachment, gl.renderbuffer, ret.renderbuffer);
gl.bindtexture(gl.texture_2d, null);
gl.bindrenderbuffer(gl.renderbuffer, null);
gl.bindframebuffer(gl.framebuffer, null);
return ret;
}
function compileshader(shtype, shsrc) {
var retsh = gl.createshader(shtype);
gl.shadersource(retsh, shsrc);
gl.compileshader(retsh);
if(!gl.getshaderparameter(retsh, gl.compile_status)) {
var errlog = gl.getshaderinfolog(retsh);
gl.deleteshader(retsh);
console.error(errlog);
return null;
}
return retsh;
}
function createshader(vtxsrc, frgsrc, uniformlist, attrlist) {
var vsh = compileshader(gl.vertex_shader, vtxsrc);
var fsh = compileshader(gl.fragment_shader, frgsrc);
if(vsh == null || fsh == null) {
return null;
}
var prog = gl.createprogram();
gl.attachshader(prog, vsh);
gl.attachshader(prog, fsh);
gl.deleteshader(vsh);
gl.deleteshader(fsh);
gl.linkprogram(prog);
if (!gl.getprogramparameter(prog, gl.link_status)) {
var errlog = gl.getprograminfolog(prog);
console.error(errlog);
return null;
}
if(uniformlist) {
prog.uniforms = {};
for(var i = 0; i < uniformlist.length; i++) {
prog.uniforms[uniformlist[i]] = gl.getuniformlocation(prog, uniformlist[i]);
}
}
if(attrlist) {
prog.attributes = {};
for(var i = 0; i < attrlist.length; i++) {
var attr = attrlist[i];
prog.attributes[attr] = gl.getattriblocation(prog, attr);
}
}
return prog;
}
function useshader(prog) {
gl.useprogram(prog);
for(var attr in prog.attributes) {
gl.enablevertexattribarray(prog.attributes[attr]);;
}
}
function unuseshader(prog) {
for(var attr in prog.attributes) {
gl.disablevertexattribarray(prog.attributes[attr]);;
}
gl.useprogram(null);
}
/////
var projection = {
'angle':60,
'nearfar':new float32array([0.1, 100.0]),
'matrix':matrix44.createidentity()
};
var camera = {
'position':vector3.create(0, 0, 100),
'lookat':vector3.create(0, 0, 0),
'up':vector3.create(0, 1, 0),
'dof':vector3.create(10.0, 4.0, 8.0),
'matrix':matrix44.createidentity()
};
var pointflower = {};
var meshflower = {};
var scenestandby = false;
var blossomparticle = function () {
this.velocity = new array(3);
this.rotation = new array(3);
this.position = new array(3);
this.euler = new array(3);
this.size = 1.0;
this.alpha = 1.0;
this.zkey = 0.0;
};
blossomparticle.prototype.setvelocity = function (vx, vy, vz) {
this.velocity[0] = vx;
this.velocity[1] = vy;
this.velocity[2] = vz;
};
blossomparticle.prototype.setrotation = function (rx, ry, rz) {
this.rotation[0] = rx;
this.rotation[1] = ry;
this.rotation[2] = rz;
};
blossomparticle.prototype.setposition = function (nx, ny, nz) {
this.position[0] = nx;
this.position[1] = ny;
this.position[2] = nz;
};
blossomparticle.prototype.seteulerangles = function (rx, ry, rz) {
this.euler[0] = rx;
this.euler[1] = ry;
this.euler[2] = rz;
};
blossomparticle.prototype.setsize = function (s) {
this.size = s;
};
blossomparticle.prototype.update = function (dt, et) {
this.position[0] += this.velocity[0] * dt;
this.position[1] += this.velocity[1] * dt;
this.position[2] += this.velocity[2] * dt;
this.euler[0] += this.rotation[0] * dt;
this.euler[1] += this.rotation[1] * dt;
this.euler[2] += this.rotation[2] * dt;
};
function createpointflowers() {
// get point sizes
var prm = gl.getparameter(gl.aliased_point_size_range);
renderspec.pointsize = {'min':prm[0], 'max':prm[1]};
var vtxsrc = document.getelementbyid("sakura_point_vsh").textcontent;
var frgsrc = document.getelementbyid("sakura_point_fsh").textcontent;
pointflower.program = createshader(
vtxsrc, frgsrc,
['uprojection', 'umodelview', 'uresolution', 'uoffset', 'udof', 'ufade'],
['aposition', 'aeuler', 'amisc']
);
useshader(pointflower.program);
pointflower.offset = new float32array([0.0, 0.0, 0.0]);
pointflower.fader = vector3.create(0.0, 10.0, 0.0);
// paramerters: velocity[3], rotate[3]
pointflower.numflowers = 1600;
pointflower.particles = new array(pointflower.numflowers);
// vertex attributes {position[3], euler_xyz[3], size[1]}
pointflower.dataarray = new float32array(pointflower.numflowers * (3 + 3 + 2));
pointflower.positionarrayoffset = 0;
pointflower.eulerarrayoffset = pointflower.numflowers * 3;
pointflower.miscarrayoffset = pointflower.numflowers * 6;
pointflower.buffer = gl.createbuffer();
gl.bindbuffer(gl.array_buffer, pointflower.buffer);
gl.bufferdata(gl.array_buffer, pointflower.dataarray, gl.dynamic_draw);
gl.bindbuffer(gl.array_buffer, null);
unuseshader(pointflower.program);
for(var i = 0; i < pointflower.numflowers; i++) {
pointflower.particles[i] = new blossomparticle();
}
}
function initpointflowers() {
//area
pointflower.area = vector3.create(20.0, 20.0, 20.0);
pointflower.area.x = pointflower.area.y * renderspec.aspect;
pointflower.fader.x = 10.0; //env fade start
pointflower.fader.y = pointflower.area.z; //env fade half
pointflower.fader.z = 0.1; //near fade start
//particles
var pi2 = math.pi * 2.0;
var tmpv3 = vector3.create(0, 0, 0);
var tmpv = 0;
var symmetryrand = function() {return (math.random() * 2.0 - 1.0);};
for(var i = 0; i < pointflower.numflowers; i++) {
var tmpprtcl = pointflower.particles[i];
//velocity
tmpv3.x = symmetryrand() * 0.3 + 0.8;
tmpv3.y = symmetryrand() * 0.2 - 1.0;
tmpv3.z = symmetryrand() * 0.3 + 0.5;
vector3.normalize(tmpv3);
tmpv = 2.0 + math.random() * 1.0;
tmpprtcl.setvelocity(tmpv3.x * tmpv, tmpv3.y * tmpv, tmpv3.z * tmpv);
//rotation
tmpprtcl.setrotation(
symmetryrand() * pi2 * 0.5,
symmetryrand() * pi2 * 0.5,
symmetryrand() * pi2 * 0.5
);
//position
tmpprtcl.setposition(
symmetryrand() * pointflower.area.x,
symmetryrand() * pointflower.area.y,
symmetryrand() * pointflower.area.z
);
//euler
tmpprtcl.seteulerangles(
math.random() * math.pi * 2.0,
math.random() * math.pi * 2.0,
math.random() * math.pi * 2.0
);
//size
tmpprtcl.setsize(0.9 + math.random() * 0.1);
}
}
function renderpointflowers() {
//update
var pi2 = math.pi * 2.0;
var limit = [pointflower.area.x, pointflower.area.y, pointflower.area.z];
var repeatpos = function (prt, cmp, limit) {
if(math.abs(prt.position[cmp]) - prt.size * 0.5 > limit) {
//out of area
if(prt.position[cmp] > 0) {
prt.position[cmp] -= limit * 2.0;
}
else {
prt.position[cmp] += limit * 2.0;
}
}
};
var repeateuler = function (prt, cmp) {
prt.euler[cmp] = prt.euler[cmp] % pi2;
if(prt.euler[cmp] < 0.0) {
prt.euler[cmp] += pi2;
}
};
for(var i = 0; i < pointflower.numflowers; i++) {
var prtcl = pointflower.particles[i];
prtcl.update(timeinfo.delta, timeinfo.elapsed);
repeatpos(prtcl, 0, pointflower.area.x);
repeatpos(prtcl, 1, pointflower.area.y);
repeatpos(prtcl, 2, pointflower.area.z);
repeateuler(prtcl, 0);
repeateuler(prtcl, 1);
repeateuler(prtcl, 2);
prtcl.alpha = 1.0;//(pointflower.area.z - prtcl.position[2]) * 0.5;
prtcl.zkey = (camera.matrix[2] * prtcl.position[0]
+ camera.matrix[6] * prtcl.position[1]
+ camera.matrix[10] * prtcl.position[2]
+ camera.matrix[14]);
}
// sort
pointflower.particles.sort(function(p0, p1){return p0.zkey - p1.zkey;});
// update data
var ipos = pointflower.positionarrayoffset;
var ieuler = pointflower.eulerarrayoffset;
var imisc = pointflower.miscarrayoffset;
for(var i = 0; i < pointflower.numflowers; i++) {
var prtcl = pointflower.particles[i];
pointflower.dataarray[ipos] = prtcl.position[0];
pointflower.dataarray[ipos + 1] = prtcl.position[1];
pointflower.dataarray[ipos + 2] = prtcl.position[2];
ipos += 3;
pointflower.dataarray[ieuler] = prtcl.euler[0];
pointflower.dataarray[ieuler + 1] = prtcl.euler[1];
pointflower.dataarray[ieuler + 2] = prtcl.euler[2];
ieuler += 3;
pointflower.dataarray[imisc] = prtcl.size;
pointflower.dataarray[imisc + 1] = prtcl.alpha;
imisc += 2;
}
//draw
gl.enable(gl.blend);
//gl.disable(gl.depth_test);
gl.blendfunc(gl.src_alpha, gl.one_minus_src_alpha);
var prog = pointflower.program;
useshader(prog);
gl.uniformmatrix4fv(prog.uniforms.uprojection, false, projection.matrix);
gl.uniformmatrix4fv(prog.uniforms.umodelview, false, camera.matrix);
gl.uniform3fv(prog.uniforms.uresolution, renderspec.array);
gl.uniform3fv(prog.uniforms.udof, vector3.arrayform(camera.dof));
gl.uniform3fv(prog.uniforms.ufade, vector3.arrayform(pointflower.fader));
gl.bindbuffer(gl.array_buffer, pointflower.buffer);
gl.bufferdata(gl.array_buffer, pointflower.dataarray, gl.dynamic_draw);
gl.vertexattribpointer(prog.attributes.aposition, 3, gl.float, false, 0, pointflower.positionarrayoffset * float32array.bytes_per_element);
gl.vertexattribpointer(prog.attributes.aeuler, 3, gl.float, false, 0, pointflower.eulerarrayoffset * float32array.bytes_per_element);
gl.vertexattribpointer(prog.attributes.amisc, 2, gl.float, false, 0, pointflower.miscarrayoffset * float32array.bytes_per_element);
// doubler
for(var i = 1; i < 2; i++) {
var zpos = i * -2.0;
pointflower.offset[0] = pointflower.area.x * -1.0;
pointflower.offset[1] = pointflower.area.y * -1.0;
pointflower.offset[2] = pointflower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uoffset, pointflower.offset);
gl.drawarrays(gl.point, 0, pointflower.numflowers);
pointflower.offset[0] = pointflower.area.x * -1.0;
pointflower.offset[1] = pointflower.area.y * 1.0;
pointflower.offset[2] = pointflower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uoffset, pointflower.offset);
gl.drawarrays(gl.point, 0, pointflower.numflowers);
pointflower.offset[0] = pointflower.area.x * 1.0;
pointflower.offset[1] = pointflower.area.y * -1.0;
pointflower.offset[2] = pointflower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uoffset, pointflower.offset);
gl.drawarrays(gl.point, 0, pointflower.numflowers);
pointflower.offset[0] = pointflower.area.x * 1.0;
pointflower.offset[1] = pointflower.area.y * 1.0;
pointflower.offset[2] = pointflower.area.z * zpos;
gl.uniform3fv(prog.uniforms.uoffset, pointflower.offset);
gl.drawarrays(gl.point, 0, pointflower.numflowers);
}
//main
pointflower.offset[0] = 0.0;
pointflower.offset[1] = 0.0;
pointflower.offset[2] = 0.0;
gl.uniform3fv(prog.uniforms.uoffset, pointflower.offset);
gl.drawarrays(gl.point, 0, pointflower.numflowers);
gl.bindbuffer(gl.array_buffer, null);
unuseshader(prog);
gl.enable(gl.depth_test);
gl.disable(gl.blend);
}
// effects
//common util
function createeffectprogram(vtxsrc, frgsrc, exunifs, exattrs) {
var ret = {};
var unifs = ['uresolution', 'usrc', 'udelta'];
if(exunifs) {
unifs = unifs.concat(exunifs);
}
var attrs = ['aposition'];
if(exattrs) {
attrs = attrs.concat(exattrs);
}
ret.program = createshader(vtxsrc, frgsrc, unifs, attrs);
useshader(ret.program);
ret.dataarray = new float32array([
-1.0, -1.0,
1.0, -1.0,
-1.0, 1.0,
1.0, 1.0
]);
ret.buffer = gl.createbuffer();
gl.bindbuffer(gl.array_buffer, ret.buffer);
gl.bufferdata(gl.array_buffer, ret.dataarray, gl.static_draw);
gl.bindbuffer(gl.array_buffer, null);
unuseshader(ret.program);
return ret;
}
// basic usage
// useeffect(prog, srctex({'texture':texid, 'dtxarray':(f32)[dtx, dty]})); //basic initialize
// gl.uniform**(...); //additional uniforms
// draweffect()
// unuseeffect(prog)
// texture0 makes src
function useeffect(fxobj, srctex) {
var prog = fxobj.program;
useshader(prog);
gl.uniform3fv(prog.uniforms.uresolution, renderspec.array);
if(srctex != null) {
gl.uniform2fv(prog.uniforms.udelta, srctex.dtxarray);
gl.uniform1i(prog.uniforms.usrc, 0);
gl.activetexture(gl.texture0);
gl.bindtexture(gl.texture_2d, srctex.texture);
}
}
function draweffect(fxobj) {
gl.bindbuffer(gl.array_buffer, fxobj.buffer);
gl.vertexattribpointer(fxobj.program.attributes.aposition, 2, gl.float, false, 0, 0);
gl.drawarrays(gl.triangle_strip, 0, 4);
}
function unuseeffect(fxobj) {
unuseshader(fxobj.program);
}
var effectlib = {};
function createeffectlib() {
var vtxsrc, frgsrc;
//common
var cmnvtxsrc = document.getelementbyid("fx_common_vsh").textcontent;
//background
frgsrc = document.getelementbyid("bg_fsh").textcontent;
effectlib.scenebg = createeffectprogram(cmnvtxsrc, frgsrc, ['utimes'], null);
// make brightpixels buffer
frgsrc = document.getelementbyid("fx_brightbuf_fsh").textcontent;
effectlib.mkbrightbuf = createeffectprogram(cmnvtxsrc, frgsrc, null, null);
// direction blur
frgsrc = document.getelementbyid("fx_dirblur_r4_fsh").textcontent;
effectlib.dirblur = createeffectprogram(cmnvtxsrc, frgsrc, ['ublurdir'], null);
//final composite
vtxsrc = document.getelementbyid("pp_final_vsh").textcontent;
frgsrc = document.getelementbyid("pp_final_fsh").textcontent;
effectlib.finalcomp = createeffectprogram(vtxsrc, frgsrc, ['ubloom'], null);
}
// background
function createbackground() {
//console.log("create background");
}
function initbackground() {
//console.log("init background");
}
function renderbackground() {
gl.disable(gl.depth_test);
useeffect(effectlib.scenebg, null);
gl.uniform2f(effectlib.scenebg.program.uniforms.utimes, timeinfo.elapsed, timeinfo.delta);
draweffect(effectlib.scenebg);
unuseeffect(effectlib.scenebg);
gl.enable(gl.depth_test);
}
// post process
var postprocess = {};
function createpostprocess() {
//console.log("create post process");
}
function initpostprocess() {
//console.log("init post process");
}
function renderpostprocess() {
gl.enable(gl.texture_2d);
gl.disable(gl.depth_test);
var bindrt = function (rt, isclear) {
gl.bindframebuffer(gl.framebuffer, rt.framebuffer);
gl.viewport(0, 0, rt.width, rt.height);
if(isclear) {
gl.clearcolor(0, 0, 0, 0);
gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit);
}
};
//make bright buff
bindrt(renderspec.whalfrt0, true);
useeffect(effectlib.mkbrightbuf, renderspec.mainrt);
draweffect(effectlib.mkbrightbuf);
unuseeffect(effectlib.mkbrightbuf);
// make bloom
for(var i = 0; i < 2; i++) {
var p = 1.5 + 1 * i;
var s = 2.0 + 1 * i;
bindrt(renderspec.whalfrt1, true);
useeffect(effectlib.dirblur, renderspec.whalfrt0);
gl.uniform4f(effectlib.dirblur.program.uniforms.ublurdir, p, 0.0, s, 0.0);
draweffect(effectlib.dirblur);
unuseeffect(effectlib.dirblur);
bindrt(renderspec.whalfrt0, true);
useeffect(effectlib.dirblur, renderspec.whalfrt1);
gl.uniform4f(effectlib.dirblur.program.uniforms.ublurdir, 0.0, p, 0.0, s);
draweffect(effectlib.dirblur);
unuseeffect(effectlib.dirblur);
}
//display
gl.bindframebuffer(gl.framebuffer, null);
gl.viewport(0, 0, renderspec.width, renderspec.height);
gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit);
useeffect(effectlib.finalcomp, renderspec.mainrt);
gl.uniform1i(effectlib.finalcomp.program.uniforms.ubloom, 1);
gl.activetexture(gl.texture1);
gl.bindtexture(gl.texture_2d, renderspec.whalfrt0.texture);
draweffect(effectlib.finalcomp);
unuseeffect(effectlib.finalcomp);
gl.enable(gl.depth_test);
}
/////
var sceneenv = {};
function createscene() {
createeffectlib();
createbackground();
createpointflowers();
createpostprocess();
scenestandby = true;
}
function initscene() {
initbackground();
initpointflowers();
initpostprocess();
//camera.position.z = 17.320508;
camera.position.z = pointflower.area.z + projection.nearfar[0];
projection.angle = math.atan2(pointflower.area.y, camera.position.z + pointflower.area.z) * 180.0 / math.pi * 2.0;
matrix44.loadprojection(projection.matrix, renderspec.aspect, projection.angle, projection.nearfar[0], projection.nearfar[1]);
}
function renderscene() {
//draw
matrix44.loadlookat(camera.matrix, camera.position, camera.lookat, camera.up);
gl.enable(gl.depth_test);
//gl.bindframebuffer(gl.framebuffer, null);
gl.bindframebuffer(gl.framebuffer, renderspec.mainrt.framebuffer);
gl.viewport(0, 0, renderspec.mainrt.width, renderspec.mainrt.height);
gl.clearcolor(0.005, 0, 0.05, 0);
gl.clear(gl.color_buffer_bit | gl.depth_buffer_bit);
renderbackground();
renderpointflowers();
renderpostprocess();
}
/////
function onresize(e) {
makecanvasfullscreen(document.getelementbyid("sakura"));
setviewports();
if(scenestandby) {
initscene();
}
}
function setviewports() {
renderspec.setsize(gl.canvas.width, gl.canvas.height);
gl.clearcolor(0.2, 0.2, 0.5, 1.0);
gl.viewport(0, 0, renderspec.width, renderspec.height);
var rtfunc = function (rtname, rtw, rth) {
var rt = renderspec[rtname];
if(rt) deleterendertarget(rt);
renderspec[rtname] = createrendertarget(rtw, rth);
};
rtfunc('mainrt', renderspec.width, renderspec.height);
rtfunc('wfullrt0', renderspec.width, renderspec.height);
rtfunc('wfullrt1', renderspec.width, renderspec.height);
rtfunc('whalfrt0', renderspec.halfwidth, renderspec.halfheight);
rtfunc('whalfrt1', renderspec.halfwidth, renderspec.halfheight);
}
function render() {
renderscene();
}
var animating = true;
function toggleanimation(elm) {
animating ^= true;
if(animating) animate();
if(elm) {
elm.innerhtml = animating? "stop":"start";
}
}
function stepanimation() {
if(!animating) animate();
}
function animate() {
var curdate = new date();
timeinfo.elapsed = (curdate - timeinfo.start) / 1000.0;
timeinfo.delta = (curdate - timeinfo.prev) / 1000.0;
timeinfo.prev = curdate;
if(animating) requestanimationframe(animate);
render();
}
function makecanvasfullscreen(canvas) {
var b = document.body;
var d = document.documentelement;
fullw = math.max(b.clientwidth , b.scrollwidth, d.scrollwidth, d.clientwidth);
fullh = math.max(b.clientheight , b.scrollheight, d.scrollheight, d.clientheight);
canvas.width = fullw;
canvas.height = fullh;
}
window.addeventlistener('load', function(e) {
var canvas = document.getelementbyid("sakura");
try {
makecanvasfullscreen(canvas);
gl = canvas.getcontext('experimental-webgl');
} catch(e) {
alert("webgl not supported." + e);
console.error(e);
return;
}
window.addeventlistener('resize', onresize);
setviewports();
createscene();
initscene();
timeinfo.start = new date();
timeinfo.prev = timeinfo.start;
animate();
});
//set window.requestanimationframe
(function (w, r) {
w['r'+r] = w['r'+r] || w['webkitr'+r] || w['mozr'+r] || w['msr'+r] || w['or'+r] || function(c){ w.settimeout(c, 1000 / 60); };
})(window, 'equestanimationframe');
</script>
</body>
</html>
上一篇： 520表白酷炫html
下一篇： Flutter 安装笔记