Skip to content

Commit

Permalink
refactor(examples): update to use new webgl API
Browse files Browse the repository at this point in the history
  • Loading branch information
@postspectacular
postspectacular committed Mar 28, 2020
1 parent 40dd67b commit b3f90b8
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 160 deletions.
22 changes: 11 additions & 11 deletions examples/webgl-cube/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,29 @@ import {
lookAt,
perspective,
rotationX44,
rotationY44
rotationY44,
} from "@thi.ng/matrices";
import { SOA } from "@thi.ng/soa";
import { permutations, repeat } from "@thi.ng/transducers";
import { normalize } from "@thi.ng/vectors";
import {
compileModel,
defShader,
draw,
GLMat4,
GLVec3,
LAMBERT,
ModelSpec,
shader
} from "@thi.ng/webgl";

const cube = (): Partial<ModelSpec> => {
const soa = new SOA(36, {
pos: { size: 3 },
normal: { size: 3 },
col: { size: 3 }
col: { size: 3 },
});
const [a, b, c, d, e, f, g, h] = [
...permutations([-1, 1], [-1, 1], [-1, 1])
...permutations([-1, 1], [-1, 1], [-1, 1]),
];
[
// tuples of: quad verts, normal, color
Expand All @@ -36,7 +36,7 @@ const cube = (): Partial<ModelSpec> => {
[e, f, a, b, [0, -1, 0], [0, 0, 1]],
[c, d, g, h, [0, 1, 0], [1, 1, 0]],
[e, a, g, c, [0, 0, -1], [1, 0, 1]],
[b, f, d, h, [0, 0, 1], [0, 1, 1]]
[b, f, d, h, [0, 0, 1], [0, 1, 1]],
].forEach(([a, b, c, d, n, col], i: number) => {
i *= 6;
soa.setAttribValues("pos", [a, b, d, a, d, c], i);
Expand All @@ -48,9 +48,9 @@ const cube = (): Partial<ModelSpec> => {
attribs: {
position: { data: <Float32Array>soa.buffers.pos, size: 3 },
normal: { data: <Float32Array>soa.buffers.normal, size: 3 },
col: { data: <Float32Array>soa.buffers.col, size: 3 }
col: { data: <Float32Array>soa.buffers.col, size: 3 },
},
num: 36
num: 36,
};
};

Expand All @@ -59,13 +59,13 @@ const app = () => {
const canvas = canvasWebGL({
init(_, gl) {
model = compileModel(gl, <ModelSpec>{
shader: shader(gl, LAMBERT({ color: "col" })),
shader: defShader(gl, LAMBERT({ color: "col" })),
uniforms: {
proj: <GLMat4>perspective([], 60, 1, 0.1, 10),
view: <GLMat4>lookAt([], [0, 0, 4], [0, 0, 0], [0, 1, 0]),
lightDir: <GLVec3>normalize(null, [0.5, 0.75, 1])
lightDir: <GLVec3>normalize(null, [0.5, 0.75, 1]),
},
...cube()
...cube(),
});
},
update(_, gl, __, time) {
Expand All @@ -77,7 +77,7 @@ const app = () => {
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
draw(model);
}
},
});
return [canvas, { width: 600, height: 600 }];
};
Expand Down
61 changes: 28 additions & 33 deletions examples/webgl-cubemap/src/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,67 +1,62 @@
import { sin } from "@thi.ng/dsp";
import { start } from "@thi.ng/hdom";
import { adaptDPI, canvasWebGL, dropdown } from "@thi.ng/hdom-components";
import {
concat,
lookAt,
perspective,
transform44
} from "@thi.ng/matrices";
import { concat, lookAt, perspective, transform44 } from "@thi.ng/matrices";
import { fromPromise, metaStream, stream } from "@thi.ng/rstream";
import {
assign,
defMain,
mul,
normalize,
texture,
vec4
vec4,
} from "@thi.ng/shader-ast";
import {
BLEND_ADD,
compileModel,
cube,
cubeMap,
defCubeModel,
defShader,
defTextureCubeMap,
draw,
GLMat4,
ModelSpec,
shader,
ShaderSpec,
TextureFilter
TextureFilter,
} from "@thi.ng/webgl";

const CUBEMAP_SHADER: ShaderSpec = {
vs: (gl, unis, ins, outs) => [
defMain(() => [
assign(outs.vnormal, ins.position),
assign(gl.gl_Position, mul(unis.mvp, vec4(ins.position, 1)))
])
assign(gl.gl_Position, mul(unis.mvp, vec4(ins.position, 1))),
]),
],
fs: (_, unis, ins, outs) => [
defMain(() => [
assign(outs.fragColor, texture(unis.tex, normalize(ins.vnormal)))
])
assign(outs.fragColor, texture(unis.tex, normalize(ins.vnormal))),
]),
],
attribs: {
position: "vec3"
position: "vec3",
},
varying: {
vnormal: "vec3"
vnormal: "vec3",
},
uniforms: {
mvp: "mat4",
tex: "samplerCube"
tex: "samplerCube",
},
state: {
depth: false,
blend: true,
blendFn: BLEND_ADD
}
blendFn: BLEND_ADD,
},
};

