canvas 3D斑点研究2

下载代码

html

css

分享到微信朋友圈

html

void main() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    // Camera and look-at
    vec3 cam = vec3(cos(u_mouse.x * 5.)*3.,u_mouse.y * 3.,sin(u_mouse.x * 5.)*3.);
    vec3 lookAt = vec3(0,0,0);
    
    // Unit vectors
    vec3 forward = normalize(lookAt - cam);
    vec3 right = normalize(vec3(forward.z, 0., -forward.x));
    vec3 up = normalize(cross(forward, right));
    
    // FOV
    float FOV = .4;
    
    // Ray origin and ray direction
    vec3 ro = cam;
    vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
    
    // Ray marching
    const float clipNear = 0.;
    const float clipFar = 32.;
    vec3 col = vec3(0.);
    float steps = 0.;
    Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, col, steps);
    
    gl_FragColor = vec4(col, 1.);
    // gl_FragColor = vec4(vec3(steps*.001), 1.);
  }
  
</script>

css

JavaScript

class WTCGL{constructor(el,vertexShaderSource,fragmentShaderSource,width,height,pxratio,styleElement){this.run=this.run.bind(this);if(!el instanceof HTMLElement||el.nodeName.toLowerCase()!=='canvas'){console.log('Provided element should be a canvas element');return null}this._el=el;this._ctx=this._el.getContext("webgl2",this.webgl_params)||this._el.getContext("webgl",this.webgl_params)||this._el.getContext("experimental-webgl",this.webgl_params);this._ctx.getExtension('OES_standard_derivatives');this._ctx.getExtension('EXT_shader_texture_lod');if(!this._ctx){console.log('Browser doesn\'t support WebGL ');return null}this._vertexShader=WTCGL.createShaderOfType(this._ctx,this._ctx.VERTEX_SHADER,vertexShaderSource);this._fragmentShader=WTCGL.createShaderOfType(this._ctx,this._ctx.FRAGMENT_SHADER,fragmentShaderSource);this._program=this._ctx.createProgram();this._ctx.attachShader(this._program,this._vertexShader);this._ctx.attachShader(this._program,this._fragmentShader);this._ctx.linkProgram(this._program);if(!this._ctx.getProgramParameter(this._program,this._ctx.LINK_STATUS)){console.log('Unable to initialize the shader program: '+this._ctx.getProgramInfoLog(this._program));return null}this.initBuffers([-1.0,1.0,-1.,1.0,1.0,-1.,-1.0,-1.0,-1.,1.0,-1.0,-1.,]);this._programInfo={attribs:{vertexPosition:this._ctx.getAttribLocation(this._program,'a_position'),},uniforms:{projectionMatrix:this._ctx.getUniformLocation(this._program,'u_projectionMatrix'),modelViewMatrix:this._ctx.getUniformLocation(this._program,'u_modelViewMatrix'),resolution:this._ctx.getUniformLocation(this._program,'u_resolution'),time:this._ctx.getUniformLocation(this._program,'u_time'),},};this._ctx.useProgram(this._program);this.pxratio=pxratio;this.styleElement=styleElement!==true;this.resize(width,height)}resize(w,h){this._el.width=w*this.pxratio;this._el.height=h*this.pxratio;this._size=[w*this.pxratio,h*this.pxratio];if(this.styleElement){this._el.style.width=w+'px';this._el.style.height=h+'px'}this._ctx.viewportWidth=w*this.pxratio;this._ctx.viewportHeight=h*this.pxratio;this._ctx.uniform2fv(this._programInfo.uniforms.resolution,this._size);this.initBuffers(this._positions)}initBuffers(positions){this._positions=positions;this._positionBuffer=this._ctx.createBuffer();this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER,this._positionBuffer);this._ctx.bufferData(this._ctx.ARRAY_BUFFER,new Float32Array(positions),this._ctx.STATIC_DRAW)}addUniform(name,type,value){let uniform=this._programInfo.uniforms[name];uniform=this._ctx.getUniformLocation(this._program,`u_${name}`);switch(type){case WTCGL.TYPE_FLOAT:if(!isNaN(value))this._ctx.uniform1f(uniform,value);break;case WTCGL.TYPE_V2:if(value instanceof Array&&value.length===2.)this._ctx.uniform2fv(uniform,value);break;case WTCGL.TYPE_V3:if(value instanceof Array&&value.length===3.)this._ctx.uniform3fv(uniform,value);break;case WTCGL.TYPE_V4:if(value instanceof Array&&value.length===4.)this._ctx.uniform4fv(uniform,value);break}this._programInfo.uniforms[name]=uniform;return uniform}addTexture(name,type,image,liveUpdate=false){let textures=this.textures;var texture=this._ctx.createTexture();this._ctx.pixelStorei(this._ctx.UNPACK_FLIP_Y_WEBGL,true);this._ctx.bindTexture(this._ctx.TEXTURE_2D,texture);if(type===WTCGL.IMAGETYPE_MIRROR){this._ctx.texParameteri(this._ctx.TEXTURE_2D,this._ctx.TEXTURE_WRAP_S,this._ctx.MIRRORED_REPEAT);this._ctx.texParameteri(this._ctx.TEXTURE_2D,this._ctx.TEXTURE_WRAP_T,this._ctx.MIRRORED_REPEAT)}else if(type===WTCGL.IMAGETYPE_REGULAR){this._ctx.texParameteri(this._ctx.TEXTURE_2D,this._ctx.TEXTURE_WRAP_S,this._ctx.CLAMP_TO_EDGE);this._ctx.texParameteri(this._ctx.TEXTURE_2D,this._ctx.TEXTURE_WRAP_T,this._ctx.CLAMP_TO_EDGE)}this._ctx.texParameteri(this._ctx.TEXTURE_2D,this._ctx.TEXTURE_MIN_FILTER,this._ctx.LINEAR);this._ctx.texImage2D(this._ctx.TEXTURE_2D,0,this._ctx.RGBA,this._ctx.RGBA,this._ctx.UNSIGNED_BYTE,image);textures.push({name:name,tex:texture,liveUpdate:liveUpdate,image:image});this.textures=textures;return texture}updateTexture(texture,image){this._ctx.bindTexture(this._ctx.TEXTURE_2D,texture);this._ctx.texImage2D(this._ctx.TEXTURE_2D,0,this._ctx.RGBA,this._ctx.RGBA,this._ctx.UNSIGNED_BYTE,image)}initTextures(){for(let i=0;i<this.textures.length;i++){let name=this.textures[i].name;let uniform=this._programInfo.uniforms[name];uniform=this._ctx.getUniformLocation(this._program,`u_${name}`);this._ctx.uniform1i(uniform,i);this._ctx.activeTexture(this._ctx[`TEXTURE${i}`]);this._ctx.bindTexture(this._ctx.TEXTURE_2D,this.textures[i].tex)}}run(delta){this.running&&requestAnimationFrame(this.run);this.time=this.startTime+delta*.0002;this.render()}render(){this._ctx.uniform1f(this._programInfo.uniforms.time,this.time);this.textures.forEach((textureInfo)=>{if(textureInfo.liveUpdate===true){this.updateTexture(textureInfo.tex,textureInfo.image)}});this._ctx.viewport(0,0,this._ctx.viewportWidth,this._ctx.viewportHeight);if(this.clearing){this._ctx.clearColor(1.0,0.0,0.0,0.0);this._ctx.blendFunc(this._ctx.SRC_ALPHA,this._ctx.ONE_MINUS_SRC_ALPHA);this._ctx.clear(this._ctx.COLOR_BUFFER_BIT)}this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER,this._positionBuffer);this._ctx.vertexAttribPointer(this._programInfo.attribs.vertexPosition,3,this._ctx.FLOAT,false,0,0);this._ctx.enableVertexAttribArray(this._programInfo.attribs.vertexPosition);this.includePerspectiveMatrix&&this._ctx.uniformMatrix4fv(this._programInfo.uniforms.projectionMatrix,false,this.perspectiveMatrix);this.includeModelViewMatrix&&this._ctx.uniformMatrix4fv(this._programInfo.uniforms.modelViewMatrix,false,this.modelViewMatrix);this._ctx.drawArrays(this._ctx.TRIANGLE_STRIP,0,4)}get webgl_params(){return{alpha:true}}set styleElement(value){this._styleElement=value===true;if(this._styleElement===false&&this._el){this._el.style.width='';this._el.style.height=''}}get styleElement(){return this._styleElement!==false}set startTime(value){if(!isNaN(value)){this._startTime=value}}get startTime(){return this._startTime||0}set time(value){if(!isNaN(value)){this._time=value}}get time(){return this._time||0}set includePerspectiveMatrix(value){this._includePerspectiveMatrix=value===true}get includePerspectiveMatrix(){return this._includePerspectiveMatrix===true}set includeModelViewMatrix(value){this._includeModelViewMatrix=value===true}get includeModelViewMatrix(){return this._includeModelViewMatrix===true}set textures(value){if(value instanceof Array){this._textures=value}}get textures(){return this._textures||[]}set clearing(value){this._clearing=value===true}get clearing(){return this._clearing===true}set running(value){!this.running&&value===true&&requestAnimationFrame(this.run);this._running=value===true}get running(){return this._running===true}set pxratio(value){if(value>0)this._pxratio=value}get pxratio(){return this._pxratio||1}get perspectiveMatrix(){const fieldOfView=45*Math.PI/180;const aspect=this._size.w/this._size.h;const zNear=0.1;const zFar=100.0;const projectionMatrix=mat4.create();mat4.perspective(projectionMatrix,fieldOfView,aspect,zNear,zFar);return projectionMatrix}get modelViewMatrix(){const modelViewMatrix=mat4.create();mat4.translate(modelViewMatrix,modelViewMatrix,[-0.0,0.0,-1.]);return modelViewMatrix}static createShaderOfType(ctx,type,source){const shader=ctx.createShader(type);ctx.shaderSource(shader,source);ctx.compileShader(shader);if(!ctx.getShaderParameter(shader,ctx.COMPILE_STATUS)){console.log('An error occurred compiling the shaders: '+ctx.getShaderInfoLog(shader));ctx.deleteShader(shader);return null}return shader}}WTCGL.TYPE_INT=0;WTCGL.TYPE_FLOAT=1;WTCGL.TYPE_V2=2;WTCGL.TYPE_V3=3;WTCGL.TYPE_V4=4;WTCGL.IMAGETYPE_REGULAR=0;WTCGL.IMAGETYPE_TILE=1;WTCGL.IMAGETYPE_MIRROR=2;

