Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to achieve a cool dynamic login page in html". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is as follows:

Leaves

Body {

Padding:0

Margin:0

Overflow:hidden

Height: 600px

}

Canvas {

Padding:0

Margin:0

}

Div.btnbg {

Position:fixed

Left:0

Top:0

}

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 h2 {

Color: # fff

Text-shadow:0 0 10px

Letter-spacing: 1px

Text-align: center

}

H2 {

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

}

Login

Log in

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))

}

# 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.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)

}

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)

}

# 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.08,0.03), vec3 (0.96,0.98,1.0) * 1.5, c)

Gl_FragColor = vec4 (col * 0.5,1.0)

}

# 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, 1.0)

}

# 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

}

# 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)

}

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)

}

# 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) + 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)); / /

Gl_FragColor = vec4 (col.rgb, 1.0)

Gl_FragColor.a = 1. 0

}

/ / Utilities

Var Vector3 = {}

Var Matrix44 = {}

Vector3.create = function (x, y, z) {

Return {'x,'y, 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,0.0,0.0,1.0,0.0,1.0,0.0,1.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.00.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; iTunes +) {

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 prtcl.position / (pointFlower.area.z-prtcl.position [2])

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; iTunes +) {

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; iTunes +) {

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; iTunes +) {

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 [XSS _ clean] = 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 ['msR'+r] = w [' oR'+r] | | w ['webkitR'+r] | | w [' mozR'+r] | | w ['oR'+r] | | function (c) {w.setTimeout (c, 1000 / 60);}

}) (window, 'equestAnimationFrame')

This is the end of the content of "how to achieve a cool dynamic login page for html". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.