时间的流动

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

const TEXTURE_SRC_BEFORE = 'https://images.unsplash.com/photo-1457369900526-e7606baa133b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&fit=max&s=96647cd4038299342a15cd2bd177075f' // https://unsplash.com/photos/dcp4hnQY-z0
const TEXTURE_SRC_AFTER = 'https://images.unsplash.com/photo-1456947700819-d91abdf38117?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=600&fit=max&s=96647cd4038299342a15cd2bd177075f' // https://unsplash.com/photos/weuWmzv7xnU

const PREFAB = {
  WIDTH: 1,
  HEIGHT: 1
}

const START_DELAY = 500
const INTERVAL = '10.'
const DURATION_START = '1.2'
const DURATION_END = '1.2'

function init (textureBefore, textureAfter) {
  const image = textureBefore.image
  const width = image.width
  const height = image.height
  const intervalX = width / PREFAB.WIDTH
  const intervalY = height / PREFAB.HEIGHT

const root = new THREERoot({
    cameraPosition: [0, 0, width * 2.5],
    aspect: 0.6 / 1,
    autoStart: false
  })

const prefab = new THREE.PlaneGeometry(PREFAB.WIDTH, PREFAB.HEIGHT)
  const geometry = new BAS.PrefabBufferGeometry(prefab, intervalX * intervalY)
  const aPosition = geometry.createAttribute('aPosition', 4)

let i = 0
  for (let x = 0; x < intervalX; x++) {
    for (let y = 0; y < intervalY; y++) {
      geometry.setPrefabData(aPosition, i++, [
        x * PREFAB.WIDTH - (width / 2),
        y * PREFAB.HEIGHT - (height / 2),
        0,
        Math.random() // random coefficient
      ])
    }
  }

textureBefore.minFilter = THREE.LinearFilter
  textureAfter.minFilter = THREE.LinearFilter

const mesh = new THREE.Mesh(geometry, material)
  mesh.frustumCulled = false

root.add(mesh)

let time = -50

const postShader = new THREE.ShaderPass({
    uniforms: {
      'tDiffuse': { type: 't', value: null },
      'uTime': { type: 'f', value: time },
    },
    vertexShader: `
      varying vec2 vUv;

void main () {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.);
      }
    `,
    fragmentShader: `
      uniform sampler2D tDiffuse;
      uniform float uTime;
      varying vec2 vUv;
      const float interval = ${INTERVAL};
      const float durationStart = ${DURATION_START};
      const float durationEnd = ${DURATION_END};
      const float totalTime = durationStart + interval + durationEnd;
      const float size = 0.03;
      const float halfSize = size * 0.5;
      const float n = size * 4.;
      const float brightness = 500.;
      const float speed = 0.006;

vec4 getMosaicColor (vec2 coord) {
        return texture2D(tDiffuse, coord);
        // vec4 mosaicColor = vec4(0.);
        // for (float x = 0.; x <= size; x += size * 0.2) {
        //   for (float y = 0.; y <= size; y += size * 0.2) {
        //     mosaicColor += texture2D(tDiffuse, vec2(coord.x + x, coord.y + y));
        //   }
        // }
        // return mosaicColor;
      }
      float lengthN (vec2 v, float n) {
        vec2 tmp = pow(abs(v), vec2(n));
        return pow(tmp.x + tmp.y, size / n);
      }
      float random (vec2 st) {
        return fract(sin(dot(st, vec2(12.9898, 4.1414))) * 43758.5453);
      }

void main () {
        vec4 texel = texture2D(tDiffuse, vUv);
        vec2 mosaicCoord = floor(vUv / size) * size + halfSize;
        vec4 mosaicColor = getMosaicColor(mosaicCoord);
        vec2 p = mod(vUv, size) - halfSize;
        float time = uTime / 50.;
        float tTime = mod(time, totalTime);
        float doubleTime = mod(time, totalTime * 2.);
        float isReverse = step(totalTime, doubleTime);
        float mosaicBrightness = mosaicColor.r * mosaicColor.g * mosaicColor.b;
        float isBright = step(0.0005, mosaicBrightness);
        // float isBright = step(0.02, mosaicBrightness / 36.);
        float isBlink = isBright * abs(min(step(vUv.y, 0.5) + step(0., tTime - (durationStart + interval)), 1.) * step(durationStart, tTime) - isReverse);
        float l = (1. - clamp(lengthN(p, n), 0., 1.)) * isBlink;
        float n = random(mosaicCoord) * 10.;
        float blink = l * brightness * max(sin(uTime * speed + n) - 0.99, 0.);
        gl_FragColor = texel + vec4(vec3(blink), 1.);
      }
    `,
  })
  root.initPostProcessing([
    postShader,
    new THREE.BloomPass(1.3, 25, 3.1, 256),
    new THREE.ShaderPass(THREE.CopyShader)
  ])

root.addUpdateCallback(() => {
    time++
    material.uniforms['uTime'].value = time
    postShader.uniforms['uTime'].value = time
  })

root.update(time)
  root.render()
  setTimeout(() => {
    root.start()
  }, START_DELAY)
}

