Skip to content

Commit 661cad6

Browse files
greggmangreggman
committed
use shared editor
1 parent 0e95ec3 commit 661cad6

32 files changed

+1765
-226
lines changed

‎Gruntfile.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ module.exports = function(grunt) {
3030
lib: {
3131
src: [
3232
'webgl/resources/webgl-utils.js',
33-
'webgl/resources/webgl-lessons-helper.js',
33+
'webgl/resources/lessons-helper.js',
3434
'webgl/resources/flattened-primitives.js',
3535
'webgl/resources/2d-math.js',
3636
'webgl/resources/3d-math.js',

‎webgl/frustum-diagram.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
-->
8787
<script src="resources/webgl-utils.js"></script>
8888
<script src="resources/webgl-lessons-ui.js"></script>
89-
<script src="resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
89+
<script src="resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
9090
<script src="resources/twgl-full.min.js"></script>
9191
<script>
9292
"use strict";

‎webgl/lessons/resources/3d-in-canvas.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ <h1 class="description">3D in canvas</h1>
2121
for webgl-utils, m3, m4, and webgl-lessons-ui.
2222
-->
2323
<script src="../../resources/webgl-utils.js"></script>
24-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
24+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
2525
<script src="../../resources/m4.js"></script>
2626
<script>
2727
"use strict";

‎webgl/lessons/resources/3d-in-webgl.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ <h1 class="description">3D in WebGL</h1>
2020
for webgl-utils, m3, m4, and webgl-lessons-ui.
2121
-->
2222
<script src="../../resources/webgl-utils.js"></script>
23-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
23+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
2424
<script src="../../resources/m4.js"></script>
2525
<script>
2626
"use strict";

‎webgl/lessons/resources/bezier-curve-diagram.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1 class="description">Bezier Curve Diagram</h1>
2222
-->
2323
<script src="../../resources/webgl-lessons-ui.js"></script>
2424
<script src="../../resources/webgl-utils.js"></script>
25-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
25+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
2626
<script>
2727
"use strict";
2828

‎webgl/lessons/resources/bezier-curve-edit.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ <h1 class="description">Two Bezier Curve Edit</h1>
2525
-->
2626
<script src="../../resources/webgl-lessons-ui.js"></script>
2727
<script src="../../resources/webgl-utils.js"></script>
28-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
28+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
2929
<script>
3030
"use strict";
3131

‎webgl/lessons/resources/camera-move-camera.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1 class="description">Moving the Camera</h1>
2626
for webgl-utils, m3, m4, and webgl-lessons-ui.
2727
-->
2828
<script src="../../resources/webgl-utils.js"></script>
29-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
29+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3030
<script src="bonsai-0.4.1.min.js"></script>
3131
<script>
3232
"use strict";

‎webgl/lessons/resources/cross-product-diagram.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
</div>
1515
</body>
1616
<script src="../../resources/twgl-full.min.js"></script>
17-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
17+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
1818
<script id="vertexColorVertexShader" type="text/something-not-javascript">
1919
attribute vec4 position;
2020
attribute vec4 color;

‎webgl/lessons/resources/cube-normals.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
for webgl-utils, m3, m4, and webgl-lessons-ui.
2828
-->
2929
<script src="../../resources/webgl-utils.js"></script>
30-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
30+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3131
<script src="../../resources/twgl-full.min.js"></script>
3232
<script id="vertexColorVertexShader" type="text/something-not-javascript">
3333
attribute vec4 position;

‎webgl/lessons/resources/directional-lighting.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
-->
2929
<script src="../../resources/webgl-lessons-ui.js"></script>
3030
<script src="../../resources/webgl-utils.js"></script>
31-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
31+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3232
<script src="../../resources/m3.js"></script>
3333
<script src="diagram.js"></script>
3434
<script>

‎webgl/lessons/resources/dot-product.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@
171171
</body>
172172
</html>
173173
<script src="../../resources/twgl-full.min.js"></script>
174-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
174+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
175175
<script>
176176
"use strict";
177177
var m4 = twgl.m4;

‎webgl/lessons/resources/environment-mapping.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
-->
2929
<script src="../../resources/webgl-lessons-ui.js"></script>
3030
<script src="../../resources/webgl-utils.js"></script>
31-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
31+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3232
<script src="../../resources/m3.js"></script>
3333
<script src="diagram.js"></script>
3434
<script>

‎webgl/lessons/resources/matrix-space-change.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
-->
2525
<script src="../../resources/webgl-lessons-ui.js"></script>
2626
<script src="../../resources/webgl-utils.js"></script>
27-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
27+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
2828
<script src="../../resources/m3.js"></script>
2929
<script>
3030
"use strict";

‎webgl/lessons/resources/moon-orbit.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
for webgl-utils, m3, m4, and webgl-lessons-ui.
3232
-->
3333
<script src="../../resources/webgl-utils.js"></script>
34-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
34+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3535
<script src="canvas-wrapper.js"></script>
3636
<script>
3737
"use strict";

‎webgl/lessons/resources/normals-scaled.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@
102102
</body>
103103
</html>
104104
<script src="../../resources/twgl-full.min.js"></script>
105-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
105+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
106106
<script>
107107
"use strict";
108108
var m4 = twgl.m4;

‎webgl/lessons/resources/normals.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
</body>
2020
</html>
2121
<script src="../../resources/twgl-full.min.js"></script>
22-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
22+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
2323
<script id="vertexColorVertexShader" type="text/something-not-javascript">
2424
attribute vec4 position;
2525
attribute vec4 color;

‎webgl/lessons/resources/person-diagram.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
for webgl-utils, m3, m4, and webgl-lessons-ui.
2020
-->
2121
<script src="../../resources/webgl-utils.js"></script>
22-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
22+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
2323
<script src="canvas-wrapper.js"></script>
2424
<script src="2d-scene-graph-diagram.js"></script>
2525
<script>

‎webgl/lessons/resources/planet-diagram.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
for webgl-utils, m3, m4, and webgl-lessons-ui.
2020
-->
2121
<script src="../../resources/webgl-utils.js"></script>
22-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
22+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
2323
<script src="canvas-wrapper.js"></script>
2424
<script src="2d-scene-graph-diagram.js"></script>
2525
<script>

‎webgl/lessons/resources/point-lighting.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
-->
3030
<script src="../../resources/webgl-lessons-ui.js"></script>
3131
<script src="../../resources/webgl-utils.js"></script>
32-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
32+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3333
<script src="../../resources/m3.js"></script>
3434
<script src="diagram.js"></script>
3535
<script>

‎webgl/lessons/resources/power-graph.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
-->
2929
<script src="../../resources/webgl-lessons-ui.js"></script>
3030
<script src="../../resources/webgl-utils.js"></script>
31-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
31+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
3232
<script src="../../resources/m3.js"></script>
3333
<script src="diagram.js"></script>
3434
<script>

‎webgl/lessons/resources/specular-lighting.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
-->
3030
<script src="../../resources/webgl-lessons-ui.js"></script>
3131
<script src="../../resources/webgl-utils.js"></script>
32-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
32+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3333
<script src="../../resources/m3.js"></script>
3434
<script src="diagram.js"></script>
3535
<script>

‎webgl/lessons/resources/spot-lighting.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
-->
3232
<script src="../../resources/webgl-lessons-ui.js"></script>
3333
<script src="../../resources/webgl-utils.js"></script>
34-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
34+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3535
<script src="../../resources/m3.js"></script>
3636
<script src="diagram.js"></script>
3737
<script>

‎webgl/lessons/resources/surface-reflection.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
-->
3030
<script src="../../resources/webgl-lessons-ui.js"></script>
3131
<script src="../../resources/webgl-utils.js"></script>
32-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
32+
<script src="../../resources/lessons-helper.js"></script> <!-- you can and should delete this script. it is only used on the site to help with errors -->
3333
<script src="../../resources/m3.js"></script>
3434
<script src="diagram.js"></script>
3535
<script>

‎webgl/lessons/resources/three-js-cube-with-lights.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</div>
1212
<canvas id="canvas" width="400" height="300"></canvas>
1313
</body>
14-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
14+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
1515
<script src="three.min.js"></script>
1616
<script>
1717
"use strict";

‎webgl/lessons/resources/webgl-preservedrawingbuffer-true.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@
3838
for webgl-utils, m3, m4, and webgl-lessons-ui.
3939
-->
4040
<script src="../../resources/webgl-utils.js"></script>
41-
<script src="../../resources/webgl-lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
41+
<script src="../../resources/lessons-helper.js"></script> <!-- you can delete this script. it is only used on the site to help with errors -->
4242
<script src="m4.js"></script>
4343
<script>
4444
"use strict";

‎webgl/lessons/webgl-boilerplate.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -225,9 +225,9 @@ Note while we're add it there are several more scripts for similar reasons
225225
This provides code to setup sliders that have a visible value that updates when you drag the slider.
226226
Again I didn't want to clutter all the files with this code so it's in one place.
227227

228-
* [`webgl-lessons-helper.js`](../resources/webgl-lessons-helper.js)
228+
* [`lessons-helper.js`](../resources/lessons-helper.js)
229229

230-
This script is not needed except on webglfundmentals.org. It helps print error messages to
230+
This script is not needed except on webgl2fundmentals.org. It helps print error messages to
231231
the screen when used inside the live editor among other things.
232232

233233
* [`m3.js`](../resources/m3.js)

‎webgl/resources/editor-settings.js

+122
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
(function() { // eslint-disable-line strict
2+
'use strict'; // eslint-disable-line strict
3+
4+
function dirname(path) {
5+
const ndx = path.lastIndexOf('/');
6+
return path.substring(0, ndx + 1);
7+
}
8+
9+
function getPrefix(url) {
10+
const u = new URL(url, window.location.href);
11+
const prefix = u.origin + dirname(u.pathname);
12+
return prefix;
13+
}
14+
15+
function fixSourceLinks(url, source) {
16+
const srcRE = /(src=)"(.*?)"/g;
17+
const linkRE = /(href=)"(.*?)"/g;
18+
const imageSrcRE = /((?:image|img)\.src = )"(.*?)"/g;
19+
const loadImageRE = /(loadImageAndCreateTextureInfo)\(('|")(.*?)('|")/g;
20+
const loadImagesRE = /loadImages(\s*)\((\s*)\[([^]*?)\](\s*),/g;
21+
const loadGLTFRE = /(loadGLTF\(')(.*?)(')/g;
22+
const urlPropRE = /(url:\s*)('|")(.*?)('|")/g;
23+
const quoteRE = /"(.*?)"/g;
24+
const workerRE = /(new\s+Worker\s*\(\s*)('|")(.*?)('|")/g;
25+
const importScriptsRE = /(importScripts\s*\(\s*)('|")(.*?)('|")/g;
26+
const prefix = getPrefix(url);
27+
28+
function addPrefix(url) {
29+
return url.indexOf('://') < 0 && url[0] !== '?' ? (prefix + url) : url;
30+
}
31+
function makeLinkFQed(match, p1, url) {
32+
return p1 + '"' + addPrefix(url) + '"';
33+
}
34+
function makeLinkFQedQuote(match, p1, url, p2) {
35+
return `${p1}${addPrefix(url)}${p2}`;
36+
}
37+
function makeLinkFDedQuotes(match, fn, q1, url, q2) {
38+
return fn + q1 + addPrefix(url) + q2;
39+
}
40+
source = source.replace(srcRE, makeLinkFQed);
41+
source = source.replace(linkRE, makeLinkFQed);
42+
source = source.replace(imageSrcRE, makeLinkFQed);
43+
source = source.replace(urlPropRE, makeLinkFDedQuotes);
44+
source = source.replace(workerRE, makeLinkFDedQuotes);
45+
source = source.replace(importScriptsRE, makeLinkFDedQuotes);
46+
source = source.replace(loadImageRE, function(match, fn, q1, url, q2) {
47+
return fn + '(' + q1 + addPrefix(url) + q2;
48+
});
49+
source = source.replace(loadImagesRE, function(match, p1, p2, p3, p4) {
50+
p3 = p3.replace(quoteRE, function(match, p1) {
51+
return '"' + addPrefix(p1) + '"';
52+
});
53+
return `loadImages${p1}(${p2}[${p3}]${p4},`;
54+
});
55+
source = source.replace(loadGLTFRE, makeLinkFQedQuote);
56+
57+
return source;
58+
}
59+
60+
function extraHTMLParsing(html, htmlParts) {
61+
const hasCanvasInCSSRE = /canvas/;
62+
const hasCanvasStyleInHTMLRE = /<canvas[^>]+?style[^>]+?>/;
63+
64+
// add css if there is none
65+
if (!hasCanvasInCSSRE.test(htmlParts.css.sources[0].source) && !hasCanvasStyleInHTMLRE.test(htmlParts.html.sources[0].source)) {
66+
htmlParts.css.sources[0].source = `body {
67+
margin: 0;
68+
}
69+
canvas {
70+
width: 100vw;
71+
height: 100vh;
72+
display: block;
73+
}
74+
` + htmlParts.css.sources[0].source;
75+
}
76+
77+
return html;
78+
}
79+
80+
function fixJSForCodeSite(js) {
81+
if (/requestCORS/.test(js)) {
82+
return js;
83+
}
84+
85+
let found = false;
86+
js = js.replace(/^( +)(img|image)(\.src = )(.*?);.*?$/mg, function(match, indent, variable, code, url) {
87+
found = true;
88+
return `${indent}requestCORSIfNotSameOrigin(${variable}, ${url})
89+
${indent}${variable}${code}${url};`;
90+
});
91+
if (found) {
92+
js += `
93+
94+
// This is needed if the images are not on the same domain
95+
// NOTE: The server providing the images must give CORS permissions
96+
// in order to be able to use the image with WebGL. Most sites
97+
// do NOT give permission.
98+
// See: http://webgl2fundamentals.org/webgl/lessons/webgl-cors-permission.html
99+
function requestCORSIfNotSameOrigin(img, url) {
100+
if ((new URL(url)).origin !== window.location.origin) {
101+
img.crossOrigin = "";
102+
}
103+
}
104+
`;
105+
}
106+
return js;
107+
}
108+
109+
window.lessonEditorSettings = {
110+
extraHTMLParsing,
111+
fixSourceLinks,
112+
fixJSForCodeSite,
113+
runOnResize: true,
114+
lessonSettings: {
115+
glDebug: true,
116+
},
117+
tags: ['webgl', 'webgl2fundamentals.org'],
118+
name: 'WebGL2Fundamentals',
119+
icon: '/webgl/lessons/resources/webgl2fundamentals-icon-256.png',
120+
};
121+
122+
}());

0 commit comments

Comments
 (0)