代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<title>Verge3D webgl - materials - shaders [custom]</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
</head>
<body>
<div id="container"></div>
<div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - shader material demo. featuring <a href="http://www.pouet.net/prod.php?which=52761" target="_blank" rel="noopener">Monjori by Mic</a></div>
<script id="fragment_shader4" type="x-shader/x-fragment">
uniform float time;
varying vec2 vUv;
void main(void) {
vec2 position = - 1.0 + 2.0 * vUv;
float red = abs(sin(position.x * position.y + time / 5.0));
float green = abs(sin(position.x * position.y + time / 4.0));
float blue = abs(sin(position.x * position.y + time / 3.0));
gl_FragColor = vec4(red, green, blue, 1.0);
}
</script>
<script id="fragment_shader3" type="x-shader/x-fragment">
uniform float time;
varying vec2 vUv;
void main(void) {
vec2 position = vUv;
float color = 0.0;
color += sin(position.x * cos(time / 15.0) * 80.0) + cos(position.y * cos(time / 15.0) * 10.0);
color += sin(position.y * sin(time / 10.0) * 40.0) + cos(position.x * sin(time / 25.0) * 40.0);
color += sin(position.x * sin(time / 5.0) * 10.0) + sin(position.y * sin(time / 35.0) * 80.0);
color *= sin(time / 10.0) * 0.5;
gl_FragColor = vec4(vec3(color, color * 0.5, sin(color + time / 3.0) * 0.75), 1.0);
}
</script>
<script id="fragment_shader2" type="x-shader/x-fragment">
uniform float time;
uniform sampler2D colorTexture;
varying vec2 vUv;
void main(void) {
vec2 position = - 1.0 + 2.0 * vUv;
float a = atan(position.y, position.x);
float r = sqrt(dot(position, position));
vec2 uv;
uv.x = cos(a) / r;
uv.y = sin(a) / r;
uv /= 10.0;
uv += time * 0.05;
vec3 color = texture2D(colorTexture, uv).rgb;
gl_FragColor = vec4(color * r * 1.5, 1.0);
}
</script>
<script id="fragment_shader1" type="x-shader/x-fragment">
uniform float time;
varying vec2 vUv;
void main(void) {
vec2 p = - 1.0 + 2.0 * vUv;
float a = time * 40.0;
float d, e, f, g = 1.0 / 40.0 ,h ,i ,r ,q;
e = 400.0 * (p.x * 0.5 + 0.5);
f = 400.0 * (p.y * 0.5 + 0.5);
i = 200.0 + sin(e * g + a / 150.0) * 20.0;
d = 200.0 + cos(f * g / 2.0) * 18.0 + cos(e * g) * 7.0;
r = sqrt(pow(abs(i - e), 2.0) + pow(abs(d - f), 2.0));
q = f / r;
e = (r * cos(q)) - a / 2.0;
f = (r * sin(q)) - a / 2.0;
d = sin(e * g) * 176.0 + sin(e * g) * 164.0 + r;
h = ((f + d) + a / 2.0) * g;
i = cos(h + r * p.x / 1.3) * (e + e + a) + cos(q * g * 6.0) * (r + h / 3.0);
h = sin(f * g) * 144.0 - sin(e * g) * 212.0 * p.x;
h = (h + (f - e) * q + sin(r - (a + h) / 7.0) * 10.0 + i / 4.0) * g;
i += cos(h * 2.3 * sin(a / 350.0 - q)) * 184.0 * sin(q - (r * 4.3 + a / 12.0) * g) + tan(r * g + h) * 184.0 * cos(r * g + h);
i = mod(i / 5.6, 256.0) / 64.0;
if (i < 0.0) i += 4.0;
if (i >= 2.0) i = 4.0 - i;
d = r / 350.0;
d += sin(d * d * 8.0) * 0.52;
f = (sin(a * g) + 1.0) / 2.0;
gl_FragColor = vec4(vec3(f * i / 1.6, i / 2.0 + d / 13.0, i) * d * p.x + vec3(i / 1.3 + d / 8.0, i / 2.0 + d / 18.0, i) * d * (1.0 - p.x), 1.0);
}
</script>
<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;
void main()
{
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="module">
import * as v3d from '../build/v3d.module.js';
import Stats from './jsm/libs/stats.module.js';
let stats;
let camera, scene, renderer, clock;
let uniforms1, uniforms2;
init();
animate();
function init() {
const container = document.getElementById('container');
camera = new v3d.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 3000);
camera.position.z = 4;
scene = new v3d.Scene();
clock = new v3d.Clock();
const geometry = new v3d.BoxBufferGeometry(0.75, 0.75, 0.75);
uniforms1 = {
"time": { value: 1.0 }
};
uniforms2 = {
"time": { value: 1.0 },
"colorTexture": { value: new v3d.TextureLoader().load('textures/disturb.jpg') }
};
uniforms2["colorTexture"].value.wrapS = uniforms2["colorTexture"].value.wrapT = v3d.RepeatWrapping;
const params = [
['fragment_shader1', uniforms1],
['fragment_shader2', uniforms2],
['fragment_shader3', uniforms1],
['fragment_shader4', uniforms1]
];
for (let i = 0; i < params.length; i++) {
const material = new v3d.ShaderMaterial({
uniforms: params[i][1],
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById(params[i][0]).textContent
});
const mesh = new v3d.Mesh(geometry, material);
mesh.position.x = i - (params.length - 1) / 2;
mesh.position.y = i % 2 - 0.5;
scene.add(mesh);
}
renderer = new v3d.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
container.appendChild(renderer.domElement);
stats = new Stats();
container.appendChild(stats.dom);
onWindowResize();
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
//
function animate() {
requestAnimationFrame(animate);
render();
stats.update();
}
function render() {
const delta = clock.getDelta();
uniforms1["time"].value += delta * 5;
uniforms2["time"].value = clock.elapsedTime;
for (let i = 0; i < scene.children.length; i++) {
const object = scene.children[i];
object.rotation.y += delta * 0.5 * (i % 2 ? 1 : - 1);
object.rotation.x += delta * 0.5 * (i % 2 ? - 1 : 1);
}
renderer.render(scene, camera);
}
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手