let textureBefore, textureAfter
function onLoad () {
  (textureBefore && textureAfter) && init(textureBefore, textureAfter)
}
new THREE.TextureLoader().load(TEXTURE_SRC_BEFORE, texture => {
  textureBefore = texture
  onLoad()
})
new THREE.TextureLoader().load(TEXTURE_SRC_AFTER, texture => {
  textureAfter = texture
  onLoad()
})

// --------------------
// Three.js Wrapper
// forked from https://github.com/zadvorsky/three.bas/blob/86931253240abadf68b7c62edb934b994693ed4a/examples/_js/root.js
// --------------------
class THREERoot {
  constructor (params) {
    // defaults
    params = Object.assign({
      container: document.body,
      fov: 45,
      zNear: 1,
      zFar: 10000,
      cameraPosition: [0, 0, 30],
      createCameraControls: false,
      autoStart: true,
      pixelRatio: window.devicePixelRatio,
      antialias: (window.devicePixelRatio === 1),
      alpha: false,
      clearColor: 0x000000
    }, params)

// maps and arrays
    this.updateCallbacks = []
    this.resizeCallbacks = []
    this.objects = {}

// renderer
    this.renderer = new THREE.WebGLRenderer({
      antialias: params.antialias,
      alpha: params.alpha
    })
    this.renderer.setPixelRatio(params.pixelRatio)
    this.renderer.setClearColor(params.clearColor)
    this.canvas = this.renderer.domElement

// container
    this.container = (typeof params.container === 'string') ? document.querySelector(params.container) : params.container
    this.container.appendChild(this.canvas)

this.aspect = params.aspect
    this.setSize()

// camera
    this.camera = new THREE.PerspectiveCamera(
      params.fov,
      this.width / this.height,
      params.zNear,
      params.zFar
    )
    this.camera.position.set(...params.cameraPosition)

// scene
    this.scene = new THREE.Scene()

// resize handling
    this.resize()
    window.addEventListener('resize', () => {
      this.resize()
    })

// tick / update / render
    params.autoStart && this.tick()

// optional camera controls
    params.createCameraControls && this.createOrbitControls()

// pointer
    this.raycaster = new THREE.Raycaster()
    this.pointer = new THREE.Vector2()
  }

setSize () {
    if (this.aspect) {
      if (this.container.clientWidth / this.container.clientHeight > this.aspect) {
        this.width = this.container.clientHeight * this.aspect
        this.height = this.container.clientHeight
      } else {
        this.width = this.container.clientWidth
        this.height = this.container.clientWidth / this.aspect
      }
    } else {
      this.width = this.container.clientWidth
      this.height = this.container.clientHeight
    }
  }

createOrbitControls () {
    if (!THREE.TrackballControls) {
      console.error('TrackballControls.js file is not loaded.')
      return
    }

this.controls = new THREE.TrackballControls(this.camera, this.canvas)
    this.addUpdateCallback(() => { this.controls.update() })
  }

start () {
    this.tick()
  }

stop () {
    cancelAnimationFrame(this.animationFrameId)
  }

addUpdateCallback (callback) {
    this.updateCallbacks.push(callback)
  }

addResizeCallback (callback) {
    this.resizeCallbacks.push(callback)
  }

add (object, key) {
    key && (this.objects[key] = object)
    this.scene.add(object)
  }

addTo (object, parentKey, key) {
    key && (this.objects[key] = object)
    this.get(parentKey).add(object)
  }

get (key) {
    return this.objects[key]
  }

remove (o) {
    let object

if (typeof o === 'string') {
      object = this.objects[o]
    } else {
      object = o
    }

if (object) {
      object.parent.remove(object)
      delete this.objects[o]
    }
  }

tick (time) {
    this.update(time)
    this.render()
    this.animationFrameId = requestAnimationFrame(time => { this.tick(time) })
  }

update (time) {
    this.updateCallbacks.forEach(callback => { callback(time) })
  }

render () {
    this.renderer.render(this.scene, this.camera)
  }

resize () {
    this.container.style.width = ''
    this.container.style.height = ''
    this.setSize()

this.camera.aspect = this.width / this.height
    this.camera.updateProjectionMatrix()

this.renderer.setSize(this.width, this.height)
    this.resizeCallbacks.forEach(callback => { callback() })
  }

initPostProcessing (passes) {
    const size = this.renderer.getSize()
    const pixelRatio = this.renderer.getPixelRatio()
    size.width *= pixelRatio
    size.height *= pixelRatio

const composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.LinearFilter,
      format: THREE.RGBAFormat,
      stencilBuffer: false
    }))

