Skip to content

Commit d9513b1

Browse files
PWhiddyPWhiddy
committed
added glsl support to minimalRender, added glsl tests, small refactor of some glsl components, fixed bug where some console errors were not caught in tests
1 parent 7962ae9 commit d9513b1

18 files changed

+555
-231
lines changed

‎dist/shader-park-core.cjs.js

Lines changed: 56 additions & 27 deletions
Large diffs are not rendered by default.

‎dist/shader-park-core.esm.js

Lines changed: 55 additions & 28 deletions
Large diffs are not rendered by default.

‎dist/shader-park-core.umd.js

Lines changed: 56 additions & 27 deletions
Large diffs are not rendered by default.

‎glsl/glsl-lib.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ vec3 shade(vec3 p, vec3 normal) {
1111
}
1212
`;
1313

14-
export const defaultVertexSource = `
14+
export const threeJSVertexSource = `
1515
varying vec4 worldPos;
1616
//varying vec2 vUv;
1717
varying vec3 sculptureCenter;
@@ -25,6 +25,14 @@ void main()
2525
}
2626
`;
2727

28+
export const minimalVertexSource = `
29+
attribute vec3 coordinates;
30+
varying vec3 sculptureCenter;
31+
void main(void) {
32+
sculptureCenter = vec3(0.0);
33+
gl_Position = vec4(coordinates, 1.0);
34+
}`;
35+
2836
export const threeHeader = `
2937
#define GLSL_NEED_ROUND
3038
uniform mat4 projectionMatrix;
@@ -33,11 +41,21 @@ uniform sampler2D msdf;
3341
//varying vec2 vUv;
3442
varying vec4 worldPos;
3543
44+
`;
3645

46+
export const minimalHeader = `
47+
precision highp float;
48+
#define GLSL_NEED_ROUND
49+
uniform float w_width;
50+
uniform float w_height;
51+
uniform mat4 projectionMatrix;
52+
#define cameraPosition vec3(0.0,0.0,-2.0)
53+
#define vUv vec2(0.0)
54+
#define worldPos vec4(vec2((gl_FragCoord.x/w_width-0.5)*(w_width/w_height),gl_FragCoord.y/w_height-0.5)*1.75,0.0,0.0)
3755
`;
3856

3957
export const usePBRHeader = '#define USE_PBR\n';
40-
export const useHemisphereLight = '#define HEMISPHERE_LIGHT\n'
58+
export const useHemisphereLight = '#define HEMISPHERE_LIGHT\n';
4159

4260
export const sculptureStarterCode = `
4361
varying vec3 sculptureCenter;

‎index.js

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,14 @@ import {
1515
} from './targets/offlineRenderer.js'
1616

1717
import {
18-
sculptToMinimalHTMLRenderer
19-
} from './targets/minimalHTMLRenderer.js'
18+
sculptToMinimalRenderer,
19+
glslToMinimalRenderer
20+
} from './targets/minimalRenderer.js'
2021

2122
import {
22-
sculptToMinimalRenderer
23-
} from './targets/minimalRenderer.js'
23+
sculptToMinimalHTMLRenderer,
24+
glslToMinimalHTMLRenderer,
25+
} from './targets/minimalHTMLRenderer.js'
2426

2527
import {
2628
sculptToRawSDF4Meshing
@@ -35,7 +37,7 @@ import {
3537
defaultFragSourceGLSL
3638
} from './glsl/glsl-lib.js'
3739

38-
console.log('using shader-park version: 0.0.18');
40+
console.log('using shader-park version: 0.0.19');
3941

4042
/// Generate code for various targets
4143

@@ -53,7 +55,9 @@ export {
5355
sculptToOfflineRenderer,
5456
glslToTouchDesignerShaderSource,
5557
sculptToTouchDesignerShaderSource,
56-
sculptToMinimalHTMLRenderer,
5758
sculptToMinimalRenderer,
59+
sculptToMinimalHTMLRenderer,
60+
glslToMinimalRenderer,
61+
glslToMinimalHTMLRenderer,
5862
sculptToRawSDF4Meshing
5963
}

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "shader-park-core",
3-
"version": "0.0.18",
3+
"version": "0.0.19",
44
"description": "core glsl and js framework for shader-park",
55
"main": "dist/shader-park-core.esm.js",
66
"csj": "dist/shader-park-core.cjs.js",
@@ -12,6 +12,7 @@
1212
"build": "rollup -c --no-treeshake",
1313
"watch": "rollup -c -w --no-treeshake",
1414
"publish": "publish --access public",
15+
"pretest": "yarn build",
1516
"test": "mocha --reporter spec",
1617
"toThreeJS": "node converters/convertThreeJS.js",
1718
"toOffline": "node converters/convertOfflineRenderer.js",

‎targets/minimalHTMLRenderer.js

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -5,44 +5,48 @@
55
* output - self-contained lightweight html which renders the sculpture
66
**/
77

8-
export function sculptToMinimalHTMLRenderer(spCode) {
8+
export function sculptToMinimalHTMLRenderer(spCode, libPath) {
9+
return makeHTML(spCode, 'sculptToMinimalRenderer', libPath);
10+
}
11+
12+
export function glslToMinimalHTMLRenderer(spCode, libPath) {
13+
return makeHTML(spCode, 'glslToMinimalRenderer', libPath);
14+
}
15+
16+
function makeHTML(spCode, minRenderFunc, libPath) {
917
return `<!DOCTYPE html>
10-
<html lang="en">
11-
<head>
12-
<title>Shader Park</title>
13-
<meta charset="utf-8">
14-
<meta name="viewport" content="width=device-width, initial-scale=1">
15-
<style>
16-
body {
17-
font-family: helvetica, arial, sans-serif;
18-
margin: 2em;
19-
width: 100vw;
20-
height: 100vh;
21-
margin : 0px;
22-
padding : 0px;
23-
border : 0px;
24-
background-color : white;
25-
}
26-
canvas {
27-
width: 100%;
28-
height:100%;
29-
margin : 0px;
30-
padding : 0px;
31-
border : 0px;
32-
background-color : transparent;
33-
}
34-
</style>
35-
</head>
36-
<body>
37-
<canvas class="my-canvas"></canvas>
38-
<script type="module">
39-
import {sculptToMinimalRenderer} from '../dist/shader-park-core.esm.js';
40-
let canvas = document.querySelector('.my-canvas');
41-
// This converts your Shader Park code into a shader and renders it to the my-canvas element
42-
sculptToMinimalRenderer(canvas,
43-
\`${spCode}\`
44-
);
45-
</script>
46-
</body>
47-
</html>`
18+
<html lang="en">
19+
<head>
20+
<title>Shader Park</title>
21+
<meta charset="utf-8">
22+
<meta name="viewport" content="width=device-width, initial-scale=1">
23+
<style>
24+
body {
25+
margin: 2em;
26+
width: 100vw;
27+
height: 100vh;
28+
margin : 0px;
29+
padding : 0px;
30+
border : 0px;
31+
background-color : white;
32+
}
33+
canvas {
34+
width: 100%;
35+
height:100%;
36+
margin : 0px;
37+
padding : 0px;
38+
border : 0px;
39+
background-color : transparent;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<canvas class="my-canvas"></canvas>
45+
<script type="module">
46+
import {${minRenderFunc}} from '${libPath}';
47+
let canvas = document.querySelector('.my-canvas');
48+
${minRenderFunc}(canvas, \`${spCode}\`);
49+
</script>
50+
</body>
51+
</html>`;
4852
}

0 commit comments

Comments
 (0)