const CUBE_MAPS = [
["langholmen2", "Langholmen"],
["golden-gate", "Golden Gate"],
["maskonaive2", "Maskonaive"]
["maskonaive2", "Maskonaive"],
];

const app = () => {
Expand All @@ -80,26 +75,26 @@ const app = () => {
next(faces) {
try {
model = compileModel(gl, {
...cube({ normal: false, uv: false }),
shader: shader(gl, CUBEMAP_SHADER),
...defCubeModel({ normal: false, uv: false }),
shader: defShader(gl, CUBEMAP_SHADER),
uniforms: {},
textures: [
cubeMap(gl, faces, {
defTextureCubeMap(gl, faces, {
filter: [
TextureFilter.LINEAR_MIPMAP_LINEAR,
TextureFilter.LINEAR
TextureFilter.LINEAR,
],
mipmap: true
})
]
mipmap: true,
}),
],
});
} catch (err) {
console.warn(err);
}
},
error(e) {
console.warn(e);
}
},
});
},
// prettier-ignore
Expand All @@ -126,12 +121,12 @@ const app = () => {
dropdown,
{
onchange: (e: Event) =>
selection.next((<HTMLSelectElement>e.target).value)
selection.next((<HTMLSelectElement>e.target).value),
},
CUBE_MAPS,
selection.deref()
]
]
selection.deref(),
],
],
];
};

Expand Down
42 changes: 21 additions & 21 deletions examples/webgl-grid/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,16 @@ import { normalize, rotateY } from "@thi.ng/vectors";
import {
checkerboard,
compileModel,
cube,
defCubeModel,
defShader,
defTexture,
draw,
GLMat4,
GLVec3,
LAMBERT,
ModelSpec,
shader,
texture,
TextureFilter,
TextureRepeat
TextureRepeat,
} from "@thi.ng/webgl";

const app = () => {
Expand All @@ -27,7 +27,7 @@ const app = () => {
const C1 = [0.5, 0.5, 0.5];
const C2 = [1, 1, 1];
model = compileModel(gl, {
...cube({ size: 0.9 }),
...defCubeModel({ size: 0.9 }),
instances: {
attribs: {
offset: {
Expand All @@ -36,45 +36,45 @@ const app = () => {
([x, z]) => [
x * 2,
Math.sin(x * 0.4) + Math.sin(z * 0.4),
z * 2
z * 2,
],
range2d(-GRID + 1, GRID, -GRID + 1, GRID)
)
])
),
]),
},
icol: {
data: new Float32Array([
...mapcat(
() => (Math.random() < 0.5 ? C1 : C2),
range2d(-GRID + 1, GRID, -GRID + 1, GRID)
)
])
}
),
]),
},
},
num: (GRID * 2 - 1) ** 2
num: (GRID * 2 - 1) ** 2,
},
shader: shader(
shader: defShader(
gl,
LAMBERT({
uv: "uv",
instancePos: "offset",
instanceColor: "icol",
state: { cull: true }
state: { cull: true },
})
),
uniforms: {},
textures: [
texture(gl, {
defTexture(gl, {
image: checkerboard({
size: 8,
col1: 0xff808080,
col2: 0xffffffff,
corners: true
corners: true,
}),
filter: TextureFilter.NEAREST,
wrap: TextureRepeat.CLAMP
})
]
wrap: TextureRepeat.CLAMP,
}),
],
});
},
update: (el, gl, __, time) => {
Expand All @@ -100,11 +100,11 @@ const app = () => {
gl.clearColor(bg, bg, bg, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
draw(model);
}
},
});
return () => [
canvas,
{ width: window.innerWidth, height: window.innerHeight }
{ width: window.innerWidth, height: window.innerHeight },
];
};

Expand Down
Loading

0 comments on commit b3f90b8

Please sign in to comment.