const renderPass = new THREE.RenderPass(this.scene, this.camera)
    composer.addPass(renderPass)

for (let i = 0; i < passes.length; i++) {
      const pass = passes[i]
      pass.renderToScreen = (i === passes.length - 1)
      composer.addPass(pass)
    }

this.renderer.autoClear = false
    this.render = () => {
      this.renderer.clear()
      composer.render()
    }

this.addResizeCallback(() => {
      composer.setSize(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio)
    })
  }

checkPointer ({ x, y }, meshs, handler, nohandler) {
    this.pointer.x = (x / this.canvas.clientWidth) * 2 - 1
    this.pointer.y = -(y / this.canvas.clientHeight) * 2 + 1

this.raycaster.setFromCamera(this.pointer, this.camera)
    const intersects = this.raycaster.intersectObjects(meshs)

if (intersects.length > 0) {
      handler(intersects[0].object)

return true
    } else {
      nohandler && nohandler()

return false
    }
  }
}

// --------------------
// for Post Processing
// copied from https://github.com/mrdoob/three.js/tree/dev/examples/js/postprocessing
// --------------------

/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.EffectComposer = function ( renderer, renderTarget ) {

this.renderer = renderer;

if ( renderTarget === undefined ) {

var parameters = {
			minFilter: THREE.LinearFilter,
			magFilter: THREE.LinearFilter,
			format: THREE.RGBAFormat,
			stencilBuffer: false
		};
		var size = renderer.getSize();
		renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );

}

this.renderTarget1 = renderTarget;
	this.renderTarget2 = renderTarget.clone();

this.writeBuffer = this.renderTarget1;
	this.readBuffer = this.renderTarget2;

this.passes = [];

if ( THREE.CopyShader === undefined )
		console.error( "THREE.EffectComposer relies on THREE.CopyShader" );

this.copyPass = new THREE.ShaderPass( THREE.CopyShader );

};

Object.assign( THREE.EffectComposer.prototype, {

swapBuffers: function() {

var tmp = this.readBuffer;
		this.readBuffer = this.writeBuffer;
		this.writeBuffer = tmp;

addPass: function ( pass ) {

this.passes.push( pass );

var size = this.renderer.getSize();
		pass.setSize( size.width, size.height );

insertPass: function ( pass, index ) {

this.passes.splice( index, 0, pass );

render: function ( delta ) {

var maskActive = false;

var pass, i, il = this.passes.length;

for ( i = 0; i < il; i ++ ) {

pass = this.passes[ i ];

if ( pass.enabled === false ) continue;

pass.render( this.renderer, this.writeBuffer, this.readBuffer, delta, maskActive );

if ( pass.needsSwap ) {

if ( maskActive ) {

var context = this.renderer.context;

context.stencilFunc( context.NOTEQUAL, 1, 0xffffffff );

this.copyPass.render( this.renderer, this.writeBuffer, this.readBuffer, delta );

context.stencilFunc( context.EQUAL, 1, 0xffffffff );

}

this.swapBuffers();

}

if ( pass instanceof THREE.MaskPass ) {

maskActive = true;

} else if ( pass instanceof THREE.ClearMaskPass ) {

maskActive = false;

}

reset: function ( renderTarget ) {

if ( renderTarget === undefined ) {

var size = this.renderer.getSize();

renderTarget = this.renderTarget1.clone();
			renderTarget.setSize( size.width, size.height );

}

this.renderTarget1.dispose();
		this.renderTarget2.dispose();
		this.renderTarget1 = renderTarget;
		this.renderTarget2 = renderTarget.clone();

this.writeBuffer = this.renderTarget1;
		this.readBuffer = this.renderTarget2;

setSize: function ( width, height ) {

this.renderTarget1.setSize( width, height );
		this.renderTarget2.setSize( width, height );

for ( var i = 0; i < this.passes.length; i ++ ) {

this.passes[i].setSize( width, height );

}

} );

THREE.Pass = function () {

// if set to true, the pass is processed by the composer
	this.enabled = true;

// if set to true, the pass indicates to swap read and write buffer after rendering
	this.needsSwap = true;

// if set to true, the pass clears its buffer before rendering
	this.clear = false;

// if set to true, the result of the pass is rendered to screen
	this.renderToScreen = false;

};

Object.assign( THREE.Pass.prototype, {

setSize: function( width, height ) {},

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

console.error( "THREE.Pass: .render() must be implemented in derived pass." );

}

} );

/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.ShaderPass = function ( shader, textureID ) {

THREE.Pass.call( this );

this.textureID = ( textureID !== undefined ) ? textureID : "tDiffuse";

if ( shader instanceof THREE.ShaderMaterial ) {

this.uniforms = shader.uniforms;

this.material = shader;

} else if ( shader ) {

this.uniforms = THREE.UniformsUtils.clone( shader.uniforms );

this.material = new THREE.ShaderMaterial( {

defines: shader.defines || {},
			uniforms: this.uniforms,
			vertexShader: shader.vertexShader,
			fragmentShader: shader.fragmentShader

} );

}

this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
	this.scene = new THREE.Scene();

this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
	this.scene.add( this.quad );

};

THREE.ShaderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

constructor: THREE.ShaderPass,

render: function( renderer, writeBuffer, readBuffer, delta, maskActive ) {

if ( this.uniforms[ this.textureID ] ) {

this.uniforms[ this.textureID ].value = readBuffer.texture;

}

this.quad.material = this.material;

if ( this.renderToScreen ) {

renderer.render( this.scene, this.camera );

} else {

renderer.render( this.scene, this.camera, writeBuffer, this.clear );

}

} );

/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.RenderPass = function ( scene, camera, overrideMaterial, clearColor, clearAlpha ) {

THREE.Pass.call( this );

this.scene = scene;
	this.camera = camera;

this.overrideMaterial = overrideMaterial;

this.clearColor = clearColor;
	this.clearAlpha = ( clearAlpha !== undefined ) ? clearAlpha : 1;

this.oldClearColor = new THREE.Color();
	this.oldClearAlpha = 1;

this.clear = true;
	this.needsSwap = false;

};

THREE.RenderPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

constructor: THREE.RenderPass,

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

this.scene.overrideMaterial = this.overrideMaterial;

if ( this.clearColor ) {

this.oldClearColor.copy( renderer.getClearColor() );
			this.oldClearAlpha = renderer.getClearAlpha();

renderer.setClearColor( this.clearColor, this.clearAlpha );

}

renderer.render( this.scene, this.camera, readBuffer, this.clear );

if ( this.clearColor ) {

renderer.setClearColor( this.oldClearColor, this.oldClearAlpha );

}

this.scene.overrideMaterial = null;

}

} );

/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.MaskPass = function ( scene, camera ) {

THREE.Pass.call( this );

this.scene = scene;
	this.camera = camera;

this.clear = true;
	this.needsSwap = false;

this.inverse = false;

};

THREE.MaskPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

constructor: THREE.MaskPass,

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

var context = renderer.context;
		var state = renderer.state;

// don't update color or depth

state.buffers.color.setMask( false );
		state.buffers.depth.setMask( false );

// lock buffers

state.buffers.color.setLocked( true );
		state.buffers.depth.setLocked( true );

// set up stencil

var writeValue, clearValue;

if ( this.inverse ) {

writeValue = 0;
			clearValue = 1;

} else {

writeValue = 1;
			clearValue = 0;

}

state.buffers.stencil.setTest( true );
		state.buffers.stencil.setOp( context.REPLACE, context.REPLACE, context.REPLACE );
		state.buffers.stencil.setFunc( context.ALWAYS, writeValue, 0xffffffff );
		state.buffers.stencil.setClear( clearValue );

// draw into the stencil buffer

renderer.render( this.scene, this.camera, readBuffer, this.clear );
		renderer.render( this.scene, this.camera, writeBuffer, this.clear );

// unlock color and depth buffer for subsequent rendering

state.buffers.color.setLocked( false );
		state.buffers.depth.setLocked( false );

// only render where stencil is set to 1

state.buffers.stencil.setFunc( context.EQUAL, 1, 0xffffffff );  // draw if == 1
		state.buffers.stencil.setOp( context.KEEP, context.KEEP, context.KEEP );

}

} );