console.clear();

var twodWebGL = new WTCGL(
document.querySelector('canvas#webgl'),
document.querySelector('script#vertexShader').textContent,
document.querySelector('script#fragmentShader').textContent,
window.innerWidth,
window.innerHeight,
2);

window.addEventListener('resize', function () {
  twodWebGL.resize(window.innerWidth, window.innerHeight);
});

// track mouse move
var mousepos = [0, 0];
var u_mousepos = twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
window.addEventListener('pointermove', function (e) {
  var ratio = window.innerHeight / window.innerWidth;
  if (window.innerHeight > window.innerWidth) {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1 * ratio;
  } else {
    mousepos[0] = (e.pageX - window.innerWidth / 2) / window.innerWidth / ratio;
    mousepos[1] = (e.pageY - window.innerHeight / 2) / window.innerHeight * -1;
  }
  twodWebGL.addUniform('mouse', WTCGL.TYPE_V2, mousepos);
});

// Load all our textures. We only initiate the instance once all images are loaded.
var textures = [
{
  name: 'noise',
  url: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/982762/noise.png',
  type: WTCGL.IMAGETYPE_TILE,
  img: null }];

var loadImage = function loadImage(imageObject) {
  var img = document.createElement('img');
  img.crossOrigin = "anonymous";

return new Promise(function (resolve, reject) {
    img.addEventListener('load', function (e) {
      imageObject.img = img;
      resolve(imageObject);
    });
    img.addEventListener('error', function (e) {
      reject(e);
    });
    img.src = imageObject.url;
  });
};
var loadTextures = function loadTextures(textures) {
  return new Promise(function (resolve, reject) {
    var loadTexture = function loadTexture(pointer) {
      if (pointer >= textures.length || pointer > 10) {
        resolve(textures);
        return;
      };
      var imageObject = textures[pointer];

};

loadTextures(textures).then(
function (result) {
  twodWebGL.initTextures();
  // twodWebGL.render();
  twodWebGL.running = true;
},
function (error) {
  console.log('error');
});

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