最近抖音上比较火的volumeshader_bm是一个可以让大多手机或电脑卡死的网页
效果图：
![图片[1]-volumeshaderbm显卡测试源代码-可能资源网](https://www.kngzs.cn/wp-content/uploads/2022/09/QQ图片20220901220503-988x1024.jpg)
代码：
index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>可能yyds</title>
<link rel="shortcut icon" href="https://www.kngzs.cn/wp-content/uploads/2022/08/IMG_20220816_002826.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main">
<canvas id="c1" width="1024" height="1024">
<span>不支持canvas浏览器</span>
</canvas>
</div>
<button id="btn">配置</button>
<div id="config">
<textarea name="" id="kernel" cols="30" rows="10"></textarea>
<br />
<button id="apply">APPLY</button>
<button id="cancle">CANCLE</button>
</div>
<script src="script.js"></script>
</body>
</html>script.js
alert('是否开始测试你的设备？');
var cx, cy;
var glposition;
var glright;
var glforward;
var glup;
var glorigin;
var glx;
var gly;
var gllen;
var canvas;
var gl;
var date = new Date();
var md = 0, mx, my;
var t2, t1 = date.getTime();
var mx = 0, my = 0, mx1 = 0, my1 = 0, lasttimen = 0;
var ml = 0, mr = 0, mm = 0;
var len = 1.6;
var ang1 = 2.8;
var ang2 = 0.4;
var cenx = 0.0;
var ceny = 0.0;
var cenz = 0.0;
var KERNEL = "float kernal(vec3 ver){\n" +
" vec3 a;\n" +
"float b,c,d,e;\n" +
" a=ver;\n" +
" for(int i=0;i<5;i++){\n" +
" b=length(a);\n" +
" c=atan(a.y,a.x)*8.0;\n" +
" e=1.0/b;\n" +
" d=acos(a.z/b)*8.0;\n" +
" b=pow(b,8.0);\n" +
" a=vec3(b*sin(d)*cos(c),b*sin(d)*sin(c),b*cos(d))+ver;\n" +
" if(b>6.0){\n" +
" break;\n" +
" }\n" +
" }" +
" return 4.0-a.x*a.x-a.y*a.y-a.z*a.z;" +
"}";
var vertshade;
var fragshader;
var shaderProgram;
function ontimer() {
ang1 += 0.01;
draw();
window.requestAnimationFrame(ontimer);
}
document.addEventListener("mousedown",
function (ev) {
var oEvent = ev || event;
if (oEvent.button == 0) {
ml = 1;
mm = 0;
}
if (oEvent.button == 2) {
mr = 1;
mm = 0;
}
mx = oEvent.clientX;
my = oEvent.clientY;
},
false);
document.addEventListener("mouseup",
function (ev) {
var oEvent = ev || event;
if (oEvent.button == 0) {
ml = 0;
}
if (oEvent.button == 2) {
mr = 0;
}
},
false);
document.addEventListener("mousemove",
function (ev) {
var oEvent = ev || event;
if (ml == 1) {
ang1 += (oEvent.clientX - mx) * 0.002;
ang2 += (oEvent.clientY - my) * 0.002;
if (oEvent.clientX != mx || oEvent.clientY != my) {
mm = 1;
}
}
if (mr == 1) {
var l = len * 4.0 / (cx + cy);
cenx += l * (-(oEvent.clientX - mx) * Math.sin(ang1) - (oEvent.clientY - my) * Math.sin(ang2) * Math.cos(ang1));
ceny += l * ((oEvent.clientY - my) * Math.cos(ang2));
cenz += l * ((oEvent.clientX - mx) * Math.cos(ang1) - (oEvent.clientY - my) * Math.sin(ang2) * Math.sin(ang1));
if (oEvent.clientX != mx || oEvent.clientY != my) {
mm = 1;
}
}
mx = oEvent.clientX;
my = oEvent.clientY;
},
false);
document.addEventListener("mousewheel",
function (ev) {
ev.preventDefault();
var oEvent = ev || event;
len *= Math.exp(-0.001 * oEvent.wheelDelta);
},
false);
document.addEventListener("touchstart",
function (ev) {
var n = ev.touches.length;
if (n == 1) {
var oEvent = ev.touches[0];
mx = oEvent.clientX;
my = oEvent.clientY;
}
else if (n == 2) {
var oEvent = ev.touches[0];
mx = oEvent.clientX;
my = oEvent.clientY;
oEvent = ev.touches[1];
mx1 = oEvent.clientX;
my1 = oEvent.clientY;
}
lasttimen = n;
},
false);
document.addEventListener("touchend",
function (ev) {
var n = ev.touches.length;
if (n == 1) {
var oEvent = ev.touches[0];
mx = oEvent.clientX;
my = oEvent.clientY;
}
else if (n == 2) {
var oEvent = ev.touches[0];
mx = oEvent.clientX;
my = oEvent.clientY;
oEvent = ev.touches[1];
mx1 = oEvent.clientX;
my1 = oEvent.clientY;
}
lasttimen = n;
},
false);
document.addEventListener("touchmove",
function (ev) {
ev.preventDefault();
var n = ev.touches.length;
if (n == 1 && lasttimen == 1) {
var oEvent = ev.touches[0];
ang1 += (oEvent.clientX - mx) * 0.002;
ang2 += (oEvent.clientY - my) * 0.002;
mx = oEvent.clientX;
my = oEvent.clientY;
}
else if (n == 2) {
var oEvent = ev.touches[0];
var oEvent1 = ev.touches[1];
var l = len * 2.0 / (cx + cy), l1;
cenx += l * (-(oEvent.clientX + oEvent1.clientX - mx - mx1) * Math.sin(ang1) - (oEvent.clientY + oEvent1.clientY - my - my1) * Math.sin(ang2) * Math.cos(ang1));
ceny += l * ((oEvent.clientY + oEvent1.clientY - my - my1) * Math.cos(ang2));
cenz += l * ((oEvent.clientX + oEvent1.clientX - mx - mx1) * Math.cos(ang1) - (oEvent.clientY + oEvent1.clientY - my - my1) * Math.sin(ang2) * Math.sin(ang1));
l1 = Math.sqrt((mx - mx1) * (mx - mx1) + (my - my1) * (my - my1) + 1.0);
mx = oEvent.clientX;
my = oEvent.clientY;
mx1 = oEvent1.clientX;
my1 = oEvent1.clientY;
l = Math.sqrt((mx - mx1) * (mx - mx1) + (my - my1) * (my - my1) + 1.0);
len *= l1 / l;
}
lasttimen = n;
},
false);
document.oncontextmenu = function (event) {
if (mm == 1) {
event.preventDefault();
}
};
function draw() {
date = new Date();
var t2 = date.getTime();
//ang1 += (t2 - t1)*0.001;
t1 = t2;
//ang1 += 0.1;
gl.uniform1f(glx, cx * 2.0 / (cx + cy));
gl.uniform1f(gly, cy * 2.0 / (cx + cy));
gl.uniform1f(gllen, len);
gl.uniform3f(glorigin, len * Math.cos(ang1) * Math.cos(ang2) + cenx, len * Math.sin(ang2) + ceny, len * Math.sin(ang1) * Math.cos(ang2) + cenz);
gl.uniform3f(glright, Math.sin(ang1), 0, -Math.cos(ang1));
gl.uniform3f(glup, -Math.sin(ang2) * Math.cos(ang1), Math.cos(ang2), -Math.sin(ang2) * Math.sin(ang1));
gl.uniform3f(glforward, -Math.cos(ang1) * Math.cos(ang2), -Math.sin(ang2), -Math.sin(ang1) * Math.cos(ang2));
gl.drawArrays(gl.TRIANGLES, 0, 6);
gl.finish();
}
window.onresize = function () {
cx = document.body.clientWidth;
cy = document.body.clientHeight;
if (cx > cy) {
cx = cy;
}
else {
cy = cx;
}
document.getElementById("main").style.width = 1024 + "px";
document.getElementById("main").style.height = 1024 + "px";
document.getElementById("main").style.transform = "scale(" + cx / 1024 + "," + cy / 1024 + ")";
}
window.onload = function () {
cx = document.body.clientWidth;
cy = document.body.clientHeight;
if (cx > cy) {
cx = cy;
}
else {
cy = cx;
}
document.getElementById("main").style.width = 1024 + "px";
document.getElementById("main").style.height = 1024 + "px";
document.getElementById("main").style.transform = "scale(" + cx / 1024 + "," + cy / 1024 + ")";
var positions = [-1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0];
var VSHADER_SOURCE =
"#version 100 \n" +
"precision highp float;\n" +
"attribute vec4 position;" +
"varying vec3 dir, localdir;" +
"uniform vec3 right, forward, up, origin;" +
"uniform float x,y;" +
"void main() {" +
" gl_Position = position; " +
" dir = forward + right * position.x*x + up * position.y*y;" +
" localdir.x = position.x*x;" +
" localdir.y = position.y*y;" +
" localdir.z = -1.0;" +
"} ";
var FSHADER_SOURCE =
"#version 100 \n" +
"#define PI 3.14159265358979324\n" +
"#define M_L 0.3819660113\n" +
"#define M_R 0.6180339887\n" +
"#define MAXR 8\n" +
"#define SOLVER 8\n" +
"precision highp float;\n" +
"float kernal(vec3 ver)\n;" +
"uniform vec3 right, forward, up, origin;\n" +
"varying vec3 dir, localdir;\n" +
"uniform float len;\n" +
"vec3 ver;\n" +
"int sign;" +
"float v, v1, v2;\n" +
"float r1, r2, r3, r4, m1, m2, m3, m4;\n" +
"vec3 n, reflect;\n" +
"const float step = 0.002;\n" +
"vec3 color;\n" +
"void main() {\n" +
" color.r=0.0;\n" +
" color.g=0.0;\n" +
" color.b=0.0;\n" +
" sign=0;" +
" v1 = kernal(origin + dir * (step*len));\n" +
" v2 = kernal(origin);\n" +
" for (int k = 2; k < 1002; k++) {\n" +
" ver = origin + dir * (step*len*float(k));\n" +
" v = kernal(ver);\n" +
" if (v > 0.0 && v1 < 0.0) {\n" +
" r1 = step * len*float(k - 1);\n" +
" r2 = step * len*float(k);\n" +
" m1 = kernal(origin + dir * r1);\n" +
" m2 = kernal(origin + dir * r2);\n" +
" for (int l = 0; l < SOLVER; l++) {\n" +
" r3 = r1 * 0.5 + r2 * 0.5;\n" +
" m3 = kernal(origin + dir * r3);\n" +
" if (m3 > 0.0) {\n" +
" r2 = r3;\n" +
" m2 = m3;\n" +
" }\n" +
" else {\n" +
" r1 = r3;\n" +
" m1 = m3;\n" +
" }\n" +
" }\n" +
" if (r3 < 2.0 * len) {\n" +
" sign=1;" +
" break;\n" +
" }\n" +
" }\n" +
" if (v < v1&&v1>v2&&v1 < 0.0 && (v1*2.0 > v || v1 * 2.0 > v2)) {\n" +
" r1 = step * len*float(k - 2);\n" +
" r2 = step * len*(float(k) - 2.0 + 2.0*M_L);\n" +
" r3 = step * len*(float(k) - 2.0 + 2.0*M_R);\n" +
" r4 = step * len*float(k);\n" +
" m2 = kernal(origin + dir * r2);\n" +
" m3 = kernal(origin + dir * r3);\n" +
" for (int l = 0; l < MAXR; l++) {\n" +
" if (m2 > m3) {\n" +
" r4 = r3;\n" +
" r3 = r2;\n" +
" r2 = r4 * M_L + r1 * M_R;\n" +
" m3 = m2;\n" +
" m2 = kernal(origin + dir * r2);\n" +
" }\n" +
" else {\n" +
" r1 = r2;\n" +
" r2 = r3;\n" +
" r3 = r4 * M_R + r1 * M_L;\n" +
" m2 = m3;\n" +
" m3 = kernal(origin + dir * r3);\n" +
" }\n" +
" }\n" +
" if (m2 > 0.0) {\n" +
" r1 = step * len*float(k - 2);\n" +
" r2 = r2;\n" +
" m1 = kernal(origin + dir * r1);\n" +
" m2 = kernal(origin + dir * r2);\n" +
" for (int l = 0; l < SOLVER; l++) {\n" +
" r3 = r1 * 0.5 + r2 * 0.5;\n" +
" m3 = kernal(origin + dir * r3);\n" +
" if (m3 > 0.0) {\n" +
" r2 = r3;\n" +
" m2 = m3;\n" +
" }\n" +
" else {\n" +
" r1 = r3;\n" +
" m1 = m3;\n" +
" }\n" +
" }\n" +
" if (r3 < 2.0 * len&&r3> step*len) {\n" +
" sign=1;" +
" break;\n" +
" }\n" +
" }\n" +
" else if (m3 > 0.0) {\n" +
" r1 = step * len*float(k - 2);\n" +
" r2 = r3;\n" +
" m1 = kernal(origin + dir * r1);\n" +
" m2 = kernal(origin + dir * r2);\n" +
" for (int l = 0; l < SOLVER; l++) {\n" +
" r3 = r1 * 0.5 + r2 * 0.5;\n" +
" m3 = kernal(origin + dir * r3);\n" +
" if (m3 > 0.0) {\n" +
" r2 = r3;\n" +
" m2 = m3;\n" +
" }\n" +
" else {\n" +
" r1 = r3;\n" +
" m1 = m3;\n" +
" }\n" +
" }\n" +
" if (r3 < 2.0 * len&&r3> step*len) {\n" +
" sign=1;" +
" break;\n" +
" }\n" +
" }\n" +
" }\n" +
" v2 = v1;\n" +
" v1 = v;\n" +
" }\n" +
" if (sign==1) {\n" +
" ver = origin + dir*r3 ;\n" +
" r1=ver.x*ver.x+ver.y*ver.y+ver.z*ver.z;" +
" n.x = kernal(ver - right * (r3*0.001)) - kernal(ver + right * (r3*0.001));\n" +
" n.y = kernal(ver - up * (r3*0.001)) - kernal(ver + up * (r3*0.001));\n" +
" n.z = kernal(ver + forward * (r3*0.001)) - kernal(ver - forward * (r3*0.001));\n" +
" r3 = n.x*n.x+n.y*n.y+n.z*n.z;\n" +
" n = n * (1.0 / sqrt(r3));\n" +
" ver = localdir;\n" +
" r3 = ver.x*ver.x+ver.y*ver.y+ver.z*ver.z;\n" +
" ver = ver * (1.0 / sqrt(r3));\n" +
" reflect = n * (-2.0*dot(ver, n)) + ver;\n" +
" r3 = reflect.x*0.276+reflect.y*0.920+reflect.z*0.276;\n" +
" r4 = n.x*0.276+n.y*0.920+n.z*0.276;\n" +
" r3 = max(0.0,r3);\n" +
" r3 = r3 * r3*r3*r3;\n" +
" r3 = r3 * 0.45 + r4 * 0.25 + 0.3;\n" +
" n.x = sin(r1*10.0)*0.5+0.5;\n" +
" n.y = sin(r1*10.0+2.05)*0.5+0.5;\n" +
" n.z = sin(r1*10.0-2.05)*0.5+0.5;\n" +
" color = n*r3;\n" +
" }\n" +
" gl_FragColor = vec4(color.x, color.y, color.z, 1.0);" +
"}";
canvas = document.getElementById('c1');
gl = canvas.getContext('webgl');
vertshader = gl.createShader(gl.VERTEX_SHADER);
fragshader = gl.createShader(gl.FRAGMENT_SHADER);
shaderProgram = gl.createProgram();
gl.shaderSource(vertshader, VSHADER_SOURCE);
gl.compileShader(vertshader);
var infov = gl.getShaderInfoLog(vertshader);
gl.shaderSource(fragshader, FSHADER_SOURCE + KERNEL);
gl.compileShader(fragshader);
var infof = gl.getShaderInfoLog(fragshader);
gl.attachShader(shaderProgram, vertshader);
gl.attachShader(shaderProgram, fragshader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
var info = gl.getProgramInfoLog(shaderProgram);
throw 'Could not compile WebGL program. \n\n' + infov + infof + info;
}
glposition = gl.getAttribLocation(shaderProgram, 'position');
glright = gl.getUniformLocation(shaderProgram, 'right');
glforward = gl.getUniformLocation(shaderProgram, 'forward');
glup = gl.getUniformLocation(shaderProgram, 'up');
glorigin = gl.getUniformLocation(shaderProgram, 'origin');
glx = gl.getUniformLocation(shaderProgram, 'x');
gly = gl.getUniformLocation(shaderProgram, 'y');
gllen = gl.getUniformLocation(shaderProgram, 'len');
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.vertexAttribPointer(glposition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(glposition);
gl.viewport(0, 0, 1024, 1024);
draw();
window.requestAnimationFrame(ontimer);
document.getElementById("kernel").value = KERNEL;
document.getElementById("btn").addEventListener("click", function () {
var state = this.innerText == "CONFIG";
this.innerText = state ? "HIDE" : "CONFIG";
document.getElementById("config").style.display = state ? "inline" : "none";
});
document.getElementById("apply").addEventListener("click", function () {
KERNEL = document.getElementById("kernel").value;
gl.shaderSource(fragshader, FSHADER_SOURCE + KERNEL);
gl.compileShader(fragshader);
var infof = gl.getShaderInfoLog(fragshader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
var info = gl.getProgramInfoLog(shaderProgram);
alert(infof + info);
}
glposition = gl.getAttribLocation(shaderProgram, 'position');
glright = gl.getUniformLocation(shaderProgram, 'right');
glforward = gl.getUniformLocation(shaderProgram, 'forward');
glup = gl.getUniformLocation(shaderProgram, 'up');
glorigin = gl.getUniformLocation(shaderProgram, 'origin');
glx = gl.getUniformLocation(shaderProgram, 'x');
gly = gl.getUniformLocation(shaderProgram, 'y');
gllen = gl.getUniformLocation(shaderProgram, 'len');
});
document.getElementById("cancle").addEventListener("click", function () {
document.getElementById("kernel").value = KERNEL;
});
}
console.log("\n %c \u5c0f\u67ab\u7f51\u7edc %c \u0068\u0074\u0074\u0070\u0073\u003a\u002f\u002f\u0077\u0077\u0077\u002e\u0078\u0066\u0061\u0062\u0065\u002e\u0063\u006f\u006d\u002f \n\n","color: #fadfa3; background: #030307; padding:5px 0;","background: #fadfa3; padding:5px 0;");style.css
body {
background: #111013;
height: 100vh;
overflow-x: hidden;
overflow-y: hidden;
}
#c1 {
background: #111013;
}
#btn {
position: fixed;
left: 0px;
top: 0px;
}
#c1 {
position: fixed;
left: 0px;
top: 0px;
}
#main {
transform-origin: 0px 0px;
position: fixed;
left: 0px;
top: 0px;
}
#config {
position: fixed;
left: 0px;
top: 30px;
display: none;
}下载地址：
THE END
暂无评论内容