THREE.ClearMaskPass = function () {

THREE.Pass.call( this );

this.needsSwap = false;

};

THREE.ClearMaskPass.prototype = Object.create( THREE.Pass.prototype );

Object.assign( THREE.ClearMaskPass.prototype, {

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

renderer.state.buffers.stencil.setTest( false );

}

} );

/**
 * @author alteredq / http://alteredqualia.com/
 */

THREE.BloomPass = function ( strength, kernelSize, sigma, resolution ) {

THREE.Pass.call( this );

strength = ( strength !== undefined ) ? strength : 1;
	kernelSize = ( kernelSize !== undefined ) ? kernelSize : 25;
	sigma = ( sigma !== undefined ) ? sigma : 4.0;
	resolution = ( resolution !== undefined ) ? resolution : 256;

// render targets

var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };

this.renderTargetX = new THREE.WebGLRenderTarget( resolution, resolution, pars );
	this.renderTargetY = new THREE.WebGLRenderTarget( resolution, resolution, pars );

// copy material

if ( THREE.CopyShader === undefined )
		console.error( "THREE.BloomPass relies on THREE.CopyShader" );

var copyShader = THREE.CopyShader;

this.copyUniforms = THREE.UniformsUtils.clone( copyShader.uniforms );

this.copyUniforms[ "opacity" ].value = strength;

this.materialCopy = new THREE.ShaderMaterial( {

uniforms: this.copyUniforms,
		vertexShader: copyShader.vertexShader,
		fragmentShader: copyShader.fragmentShader,
		blending: THREE.AdditiveBlending,
		transparent: true

} );

// convolution material

if ( THREE.ConvolutionShader === undefined )
		console.error( "THREE.BloomPass relies on THREE.ConvolutionShader" );

var convolutionShader = THREE.ConvolutionShader;

this.convolutionUniforms = THREE.UniformsUtils.clone( convolutionShader.uniforms );

this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;
	this.convolutionUniforms[ "cKernel" ].value = THREE.ConvolutionShader.buildKernel( sigma );

this.materialConvolution = new THREE.ShaderMaterial( {

uniforms: this.convolutionUniforms,
		vertexShader:  convolutionShader.vertexShader,
		fragmentShader: convolutionShader.fragmentShader,
		defines: {
			"KERNEL_SIZE_FLOAT": kernelSize.toFixed( 1 ),
			"KERNEL_SIZE_INT": kernelSize.toFixed( 0 )
		}

} );

this.needsSwap = false;

this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
	this.scene  = new THREE.Scene();

this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), null );
	this.scene.add( this.quad );

};

THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

constructor: THREE.BloomPass,

