Skip to content

Commit 3e6ef46

Browse files
greggmangreggman
committed
add unity webgl2 example
1 parent 53c8108 commit 3e6ef46

File tree

1 file changed

+149
-0
lines changed

1 file changed

+149
-0
lines changed

‎unity-example/index2.html

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
6+
<title>Unity WebGL Player | SpinningCube</title>
7+
<link rel="shortcut icon" href="TemplateData/favicon.ico">
8+
<link rel="stylesheet" href="TemplateData/style.css">
9+
<script src="../src/virtual-webgl2.js"></script>
10+
<script>
11+
{
12+
function createProgram(gl, shaderSources) {
13+
const program = gl.createProgram();
14+
[gl.VERTEX_SHADER, gl.FRAGMENT_SHADER].forEach((type, ndx) => {
15+
const shader = gl.createShader(type);
16+
gl.shaderSource(shader, shaderSources[ndx]);
17+
gl.compileShader(shader);
18+
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
19+
console.error(gl.getShaderInfoLog(shader)); // eslint-disable-line
20+
}
21+
gl.attachShader(program, shader);
22+
});
23+
gl.bindAttribLocation(program, 0, 'position');
24+
gl.linkProgram(program);
25+
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
26+
console.error(gl.getProgramInfoLog(program)); // eslint-disable-line
27+
}
28+
29+
return program;
30+
}
31+
32+
class PostProcessingCompositor {
33+
constructor(canvas, type, contextAttributes) {
34+
this._ctx = canvas.getContext('2d');
35+
}
36+
composite(gl, canvasTexture, canvas, contextAttributes) {
37+
if (!this._initialized) {
38+
this._init(gl);
39+
}
40+
41+
const ctx = this._ctx;
42+
const width = canvas.width;
43+
const height = canvas.height;
44+
const maxWidth = Math.max(gl.canvas.width, width);
45+
const maxHeight = Math.max(gl.canvas.height, height);
46+
if (gl.canvas.width !== maxWidth || gl.canvas.height !== maxHeight) {
47+
gl.canvas.width = maxWidth;
48+
gl.canvas.height = maxHeight;
49+
}
50+
51+
gl.viewport(0, 0, width, height);
52+
53+
gl.useProgram(this._program);
54+
55+
const t = performance.now() * 0.001;
56+
57+
gl.uniformMatrix3fv(this._texMatLoc, false, [
58+
1 + Math.sin(t) * .01, 0, 0,
59+
0, 1 + Math.sin(t * 1.1) * .01, 0,
60+
0, 0, 1,
61+
62+
1 + Math.sin(t * 1.2) * .02, 0, 0,
63+
0, 1 + Math.sin(t * 1.3) * .02, 0,
64+
0, 0, 1,
65+
66+
1 + Math.sin(t * 1.4) * .03, 0, 0,
67+
0, 1 + Math.sin(t * 1.5) * .03, 0,
68+
0, 0, 1,
69+
70+
1, 0, 0,
71+
0, 1, 0,
72+
0, 0, 1,
73+
]);
74+
75+
gl.uniform1fv(this._timeLoc, [t * 1.1, t * 1.2, t * 1.3, 0]);
76+
gl.uniform1fv(this._periodLoc, [.11, -.12, .13, 0]);
77+
gl.uniform1fv(this._strengthLoc, [.01, .01, .01, 0]);
78+
79+
80+
// draw the drawingbuffer's texture to the offscreen canvas
81+
gl.bindTexture(gl.TEXTURE_2D, canvasTexture);
82+
gl.drawArrays(gl.TRIANGLES, 0, 6);
83+
84+
// copy it to target canvas
85+
ctx.globalCompositeOperation = 'copy';
86+
ctx.drawImage(
87+
gl.canvas,
88+
0, maxHeight - height, width, height, // src rect
89+
0, 0, width, height); // dest rect
90+
}
91+
_init(gl) {
92+
this._initialized = true;
93+
94+
const vs = `
95+
attribute vec4 position;
96+
varying vec2 v_texcoord;
97+
void main() {
98+
gl_Position = position;
99+
v_texcoord = position.xy * .5 + .5;
100+
}
101+
`;
102+
103+
const postProcessFs = `
104+
precision mediump float;
105+
varying vec2 v_texcoord;
106+
uniform sampler2D u_tex;
107+
uniform mat3 u_texMatrix[4];
108+
uniform float u_time[4];
109+
uniform float u_strength[4];
110+
uniform float u_period[4];
111+
void main() {
112+
gl_FragColor = vec4(
113+
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,
114+
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,
115+
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,
116+
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);
117+
}
118+
`;
119+
this._program = createProgram(gl, [vs, postProcessFs]);
120+
this._texMatLoc = gl.getUniformLocation(this._program, "u_texMatrix");
121+
this._timeLoc = gl.getUniformLocation(this._program, "u_time");
122+
this._strengthLoc = gl.getUniformLocation(this._program, "u_strength");
123+
this._periodLoc = gl.getUniformLocation(this._program, "u_period");
124+
}
125+
}
126+
virtualWebGL.setup({
127+
compositorCreator(...args) {
128+
return new PostProcessingCompositor(...args);
129+
},
130+
});
131+
}
132+
</script>
133+
<script src="TemplateData/UnityProgress.js"></script>
134+
<script src="Build/UnityLoader.js"></script>
135+
<script>
136+
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/SpinningCube.json", {onProgress: UnityProgress});
137+
</script>
138+
</head>
139+
<body>
140+
<div class="webgl-content">
141+
<div id="gameContainer" style="width: 960px; height: 600px"></div>
142+
<div class="footer">
143+
<div class="webgl-logo"></div>
144+
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
145+
<div class="title">SpinningCube (post processing outside unity)</div>
146+
</div>
147+
</div>
148+
</body>
149+
</html>

0 commit comments

Comments
 (0)