michael/pathfinder
michael
/
pathfinder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fetch the colors of paths

This commit is contained in:
Patrick Walton 2017-08-14 21:24:58 -07:00
parent 309034b7dd
commit eb7cfe7c5f
3 changed files with 57 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
demo/client/src/index.ts
View File

@ -44,6 +44,11 @@ interface UnlinkedShaderProgram {
type Matrix4D = number[];
interface Size2D {
width: number;
height: number;
}
interface ShaderProgramSource {
vertex: string;
fragment: string;
@ -202,15 +207,14 @@ class AppController {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(request),
}).then((response) => {
response.text().then((encodedMeshes) => {
this.meshes = new PathfinderMeshData(encodedMeshes);
this.meshesReceived();
});
}).then(response => response.text()).then(encodedMeshes => {
this.meshes = new PathfinderMeshData(encodedMeshes);
this.meshesReceived();
});
}
meshesReceived() {
this.view.uploadPathData(TEXT.length);
this.view.attachMeshes(this.meshes);
}
@ -295,6 +299,17 @@ class PathfinderView {
});
}
uploadPathData(pathCount: number) {
const pathColors = new Uint8Array(4 * pathCount);
for (let pathIndex = 0; pathIndex < pathCount; pathIndex++) {
for (let channel = 0; channel < 3; channel++)
pathColors[pathIndex * 4 + channel] = 0x00; // RGB
pathColors[pathIndex * 4 + 3] = 0xff; // alpha
}
this.pathColorsBufferTexture = new PathfinderBufferTexture(this.gl, pathColors);
}
attachMeshes(meshes: PathfinderMeshData) {
this.meshes = new PathfinderMeshBuffers(this.gl, meshes);
this.setDirty();
@ -358,10 +373,16 @@ class PathfinderView {
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverInteriorIndices);
// Draw direct interior parts.
this.gl.activeTexture(this.gl.TEXTURE0);
this.gl.bindTexture(this.gl.TEXTURE_2D, this.pathColorsBufferTexture.texture);
this.gl.uniformMatrix4fv(directInteriorProgram.uniforms.uTransform, false, IDENTITY);
this.gl.uniform2i(directInteriorProgram.uniforms.uFramebufferSize,
this.canvas.width,
this.canvas.height);
this.gl.uniform2i(directInteriorProgram.uniforms.uPathColorsDimensions,
this.pathColorsBufferTexture.size.width,
this.pathColorsBufferTexture.size.height);
this.gl.uniform1i(directInteriorProgram.uniforms.uPathColors, 0);
let indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
this.gl.BUFFER_SIZE) / UINT32_SIZE;
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
@ -405,10 +426,16 @@ class PathfinderView {
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverCurveIndices);
// Draw direct curve parts.
this.gl.activeTexture(this.gl.TEXTURE0);
this.gl.bindTexture(this.gl.TEXTURE_2D, this.pathColorsBufferTexture.texture);
this.gl.uniformMatrix4fv(directCurveProgram.uniforms.uTransform, false, IDENTITY);
this.gl.uniform2i(directCurveProgram.uniforms.uFramebufferSize,
this.canvas.width,
this.canvas.height);
this.gl.uniform2i(directCurveProgram.uniforms.uPathColorsDimensions,
this.pathColorsBufferTexture.size.width,
this.pathColorsBufferTexture.size.height);
this.gl.uniform1i(directCurveProgram.uniforms.uPathColors, 0);
indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
this.gl.BUFFER_SIZE) / UINT32_SIZE;
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
@ -422,6 +449,7 @@ class PathfinderView {
gl: WebGLRenderingContext;
shaderProgramsPromise: Promise<ShaderMap<PathfinderShaderProgram>>;
meshes: PathfinderMeshBuffers;
pathColorsBufferTexture: PathfinderBufferTexture;
dirty: boolean;
}
@ -464,6 +492,28 @@ class PathfinderShaderProgram {
readonly program: WebGLProgram;
}
class PathfinderBufferTexture {
constructor(gl: WebGLRenderingContext, data: Uint8Array) {
const pixelCount = Math.ceil(data.length / 4);
const width = Math.ceil(Math.sqrt(pixelCount));
const height = Math.ceil(pixelCount / width);
this.size = { width: width, height: height };
this.texture = expect(gl.createTexture(), "Failed to create texture!");
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, this.texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, data);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
}
readonly texture: WebGLTexture;
readonly size: Size2D;
}
function main() {
const controller = new AppController;
window.addEventListener('load', () => controller.start(), false);

3
shaders/gles2/direct-curve.vs.glsl
View File

@ -23,8 +23,7 @@ void main() {
position = convertScreenToClipSpace(position, uFramebufferSize);
gl_Position = vec4(position, aPathDepth, 1.0);
//vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
vColor = vec4(0.0, 0.0, 0.0, 1.0);
vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
vTexCoord = vec2(aTexCoord) / 2.0;
vSign = aSign;
}

3
shaders/gles2/direct-interior.vs.glsl
View File

@ -19,6 +19,5 @@ void main() {
position = convertScreenToClipSpace(position, uFramebufferSize);
gl_Position = vec4(position, aPathDepth, 1.0);
//vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
vColor = vec4(0.0, 0.0, 0.0, 1.0);
vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
}