render: function ( renderer, writeBuffer, readBuffer, delta, maskActive ) {

if ( maskActive ) renderer.context.disable( renderer.context.STENCIL_TEST );

// Render quad with blured scene into texture (convolution pass 1)

this.quad.material = this.materialConvolution;

this.convolutionUniforms[ "tDiffuse" ].value = readBuffer.texture;
		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurX;

renderer.render( this.scene, this.camera, this.renderTargetX, true );

// Render quad with blured scene into texture (convolution pass 2)

this.convolutionUniforms[ "tDiffuse" ].value = this.renderTargetX.texture;
		this.convolutionUniforms[ "uImageIncrement" ].value = THREE.BloomPass.blurY;

renderer.render( this.scene, this.camera, this.renderTargetY, true );

// Render original scene with superimposed blur to texture

this.quad.material = this.materialCopy;

this.copyUniforms[ "tDiffuse" ].value = this.renderTargetY.texture;

if ( maskActive ) renderer.context.enable( renderer.context.STENCIL_TEST );

renderer.render( this.scene, this.camera, readBuffer, this.clear );

}

} );

THREE.BloomPass.blurX = new THREE.Vector2( 0.001953125, 0.0 );
THREE.BloomPass.blurY = new THREE.Vector2( 0.0, 0.001953125 );

/**
 * @author alteredq / http://alteredqualia.com/
 *
 * Full-screen textured quad shader
 */

THREE.CopyShader = {

uniforms: {

"tDiffuse": { type: "t", value: null },
		"opacity":  { type: "f", value: 1.0 }

vertexShader: [

"varying vec2 vUv;",

"void main() {",

"vUv = uv;",
			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

"}"

].join( "\n" ),

fragmentShader: [

"uniform float opacity;",

"uniform sampler2D tDiffuse;",

"varying vec2 vUv;",

"void main() {",

"vec4 texel = texture2D( tDiffuse, vUv );",
			"gl_FragColor = opacity * texel;",

"}"

].join( "\n" )

};

/**
 * @author alteredq / http://alteredqualia.com/
 *
 * Convolution shader
 * ported from o3d sample to WebGL / GLSL
 * http://o3d.googlecode.com/svn/trunk/samples/convolution.html
 */

THREE.ConvolutionShader = {

defines: {

"KERNEL_SIZE_FLOAT": "25.0",
		"KERNEL_SIZE_INT": "25",

uniforms: {

"tDiffuse":        { type: "t", value: null },
		"uImageIncrement": { type: "v2", value: new THREE.Vector2( 0.001953125, 0.0 ) },
		"cKernel":         { type: "fv1", value: [] }

vertexShader: [

"uniform vec2 uImageIncrement;",

"varying vec2 vUv;",

"void main() {",

"vUv = uv - ( ( KERNEL_SIZE_FLOAT - 1.0 ) / 2.0 ) * uImageIncrement;",
			"gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

"}"

].join( "\n" ),

fragmentShader: [

"uniform float cKernel[ KERNEL_SIZE_INT ];",

"uniform sampler2D tDiffuse;",
		"uniform vec2 uImageIncrement;",

"varying vec2 vUv;",

"void main() {",

"vec2 imageCoord = vUv;",
			"vec4 sum = vec4( 0.0, 0.0, 0.0, 0.0 );",

"for( int i = 0; i < KERNEL_SIZE_INT; i ++ ) {",

"sum += texture2D( tDiffuse, imageCoord ) * cKernel[ i ];",
				"imageCoord += uImageIncrement;",

"}",

"gl_FragColor = sum;",

"}"

].join( "\n" ),

buildKernel: function ( sigma ) {

// We lop off the sqrt(2 * pi) * sigma term, since we're going to normalize anyway.

function gauss( x, sigma ) {

return Math.exp( - ( x * x ) / ( 2.0 * sigma * sigma ) );

}

var i, values, sum, halfWidth, kMaxKernelSize = 25, kernelSize = 2 * Math.ceil( sigma * 3.0 ) + 1;

if ( kernelSize > kMaxKernelSize ) kernelSize = kMaxKernelSize;
		halfWidth = ( kernelSize - 1 ) * 0.5;

values = new Array( kernelSize );
		sum = 0.0;
		for ( i = 0; i < kernelSize; ++ i ) {

values[ i ] = gauss( i - halfWidth, sigma );
			sum += values[ i ];

}

// normalize the kernel

for ( i = 0; i < kernelSize; ++ i ) values[ i ] /= sum;

return values;

}

};

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg