Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html { overflow: hidden; touch-action: none; content-zooming: none; } body { position: absolute; margin: 0; padding: 0; background: #000; width: 100%; height: 100%; } #canvas { width: 100%; height: 100%; background: #000; position: absolute; } #source { visibility: hidden; }
JavaScript
"use strict"; { // webGL canvas const canvas = { init(options) { // set webGL context this.elem = document.querySelector("canvas"); const gl = (this.gl = this.elem.getContext("webgl", options) || this.elem.getContext("experimental-webgl", options)); if (!gl) return false; // compile shaders const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource( vertexShader, ` precision highp float; const float FOV = 250.0; attribute vec3 aPosition, aColor; uniform vec2 uResolution; uniform vec4 uRotation; varying vec3 color; void main() { // 3D Rotations float tx, ty, tz; tx = uRotation.z * aPosition.x - uRotation.w * aPosition.z; tz = uRotation.w * aPosition.x + uRotation.z * aPosition.z; ty = uRotation.x * aPosition.y - uRotation.y * tz; tz = uRotation.y * aPosition.y + uRotation.x * tz; // 3D to 2D projection float s = FOV / (FOV - tz); float x = s > 0.0 ? tx * s : 0.0; float y = s > 0.0 ? ty * s : 0.0; gl_Position = vec4( ( (uResolution.x * 0.5 + x) / uResolution.x * 2.0) - 1.0, ( (-uResolution.y * 0.5 -y) / uResolution.y * 2.0) + 1.0, s > 0.0 ? 0.0 : 10.0, 1.0 ); color = aColor; } ` ); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource( fragmentShader, ` precision highp float; varying vec3 color; void main() { gl_FragColor = vec4(color.r, color.g, color.b, 1.0); } ` ); gl.compileShader(fragmentShader); const program = (this.program = gl.createProgram()); gl.attachShader(this.program, vertexShader); gl.attachShader(this.program, fragmentShader); gl.linkProgram(this.program); gl.useProgram(this.program); // resolution this.uResolution = gl.getUniformLocation(this.program, "uResolution"); gl.enableVertexAttribArray(this.uResolution); // canvas resize this.resize(); window.addEventListener("resize", () => this.resize(), false); return gl; }, buffer(attribute) { const buffer = { attribute: gl.getAttribLocation(canvas.program, attribute), buffer: gl.createBuffer(), load (data, usage, size) { gl.bindBuffer(gl.ARRAY_BUFFER, this.buffer); gl.vertexAttribPointer(this.attribute, size, gl.FLOAT, false, 0, 0); gl.bufferData(gl.ARRAY_BUFFER, data, usage); } }; gl.enableVertexAttribArray(buffer.attribute); return buffer; }, resize() { this.width = this.elem.width = this.elem.offsetWidth; this.height = this.elem.height = this.elem.offsetHeight; this.gl.uniform2f(this.uResolution, this.width, this.height); this.gl.viewport( 0, 0, this.gl.drawingBufferWidth, this.gl.drawingBufferHeight ); } }; // init pointer const pointer = { init(canvas) { this.x = canvas.width * 0.5; this.y = canvas.height * 0.5; this.ex = this.x; this.ey = this.y * 2; ["mousemove", "touchstart", "touchmove"].forEach((event, touch) => { document.addEventListener( event, e => { if (touch) { e.preventDefault(); this.x = e.targetTouches[0].clientX; this.y = e.targetTouches[0].clientY; } else { this.x = e.clientX; this.y = e.clientY; } }, false ); }); }, ease(step) { this.ex += (this.x - this.ex) * step; this.ey += (this.y - this.ey) * step; } }; // init webGL canvas const gl = canvas.init({ alpha: false, stencil: false, antialias: true, depth: false }); // additive blending "lighter" gl.blendFunc(gl.SRC_ALPHA, gl.ONE); gl.enable(gl.BLEND); // init pointer pointer.init(canvas); // init image const img = new Image(); img.addEventListener("load", e => load(img)); img.src = document.getElementById("source").src; // rotation matrix const uRotation = gl.getUniformLocation(canvas.program, "uRotation"); gl.enableVertexAttribArray(uRotation); // init colors and geometry let nVertices = 0; const load = img => { ////////////////////// const step = 3; const depth = 75; ////////////////////// const image = document.createElement("canvas"); const width = (image.width = img.width); const height = (image.height = img.height); const ctx = image.getContext("2d"); ctx.drawImage(img, 0, 0); const bitmap = ctx.getImageData(0, 0, width, height).data; const vertices = []; const colors = []; // buffers const position = canvas.buffer("aPosition"); const color = canvas.buffer("aColor"); // push vertex const push = (x, y) => { const p = (y * width + x) * 4; const r = bitmap[p + 0] / 256; const g = bitmap[p + 1] / 256; const b = bitmap[p + 2] / 256; colors.push(r); colors.push(g); colors.push(b); vertices.push(x - width * 0.5); vertices.push(y - height * 0.5); vertices.push(depth * (0.34 * r + 0.5 * g + 0.16 * b)); }; // init the line let d = 1; for (let y = 0; y < height; y += step) { if (d > 0) { for (let x = 0; x < width; x += step) push(x, y); } else { for (let x = width; x > 0; x -= step) push(x, y); } d = -d; } // load buffers to gpu nVertices = Math.floor(colors.length / 3); position.load(new Float32Array(vertices), gl.STATIC_DRAW, 3); color.load(new Float32Array(colors), gl.STATIC_DRAW, 3); // start animation loop requestAnimationFrame(run); }; // main animation loop const run = () => { requestAnimationFrame(run); pointer.ease(0.05); // rotation const ry = (pointer.ex - canvas.width * 0.5) / (canvas.width * 0.33); const rx = (pointer.ey - canvas.height * 0.5) / (canvas.height * 0.33); gl.uniform4f(uRotation, Math.cos(rx), Math.sin(rx), Math.cos(ry), Math.sin(ry)); // draw line strip gl.drawArrays(gl.LINE_STRIP, 0, nVertices); }; }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>图片3d线条转换-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号