Fetch the colors of paths
This commit is contained in:
parent
309034b7dd
commit
eb7cfe7c5f
|
@ -44,6 +44,11 @@ interface UnlinkedShaderProgram {
|
||||||
|
|
||||||
type Matrix4D = number[];
|
type Matrix4D = number[];
|
||||||
|
|
||||||
|
interface Size2D {
|
||||||
|
width: number;
|
||||||
|
height: number;
|
||||||
|
}
|
||||||
|
|
||||||
interface ShaderProgramSource {
|
interface ShaderProgramSource {
|
||||||
vertex: string;
|
vertex: string;
|
||||||
fragment: string;
|
fragment: string;
|
||||||
|
@ -202,15 +207,14 @@ class AppController {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
body: JSON.stringify(request),
|
body: JSON.stringify(request),
|
||||||
}).then((response) => {
|
}).then(response => response.text()).then(encodedMeshes => {
|
||||||
response.text().then((encodedMeshes) => {
|
|
||||||
this.meshes = new PathfinderMeshData(encodedMeshes);
|
this.meshes = new PathfinderMeshData(encodedMeshes);
|
||||||
this.meshesReceived();
|
this.meshesReceived();
|
||||||
});
|
});
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
meshesReceived() {
|
meshesReceived() {
|
||||||
|
this.view.uploadPathData(TEXT.length);
|
||||||
this.view.attachMeshes(this.meshes);
|
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) {
|
attachMeshes(meshes: PathfinderMeshData) {
|
||||||
this.meshes = new PathfinderMeshBuffers(this.gl, meshes);
|
this.meshes = new PathfinderMeshBuffers(this.gl, meshes);
|
||||||
this.setDirty();
|
this.setDirty();
|
||||||
|
@ -358,10 +373,16 @@ class PathfinderView {
|
||||||
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverInteriorIndices);
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverInteriorIndices);
|
||||||
|
|
||||||
// Draw direct interior parts.
|
// 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.uniformMatrix4fv(directInteriorProgram.uniforms.uTransform, false, IDENTITY);
|
||||||
this.gl.uniform2i(directInteriorProgram.uniforms.uFramebufferSize,
|
this.gl.uniform2i(directInteriorProgram.uniforms.uFramebufferSize,
|
||||||
this.canvas.width,
|
this.canvas.width,
|
||||||
this.canvas.height);
|
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,
|
let indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
|
||||||
this.gl.BUFFER_SIZE) / UINT32_SIZE;
|
this.gl.BUFFER_SIZE) / UINT32_SIZE;
|
||||||
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
|
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);
|
this.gl.bindBuffer(this.gl.ELEMENT_ARRAY_BUFFER, this.meshes.coverCurveIndices);
|
||||||
|
|
||||||
// Draw direct curve parts.
|
// 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.uniformMatrix4fv(directCurveProgram.uniforms.uTransform, false, IDENTITY);
|
||||||
this.gl.uniform2i(directCurveProgram.uniforms.uFramebufferSize,
|
this.gl.uniform2i(directCurveProgram.uniforms.uFramebufferSize,
|
||||||
this.canvas.width,
|
this.canvas.width,
|
||||||
this.canvas.height);
|
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,
|
indexCount = this.gl.getBufferParameter(this.gl.ELEMENT_ARRAY_BUFFER,
|
||||||
this.gl.BUFFER_SIZE) / UINT32_SIZE;
|
this.gl.BUFFER_SIZE) / UINT32_SIZE;
|
||||||
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
|
this.gl.drawElements(this.gl.TRIANGLES, indexCount, this.gl.UNSIGNED_INT, 0);
|
||||||
|
@ -422,6 +449,7 @@ class PathfinderView {
|
||||||
gl: WebGLRenderingContext;
|
gl: WebGLRenderingContext;
|
||||||
shaderProgramsPromise: Promise<ShaderMap<PathfinderShaderProgram>>;
|
shaderProgramsPromise: Promise<ShaderMap<PathfinderShaderProgram>>;
|
||||||
meshes: PathfinderMeshBuffers;
|
meshes: PathfinderMeshBuffers;
|
||||||
|
pathColorsBufferTexture: PathfinderBufferTexture;
|
||||||
dirty: boolean;
|
dirty: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -464,6 +492,28 @@ class PathfinderShaderProgram {
|
||||||
readonly program: WebGLProgram;
|
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() {
|
function main() {
|
||||||
const controller = new AppController;
|
const controller = new AppController;
|
||||||
window.addEventListener('load', () => controller.start(), false);
|
window.addEventListener('load', () => controller.start(), false);
|
||||||
|
|
|
@ -23,8 +23,7 @@ void main() {
|
||||||
position = convertScreenToClipSpace(position, uFramebufferSize);
|
position = convertScreenToClipSpace(position, uFramebufferSize);
|
||||||
gl_Position = vec4(position, aPathDepth, 1.0);
|
gl_Position = vec4(position, aPathDepth, 1.0);
|
||||||
|
|
||||||
//vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
|
vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
|
||||||
vColor = vec4(0.0, 0.0, 0.0, 1.0);
|
|
||||||
vTexCoord = vec2(aTexCoord) / 2.0;
|
vTexCoord = vec2(aTexCoord) / 2.0;
|
||||||
vSign = aSign;
|
vSign = aSign;
|
||||||
}
|
}
|
||||||
|
|
|
@ -19,6 +19,5 @@ void main() {
|
||||||
position = convertScreenToClipSpace(position, uFramebufferSize);
|
position = convertScreenToClipSpace(position, uFramebufferSize);
|
||||||
gl_Position = vec4(position, aPathDepth, 1.0);
|
gl_Position = vec4(position, aPathDepth, 1.0);
|
||||||
|
|
||||||
//vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
|
vColor = fetchFloat4NormIndexedData(uPathColors, aPathDepth, uPathColorsDimensions);
|
||||||
vColor = vec4(0.0, 0.0, 0.0, 1.0);
|
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue