mirror of
https://github.com/greggman/twgl.js.git
synced 2025-12-08 19:26:07 +00:00
385 lines
12 KiB
HTML
385 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf8">
|
|
<!--
|
|
|
|
@license twgl.js Copyright (c) 2015, Gregg Tavares All Rights Reserved.
|
|
Available via the MIT license.
|
|
see: http://github.com/greggman/twgl.js for details
|
|
|
|
-->
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
|
<meta property="og:title" content="TWGL.js - tunnel" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:image" content="http://twgljs.org/examples/screenshots/tunnel.png" />
|
|
<meta property="og:description" content="TWGL.js - tunnel" />
|
|
<meta property="og:url" content="http://twgljs.org" />
|
|
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@greggman">
|
|
<meta name="twitter:creator" content="@greggman">
|
|
<meta name="twitter:domain" content="twgljs.org">
|
|
<meta name="twitter:title" content="TWGL.js - tunnel">
|
|
<meta name="twitter:url" content="http://twgljs.org/examples/tunnel.html">
|
|
<meta name="twitter:description" content="TWGL.js - tunnel">
|
|
<meta name="twitter:image:src" content="http://twgljs.org/examples/screenshots/tunnel.png">
|
|
|
|
<link href="/resources/images/twgljs-icon.png" rel="shortcut icon" type="image/png">
|
|
|
|
<title>twgl.js - tunnel</title>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
font-family: monospace;
|
|
height: 100%;
|
|
}
|
|
canvas {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
#b {
|
|
position: absolute;
|
|
top: 10px;
|
|
width: 100%;
|
|
text-align: center;
|
|
z-index: 2;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="c"></canvas>
|
|
<div id="b"><a href="http://twgljs.org">twgl.js</a> - tunnel</div>
|
|
</body>
|
|
<script id="tex-vs" type="notjs">
|
|
attribute vec4 a_position;
|
|
attribute vec2 a_texcoord;
|
|
varying vec2 v_texcoord;
|
|
uniform mat4 u_matrix;
|
|
void main() {
|
|
gl_Position = u_matrix * a_position;
|
|
v_texcoord = a_texcoord;
|
|
}
|
|
</script>
|
|
<script id="tex-fs" type="notjs">
|
|
precision mediump float;
|
|
|
|
varying vec2 v_texcoord;
|
|
uniform sampler2D u_texture;
|
|
uniform vec4 u_color;
|
|
uniform mat4 u_texMatrix;
|
|
uniform vec2 u_texMod;
|
|
uniform float u_fogNear;
|
|
uniform float u_fogFar;
|
|
uniform vec4 u_fogColor;
|
|
|
|
void main() {
|
|
float depth = gl_FragCoord.z / gl_FragCoord.w;
|
|
float fogFactor = smoothstep(u_fogNear, u_fogFar, depth);
|
|
vec2 uv = (u_texMatrix * vec4(v_texcoord, 0, 1)).xy;
|
|
vec4 outColor = u_color * texture2D(u_texture, mod(uv, u_texMod));
|
|
gl_FragColor = mix(outColor, u_fogColor, fogFactor);
|
|
}
|
|
</script>
|
|
<script id="vs" type="notjs">
|
|
uniform mat4 u_worldViewProjection;
|
|
uniform vec3 u_lightWorldPos;
|
|
uniform mat4 u_world;
|
|
uniform mat4 u_viewInverse;
|
|
uniform mat4 u_worldInverseTranspose;
|
|
|
|
attribute vec4 a_position;
|
|
attribute vec3 a_normal;
|
|
attribute vec2 a_texcoord;
|
|
|
|
varying vec4 v_position;
|
|
varying vec2 v_texCoord;
|
|
varying vec3 v_normal;
|
|
varying vec3 v_surfaceToLight;
|
|
varying vec3 v_surfaceToView;
|
|
|
|
void main() {
|
|
v_texCoord = a_texcoord;
|
|
v_position = (u_worldViewProjection * a_position);
|
|
v_normal = (u_worldInverseTranspose * vec4(a_normal, 0)).xyz;
|
|
v_surfaceToLight = u_lightWorldPos - (u_world * a_position).xyz;
|
|
v_surfaceToView = (u_viewInverse[3] - (u_world * a_position)).xyz;
|
|
gl_Position = v_position;
|
|
}
|
|
</script>
|
|
<script id="fs" type="notjs">
|
|
precision mediump float;
|
|
|
|
varying vec4 v_position;
|
|
varying vec2 v_texCoord;
|
|
varying vec3 v_normal;
|
|
varying vec3 v_surfaceToLight;
|
|
varying vec3 v_surfaceToView;
|
|
|
|
uniform vec4 u_lightColor;
|
|
uniform vec4 u_ambient;
|
|
uniform sampler2D u_diffuse;
|
|
uniform vec4 u_specular;
|
|
uniform float u_shininess;
|
|
uniform float u_specularFactor;
|
|
uniform float u_fogNear;
|
|
uniform float u_fogFar;
|
|
uniform vec4 u_fogColor;
|
|
|
|
vec4 lit(float l ,float h, float m) {
|
|
return vec4(1.0,
|
|
abs(l),
|
|
(l > 0.0) ? pow(max(0.0, h), m) : 0.0,
|
|
1.0);
|
|
}
|
|
|
|
void main() {
|
|
float depth = gl_FragCoord.z / gl_FragCoord.w;
|
|
float fogFactor = smoothstep(u_fogNear, u_fogFar, depth);
|
|
vec4 diffuseColor = texture2D(u_diffuse, v_texCoord);
|
|
vec3 a_normal = normalize(v_normal);
|
|
vec3 surfaceToLight = normalize(v_surfaceToLight);
|
|
vec3 surfaceToView = normalize(v_surfaceToView);
|
|
vec3 halfVector = normalize(surfaceToLight + surfaceToView);
|
|
vec4 litR = lit(dot(a_normal, surfaceToLight),
|
|
dot(a_normal, halfVector), u_shininess);
|
|
vec4 outColor = vec4((
|
|
u_lightColor * (diffuseColor * litR.y + diffuseColor * u_ambient +
|
|
u_specular * litR.z * u_specularFactor)).rgb,
|
|
diffuseColor.a);
|
|
gl_FragColor = mix(outColor, u_fogColor, fogFactor);
|
|
}
|
|
</script>
|
|
<script src="../3rdparty/chroma.min.js"></script>
|
|
<script type="module">
|
|
/*eslint no-unused-vars:0*/
|
|
import * as twgl from '../dist/7.x/twgl-full.module.js';
|
|
|
|
twgl.setDefaults({attribPrefix: "a_"});
|
|
const m4 = twgl.m4;
|
|
const gl = document.querySelector("#c").getContext("webgl");
|
|
const programInfo = twgl.createProgramInfo(gl, ["vs", "fs"]);
|
|
const texProgramInfo = twgl.createProgramInfo(gl, ["tex-vs", "tex-fs"]);
|
|
|
|
function createUnitQuadsBufferInfo(gl, across, down) {
|
|
const numQuads = across * down;
|
|
const numVertices = 4 * numQuads;
|
|
const numIndices = 6 * numQuads;
|
|
|
|
const positions = twgl.primitives.createAugmentedTypedArray(3, numVertices);
|
|
const ids = twgl.primitives.createAugmentedTypedArray(2, numVertices, Uint16Array);
|
|
const indices = twgl.primitives.createAugmentedTypedArray(3, numIndices, Uint16Array);
|
|
|
|
const verts = [
|
|
-1, -1, -1,
|
|
1, -1, 0,
|
|
-1, 1, 0,
|
|
1, 1, 1,
|
|
];
|
|
|
|
let ndx = 0;
|
|
for (let yy = 0; yy < down; ++yy) {
|
|
for (let xx = 0; xx < across; ++xx) {
|
|
positions.push(verts);
|
|
ids.push(xx, yy, xx, yy, xx, yy, xx, yy);
|
|
indices.push(ndx + 0, ndx + 1, ndx + 2, ndx + 2, ndx + 1, ndx + 3);
|
|
ndx += 4;
|
|
}
|
|
}
|
|
|
|
return twgl.createBufferInfoFromArrays(gl, {
|
|
position: positions,
|
|
id: ids,
|
|
indices: indices,
|
|
});
|
|
}
|
|
|
|
|
|
const segments = 20;
|
|
const cyAcross = 12;
|
|
const cyDown = 25;
|
|
const bufferInfo = twgl.primitives.createCubeBufferInfo(gl, 2);
|
|
const cylinderBufferInfo = twgl.primitives.createCylinderBufferInfo(gl, 1, 200, cyAcross, cyDown, false, false);
|
|
|
|
const fbSize = 1024;
|
|
const framebufferInfo = twgl.createFramebufferInfo(gl, undefined, fbSize, fbSize);
|
|
|
|
const tex = twgl.createTexture(gl, {
|
|
min: gl.NEAREST,
|
|
mag: gl.NEAREST,
|
|
src: [
|
|
255, 255, 255, 255,
|
|
192, 192, 192, 255,
|
|
192, 192, 192, 255,
|
|
255, 255, 255, 255,
|
|
],
|
|
});
|
|
|
|
const uniforms = {
|
|
u_lightWorldPos: [1, 8, -10],
|
|
u_lightColor: [0.2, 0.5, 1.0, 1],
|
|
u_ambient: [0, 0, 0, 1],
|
|
u_specular: [1, 1, 1, 1],
|
|
u_shininess: 50,
|
|
u_specularFactor: 1,
|
|
u_diffuse: tex,
|
|
u_fogColor: [1, 1, 1, 1],
|
|
u_fogNear: 5,
|
|
u_fogFar: 25,
|
|
u_world: m4.identity(),
|
|
};
|
|
|
|
const cylinderUniforms = {
|
|
u_texture: framebufferInfo.attachments[0],
|
|
u_matrix: m4.identity(),
|
|
u_color: [1, 1, 1, 1],
|
|
u_texMod: [1, 1],
|
|
u_texMatrix: m4.identity(),
|
|
u_fogColor: [1, 1, 1, 1],
|
|
u_fogNear: 0.1,
|
|
u_fogFar: 190,
|
|
};
|
|
|
|
function lerp(a, b, t) {
|
|
return a + (b - a) * t;
|
|
}
|
|
|
|
let useFramebuffer = true;
|
|
|
|
function switchMode() {
|
|
useFramebuffer = !useFramebuffer;
|
|
}
|
|
|
|
window.addEventListener('keypress', switchMode, false);
|
|
window.addEventListener('click', switchMode, false);
|
|
window.addEventListener('touchstart', switchMode, false);
|
|
|
|
let currentBaseColor;
|
|
let targetBaseColor;
|
|
let baseColorScale;
|
|
const colorFadeDuration = 5;
|
|
const colorChangeDuration = 10;
|
|
let colorFadeTimer;
|
|
let colorChangeTimer;
|
|
|
|
function pickNewColor() {
|
|
currentBaseColor = targetBaseColor || chroma.hsv(Math.random() * 360, 1, 1);
|
|
targetBaseColor = chroma.hsv(Math.random() * 360, 1, 1);
|
|
baseColorScale = chroma.scale([currentBaseColor, targetBaseColor]).mode('lab');
|
|
colorFadeTimer = colorFadeDuration;
|
|
colorChangeTimer = colorChangeDuration;
|
|
}
|
|
pickNewColor();
|
|
|
|
let then = 0;
|
|
function render(time) {
|
|
time *= 0.001;
|
|
const deltaTime = time - then;
|
|
then = time;
|
|
|
|
twgl.resizeCanvasToDisplaySize(gl.canvas);
|
|
|
|
let aspect;
|
|
if (useFramebuffer) {
|
|
twgl.bindFramebufferInfo(gl, framebufferInfo);
|
|
aspect = 1;
|
|
} else {
|
|
twgl.bindFramebufferInfo(gl, null);
|
|
aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
|
|
}
|
|
|
|
colorFadeTimer -= deltaTime;
|
|
colorChangeTimer -= deltaTime;
|
|
if (colorChangeTimer <= 0) {
|
|
pickNewColor();
|
|
}
|
|
|
|
const colorLerp = 1 - Math.max(0, colorFadeTimer / colorFadeDuration);
|
|
const fadeColor = baseColorScale(colorLerp);
|
|
uniforms.u_fogColor = fadeColor.gl();
|
|
const fc = uniforms.u_fogColor;
|
|
cylinderUniforms.u_fogColor = fc;
|
|
|
|
gl.cullFace(gl.BACK);
|
|
gl.enable(gl.CULL_FACE);
|
|
gl.enable(gl.DEPTH_TEST);
|
|
gl.clearColor(fc[0], fc[1], fc[2], fc[3]);
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
|
|
const projection = m4.perspective(30 * Math.PI / 180, aspect, 0.5, 30);
|
|
const eye = [1, 0, -16];
|
|
const target = [0, 0, 0];
|
|
const up = [0, 1, 0];
|
|
|
|
const camera = m4.lookAt(eye, target, up);
|
|
const view = m4.inverse(camera);
|
|
const viewProjection = m4.multiply(projection, view);
|
|
uniforms.u_viewInverse = camera;
|
|
|
|
gl.useProgram(programInfo.program);
|
|
twgl.setBuffersAndAttributes(gl, programInfo, bufferInfo);
|
|
for (let ii = 0; ii < 25; ++ii) {
|
|
const x = ii % 5;
|
|
const y = ii / 5 | 0;
|
|
const world = uniforms.u_world;
|
|
m4.identity(world);
|
|
m4.translate(world, [0, 0, 0], world);
|
|
m4.rotateY(world, time * 0.43, world);
|
|
m4.rotateZ(world, time * 0.37, world);
|
|
m4.translate(world, [x * 3 - 7 - 3, y * 3 - 5 - 3, 0], world);
|
|
m4.rotateX(world, time * 0.21 + ii, world);
|
|
m4.rotateY(world, time * 0.53 + ii, world);
|
|
|
|
uniforms.u_world = world;
|
|
uniforms.u_worldInverseTranspose = m4.transpose(m4.inverse(world));
|
|
uniforms.u_worldViewProjection = m4.multiply(viewProjection, world);
|
|
// uniforms.u_lightColor[0] = x / 4;
|
|
// uniforms.u_lightColor[1] = y / 4;
|
|
// uniforms.u_lightColor[2] = 1 - (x + y) / 8;
|
|
|
|
// uniforms.u_lightColor[0] = Math.max(x, y) / 5;
|
|
// uniforms.u_lightColor[1] = Math.max(y, x) / 5;
|
|
// uniforms.u_lightColor[2] = 1;// - (x + y) / 8;
|
|
uniforms.u_lightColor = [2, 2, 2, 1];
|
|
|
|
twgl.setUniforms(programInfo, uniforms);
|
|
twgl.drawBufferInfo(gl, bufferInfo);
|
|
}
|
|
|
|
if (useFramebuffer) {
|
|
twgl.bindFramebufferInfo(gl, null);
|
|
|
|
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
|
|
gl.cullFace(gl.FRONT);
|
|
gl.useProgram(texProgramInfo.program);
|
|
|
|
aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
|
|
const mat = cylinderUniforms.u_matrix;
|
|
m4.perspective(30 * Math.PI / 180, aspect, 0.5, 190, mat);
|
|
m4.translate(mat, [0, 0, -100], mat);
|
|
m4.rotateZ(mat, -time * 0.1, mat);
|
|
m4.rotateX(mat, Math.PI * 0.5, mat);
|
|
|
|
const cmat = cylinderUniforms.u_texMatrix;
|
|
m4.identity(cmat);
|
|
m4.translate(cmat, [time * 1, time * 2, 0], cmat);
|
|
m4.scale(cmat, [lerp(6, cyAcross, Math.sin(time) * 0.5 + 0.5), cyDown, 1], cmat);
|
|
m4.rotateZ(cmat, time * 0.1, cmat);
|
|
cylinderUniforms.u_texMod[0] = 0.5;
|
|
cylinderUniforms.u_texMod[1] = 0.5;
|
|
|
|
twgl.setBuffersAndAttributes(gl, texProgramInfo, cylinderBufferInfo);
|
|
twgl.setUniforms(texProgramInfo, cylinderUniforms);
|
|
twgl.drawBufferInfo(gl, cylinderBufferInfo);
|
|
}
|
|
|
|
requestAnimationFrame(render);
|
|
}
|
|
requestAnimationFrame(render);
|
|
|
|
</script>
|
|
</html>
|
|
|
|
|