mirror of
https://github.com/greggman/virtual-webgl.git
synced 2025-12-08 19:46:06 +00:00
150 lines
5.6 KiB
HTML
150 lines
5.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<title>Unity WebGL Player | SpinningCube</title>
|
|
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
|
<link rel="stylesheet" href="TemplateData/style.css">
|
|
<script src="../src/virtual-webgl.js"></script>
|
|
<script>
|
|
{
|
|
function createProgram(gl, shaderSources) {
|
|
const program = gl.createProgram();
|
|
[gl.VERTEX_SHADER, gl.FRAGMENT_SHADER].forEach((type, ndx) => {
|
|
const shader = gl.createShader(type);
|
|
gl.shaderSource(shader, shaderSources[ndx]);
|
|
gl.compileShader(shader);
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
console.error(gl.getShaderInfoLog(shader)); // eslint-disable-line
|
|
}
|
|
gl.attachShader(program, shader);
|
|
});
|
|
gl.bindAttribLocation(program, 0, 'position');
|
|
gl.linkProgram(program);
|
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
console.error(gl.getProgramInfoLog(program)); // eslint-disable-line
|
|
}
|
|
|
|
return program;
|
|
}
|
|
|
|
class PostProcessingCompositor {
|
|
constructor(canvas, type, contextAttributes) {
|
|
this._ctx = canvas.getContext('2d');
|
|
}
|
|
composite(gl, canvasTexture, canvas, contextAttributes) {
|
|
if (!this._initialized) {
|
|
this._init(gl);
|
|
}
|
|
|
|
const ctx = this._ctx;
|
|
const width = canvas.width;
|
|
const height = canvas.height;
|
|
const maxWidth = Math.max(gl.canvas.width, width);
|
|
const maxHeight = Math.max(gl.canvas.height, height);
|
|
if (gl.canvas.width !== maxWidth || gl.canvas.height !== maxHeight) {
|
|
gl.canvas.width = maxWidth;
|
|
gl.canvas.height = maxHeight;
|
|
}
|
|
|
|
gl.viewport(0, 0, width, height);
|
|
|
|
gl.useProgram(this._program);
|
|
|
|
const t = performance.now() * 0.001;
|
|
|
|
gl.uniformMatrix3fv(this._texMatLoc, false, [
|
|
1 + Math.sin(t) * .01, 0, 0,
|
|
0, 1 + Math.sin(t * 1.1) * .01, 0,
|
|
0, 0, 1,
|
|
|
|
1 + Math.sin(t * 1.2) * .02, 0, 0,
|
|
0, 1 + Math.sin(t * 1.3) * .02, 0,
|
|
0, 0, 1,
|
|
|
|
1 + Math.sin(t * 1.4) * .03, 0, 0,
|
|
0, 1 + Math.sin(t * 1.5) * .03, 0,
|
|
0, 0, 1,
|
|
|
|
1, 0, 0,
|
|
0, 1, 0,
|
|
0, 0, 1,
|
|
]);
|
|
|
|
gl.uniform1fv(this._timeLoc, [t * 1.1, t * 1.2, t * 1.3, 0]);
|
|
gl.uniform1fv(this._periodLoc, [.11, -.12, .13, 0]);
|
|
gl.uniform1fv(this._strengthLoc, [.01, .01, .01, 0]);
|
|
|
|
|
|
// draw the drawingbuffer's texture to the offscreen canvas
|
|
gl.bindTexture(gl.TEXTURE_2D, canvasTexture);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
|
|
// copy it to target canvas
|
|
ctx.globalCompositeOperation = 'copy';
|
|
ctx.drawImage(
|
|
gl.canvas,
|
|
0, maxHeight - height, width, height, // src rect
|
|
0, 0, width, height); // dest rect
|
|
}
|
|
_init(gl) {
|
|
this._initialized = true;
|
|
|
|
const vs = `
|
|
attribute vec4 position;
|
|
varying vec2 v_texcoord;
|
|
void main() {
|
|
gl_Position = position;
|
|
v_texcoord = position.xy * .5 + .5;
|
|
}
|
|
`;
|
|
|
|
const postProcessFs = `
|
|
precision mediump float;
|
|
varying vec2 v_texcoord;
|
|
uniform sampler2D u_tex;
|
|
uniform mat3 u_texMatrix[4];
|
|
uniform float u_time[4];
|
|
uniform float u_strength[4];
|
|
uniform float u_period[4];
|
|
void main() {
|
|
gl_FragColor = vec4(
|
|
texture2D(u_tex, (u_texMatrix[0] * vec3(v_texcoord, 1)).xy + sin(gl_FragCoord.y * u_period[0] + u_time[0]) * u_strength[0]).r,
|
|
texture2D(u_tex, (u_texMatrix[1] * vec3(v_texcoord, 1)).xy + sin(gl_FragCoord.y * u_period[1] + u_time[1]) * u_strength[1]).g,
|
|
texture2D(u_tex, (u_texMatrix[2] * vec3(v_texcoord, 1)).xy + sin(gl_FragCoord.y * u_period[2] + u_time[2]) * u_strength[2]).b,
|
|
texture2D(u_tex, (u_texMatrix[3] * vec3(v_texcoord, 1)).xy + sin(gl_FragCoord.y * u_period[3] + u_time[3]) * u_strength[3]).a);
|
|
}
|
|
`;
|
|
this._program = createProgram(gl, [vs, postProcessFs]);
|
|
this._texMatLoc = gl.getUniformLocation(this._program, "u_texMatrix");
|
|
this._timeLoc = gl.getUniformLocation(this._program, "u_time");
|
|
this._strengthLoc = gl.getUniformLocation(this._program, "u_strength");
|
|
this._periodLoc = gl.getUniformLocation(this._program, "u_period");
|
|
}
|
|
}
|
|
virtualWebGL.setup({
|
|
disableWebGL2: true,
|
|
compositorCreator(...args) {
|
|
return new PostProcessingCompositor(...args);
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
<script src="TemplateData/UnityProgress.js"></script>
|
|
<script src="Build/UnityLoader.js"></script>
|
|
<script>
|
|
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/SpinningCube.json", {onProgress: UnityProgress});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="webgl-content">
|
|
<div id="gameContainer" style="width: 960px; height: 600px"></div>
|
|
<div class="footer">
|
|
<div class="webgl-logo"></div>
|
|
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
|
|
<div class="title">SpinningCube (post processing outside unity)</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |