3D斑点

下载代码

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.);
    Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, col);
    
    
    gl_FragColor = vec4(col, 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,
window.devicePixelRatio);

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: 'http://www.jq22.com/gxwj/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