Skip to content

Commit

Permalink
feat(examples): update webgl demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@postspectacular
postspectacular committed Jun 11, 2019
1 parent dd6f752 commit 221640b
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 21 deletions.
7 changes: 5 additions & 2 deletions examples/webgl-cubemap/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const app = () => {
const p = perspective([], 45, gl.drawingBufferWidth/gl.drawingBufferHeight, 0.01, 5);
const v = lookAt([],[0, 0, sin(time, 0.00008, 1.99, 2)],[0, 0, 0], [0, 1, 0]);
const m = transform44([], [0, 0, 0], [sin(time, 0.0001, 0.7, 0.5), time * 0.0007,0], 1);
model.uniforms.mvp = <GLMat4>concat([], p, v, m);
model.uniforms!.mvp = <GLMat4>concat([], p, v, m);
adaptDPI(el, window.innerWidth, window.innerHeight);
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(bg, bg, bg, 1);
Expand All @@ -111,7 +111,10 @@ const app = () => {
"div.fixed.top-0.left-0.z-1.ma3",
[
dropdown,
{ onchange: (e) => selection.next(e.target.value) },
{
onchange: (e: Event) =>
selection.next((<HTMLSelectElement>e.target).value)
},
CUBE_MAPS,
selection.deref()
]
Expand Down
20 changes: 10 additions & 10 deletions examples/webgl-msdf/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
transform44
} from "@thi.ng/matrices";
import { SYSTEM } from "@thi.ng/random";
import { fromEvent, Subscription } from "@thi.ng/rstream";
import { fromDOMEvent, Subscription } from "@thi.ng/rstream";
import { map } from "@thi.ng/transducers";
import { AttribPool, GLType } from "@thi.ng/vector-pools";
import {
Expand Down Expand Up @@ -97,8 +97,8 @@ const createText = (
}
};
// update bottom vertex colors of each character
for (let i = 2; i < model.attribPool.capacity; i += 4) {
model.attribPool.setAttribValues("color", [col, col], i);
for (let i = 2; i < model.attribPool!.capacity; i += 4) {
model.attribPool!.setAttribValues("color", [col, col], i);
}
return compileModel(gl, model);
};
Expand Down Expand Up @@ -126,7 +126,7 @@ const createStarField = (gl: WebGLRenderingContext, num = 1000) => {
pool.setAttribValue("id", i, i);
}
return compileModel(gl, {
attribs: null,
attribs: {},
attribPool: pool,
uniforms: {},
shader: shader(gl, {
Expand Down Expand Up @@ -176,7 +176,7 @@ const app = () => {
await img.decode();
body = createText(gl, glyphs, img, TEXT);
stars = createStarField(gl);
body.uniforms.proj = stars.uniforms.proj = <GLMat4>(
body.uniforms!.proj = stars.uniforms!.proj = <GLMat4>(
perspective(
[],
60,
Expand All @@ -185,8 +185,8 @@ const app = () => {
20
)
);
mouse = fromEvent(el, "mousemove").transform(
map((e: MouseEvent) =>
mouse = fromDOMEvent(el, "mousemove").transform(
map((e) =>
fit3(
[],
[e.clientX, e.clientY, 0],
Expand All @@ -209,7 +209,7 @@ const app = () => {
[2, 0.5, 0]
);
const view = lookAt([], eye, ZERO3, Y3);
body.uniforms.modelview = <GLMat4>(
body.uniforms!.modelview = <GLMat4>(
concat(
[],
view,
Expand All @@ -221,8 +221,8 @@ const app = () => {
)
)
);
stars.uniforms.modelview = <GLMat4>view;
stars.uniforms.time = 10 + time * 0.001;
stars.uniforms!.modelview = <GLMat4>view;
stars.uniforms!.time = 10 + time * 0.001;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
gl.clearColor(bg, bg, bg, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
Expand Down
12 changes: 6 additions & 6 deletions examples/webgl-ssao/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ const app = () => {
update(_, gl, __, time, frame) {
if (frame < 1 || !model) return;
const bg = 0.1;
const eye = (<IDeref<GLVec3>>model.uniforms.eyePos).deref();
const eye = (<IDeref<GLVec3>>model.uniforms!.eyePos).deref();
const p = perspective([], 45, W / H, Z_NEAR, Z_FAR);
const v = lookAt([], eye, [0, 0, 0], [0, 1, 0]);
const m = transform44(
Expand All @@ -174,12 +174,12 @@ const app = () => {
[sin(time, 0.00005, 1, 0), time * 0.0003, 0],
1
);
model.instances.attribs.offset.buffer.set(
model.instances!.attribs.offset.buffer!.set(
instancePositions(sin(time, 0.0004, 0.14, 1.15))
);
model.uniforms.model = <GLMat4>m;
model.uniforms.view = <GLMat4>v;
model.uniforms.proj = <GLMat4>p;
model.uniforms!.model = <GLMat4>m;
model.uniforms!.view = <GLMat4>v;
model.uniforms!.proj = <GLMat4>p;
gl.viewport(0, 0, W, H);
fboGeo.bind();
gl.clearColor(bg, bg, bg, 1);
Expand Down Expand Up @@ -207,4 +207,4 @@ if (process.env.NODE_ENV !== "production") {
hot && hot.dispose(cancel);
}

window["params"] = PARAMS;
//window["params"] = PARAMS;
3 changes: 2 additions & 1 deletion examples/webgl-ssao/src/params.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,8 @@ const slider = (label: string, attribs: any, stream: Stream<number>) => () => [
...attribs,
type: "range",
value: stream.deref(),
oninput: (e) => stream.next(parseFloat(e.target.value))
oninput: (e: Event) =>
stream.next(parseFloat((<HTMLInputElement>e.target).value))
}
],
["span.ml3", stream.deref()]
Expand Down
5 changes: 3 additions & 2 deletions examples/webgl-ssao/src/shaders.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,8 @@ export const LIGHT_SHADER: ShaderSpec = {
}
};

export const SSAO_SHADER: ShaderSpec = mergeDeepObj(FX_SHADER_SPEC, {
export const SSAO_SHADER: ShaderSpec = {
...FX_SHADER_SPEC,
fs: `#define K (0.707107)
const vec2 kernel[4] = vec2[](
Expand Down Expand Up @@ -107,7 +108,7 @@ void main() {
outputs: {
occlusion: GLSL.float
}
});
};

export const FINAL_SHADER: ShaderSpec = mergeDeepObj(FX_SHADER_SPEC, {
fs: `void main() {
Expand Down

0 comments on commit 221640b

Please sign in to comment.