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

Implement basic working 3D support

This commit is contained in:
Patrick Walton 2017-09-05 19:47:19 -07:00
parent a599db4eb9
commit 4b7ac0182c
8 changed files with 138 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
demo/client/src/3d-demo.ts
View File

@ -29,7 +29,9 @@ const PIXELS_PER_UNIT: number = 1.0;
const FOV: number = 45.0;
const NEAR_CLIP_PLANE: number = 0.01;
const FAR_CLIP_PLANE: number = 1000.0;
const FAR_CLIP_PLANE: number = 10000.0;
const SCALE: glmatrix.vec3 = glmatrix.vec3.fromValues(1.0 / 50.0, 1.0 / 50.0, 1.0);
const ANTIALIASING_STRATEGIES: AntialiasingStrategyTable = {
none: NoAAStrategy,
@ -142,17 +144,31 @@ class ThreeDView extends PathfinderDemoView {
}
protected get worldTransform() {
const transform = glmatrix.mat4.create();
glmatrix.mat4.perspective(transform,
const projection = glmatrix.mat4.create();
glmatrix.mat4.perspective(projection,
FOV / 180.0 * Math.PI,
this.canvas.width / this.canvas.height,
NEAR_CLIP_PLANE,
FAR_CLIP_PLANE);
glmatrix.mat4.mul(transform, transform, this.camera.rotationMatrix);
glmatrix.mat4.translate(transform, transform, this.camera.translation);
const modelview = glmatrix.mat4.create();
glmatrix.mat4.mul(modelview, modelview, this.camera.rotationMatrix);
glmatrix.mat4.translate(modelview, modelview, this.camera.translation);
glmatrix.mat4.scale(modelview, modelview, SCALE);
const transform = glmatrix.mat4.create();
glmatrix.mat4.mul(transform, projection, modelview);
return transform;
}
protected get directCurveProgramName(): keyof ShaderMap<void> {
return 'direct3DCurve';
}
protected get directInteriorProgramName(): keyof ShaderMap<void> {
return 'direct3DInterior';
}
private _scale: number;
private appController: ThreeDController;

10
demo/client/src/camera.ts
View File

@ -18,6 +18,8 @@ const PERSPECTIVE_ROTATION_SPEED: number = 1.0 / 300.0;
const MOVEMENT_INTERVAL_DELAY: number = 10;
const INITIAL_TRANSLATION: glmatrix.vec3 = glmatrix.vec3.fromValues(0.0, 0.0, -1000.0);
export abstract class Camera {
constructor(canvas: HTMLCanvasElement) {
this.canvas = canvas;
@ -83,7 +85,7 @@ export class PerspectiveCamera extends Camera {
constructor(canvas: HTMLCanvasElement) {
super(canvas);
this.translation = glmatrix.vec3.create();
this.translation = glmatrix.vec3.clone(INITIAL_TRANSLATION);
this.rotation = glmatrix.vec2.create();
this.movementDelta = glmatrix.vec3.create();
this.movementInterval = null;
@ -133,8 +135,8 @@ export class PerspectiveCamera extends Camera {
if (document.pointerLockElement !== this.canvas)
return;
this.rotation[0] += event.movementY * PERSPECTIVE_ROTATION_SPEED;
this.rotation[1] += event.movementX * PERSPECTIVE_ROTATION_SPEED;
this.rotation[0] += event.movementY * PERSPECTIVE_ROTATION_SPEED;
if (this.onChange != null)
this.onChange();
@ -142,8 +144,8 @@ export class PerspectiveCamera extends Camera {
get rotationMatrix(): glmatrix.mat4 {
const matrix = glmatrix.mat4.create();
glmatrix.mat4.fromXRotation(matrix, this.rotation[0]);
glmatrix.mat4.rotateY(matrix, matrix, this.rotation[1]);
glmatrix.mat4.fromYRotation(matrix, this.rotation[1]);
glmatrix.mat4.rotateX(matrix, matrix, this.rotation[0]);
return matrix;
}

12
demo/client/src/shader-loader.ts
View File

@ -22,6 +22,8 @@ export const SHADER_NAMES: Array<keyof ShaderMap<void>> = [
'blit',
'directCurve',
'directInterior',
'direct3DCurve',
'direct3DInterior',
'ecaaEdgeDetect',
'ecaaCover',
'ecaaLine',
@ -44,6 +46,14 @@ const SHADER_URLS: ShaderMap<ShaderProgramURLs> = {
vertex: "/glsl/gles2/direct-interior.vs.glsl",
fragment: "/glsl/gles2/direct-interior.fs.glsl",
},
direct3DCurve: {
vertex: "/glsl/gles2/direct-3d-curve.vs.glsl",
fragment: "/glsl/gles2/direct-curve.fs.glsl",
},
direct3DInterior: {
vertex: "/glsl/gles2/direct-3d-interior.vs.glsl",
fragment: "/glsl/gles2/direct-interior.fs.glsl",
},
ecaaEdgeDetect: {
vertex: "/glsl/gles2/ecaa-edge-detect.vs.glsl",
fragment: "/glsl/gles2/ecaa-edge-detect.fs.glsl",
@ -78,6 +88,8 @@ export interface ShaderMap<T> {
blit: T;
directCurve: T;
directInterior: T;
direct3DCurve: T;
direct3DInterior: T;
ecaaEdgeDetect: T;
ecaaCover: T;
ecaaLine: T;

8
demo/client/src/svg-demo.ts
View File

@ -235,6 +235,14 @@ class SVGDemoView extends PathfinderDemoView {
return transform;
}
protected get directCurveProgramName(): keyof ShaderMap<void> {
return 'directCurve';
}
protected get directInteriorProgramName(): keyof ShaderMap<void> {
return 'directInterior';
}
private appController: SVGDemoController;
camera: OrthographicCamera;

8
demo/client/src/text-demo.ts
View File

@ -490,6 +490,14 @@ class TextDemoView extends MonochromePathfinderView {
return glmatrix.mat4.create();
}
protected get directCurveProgramName(): keyof ShaderMap<void> {
return 'directCurve';
}
protected get directInteriorProgramName(): keyof ShaderMap<void> {
return 'directInterior';
}
atlasFramebuffer: WebGLFramebuffer;
atlasDepthTexture: WebGLTexture;

7
demo/client/src/view.ts
View File

@ -279,7 +279,7 @@ export abstract class PathfinderDemoView extends PathfinderView {
this.gl.disable(this.gl.BLEND);
// Set up the implicit cover interior VAO.
const directInteriorProgram = this.shaderPrograms.directInterior;
const directInteriorProgram = this.shaderPrograms[this.directInteriorProgramName];
this.gl.useProgram(directInteriorProgram.program);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexPositions);
this.gl.vertexAttribPointer(directInteriorProgram.attributes.aPosition,
@ -315,7 +315,7 @@ export abstract class PathfinderDemoView extends PathfinderView {
this.gl.blendFunc(this.gl.SRC_ALPHA, this.gl.ONE_MINUS_SRC_ALPHA);
// Set up the direct curve VAO.
const directCurveProgram = this.shaderPrograms.directCurve;
const directCurveProgram = this.shaderPrograms[this.directCurveProgramName];
this.gl.useProgram(directCurveProgram.program);
this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.meshes.bVertexPositions);
this.gl.vertexAttribPointer(directCurveProgram.attributes.aPosition,
@ -425,6 +425,9 @@ export abstract class PathfinderDemoView extends PathfinderView {
protected abstract get worldTransform(): glmatrix.mat4;
protected abstract get directCurveProgramName(): keyof ShaderMap<void>;
protected abstract get directInteriorProgramName(): keyof ShaderMap<void>;
protected antialiasingStrategy: AntialiasingStrategy | null;
gl: WebGLRenderingContext;

42
shaders/gles2/direct-3d-curve.vs.glsl Normal file
View File

@ -0,0 +1,42 @@
// pathfinder/shaders/gles2/direct-3d-curve.vs.glsl
//
// Copyright (c) 2017 The Pathfinder Project Developers.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
precision highp float;
uniform mat4 uTransform;
uniform ivec2 uPathColorsDimensions;
uniform ivec2 uPathTransformDimensions;
uniform sampler2D uPathColors;
uniform sampler2D uPathTransform;
attribute vec2 aPosition;
attribute vec2 aTexCoord;
attribute float aPathID;
attribute float aSign;
varying vec4 vColor;
varying vec2 vPathID;
varying vec2 vTexCoord;
varying float vSign;
void main() {
int pathID = int(aPathID);
vec4 pathTransform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
vec2 position = transformVertexPositionST(aPosition, pathTransform);
gl_Position = uTransform * vec4(position, 0.0, 1.0);
vColor = fetchFloat4Data(uPathColors, pathID, uPathColorsDimensions);
vPathID = packPathID(pathID);
vTexCoord = vec2(aTexCoord) / 2.0;
vSign = aSign;
}

36
shaders/gles2/direct-3d-interior.vs.glsl Normal file
View File

@ -0,0 +1,36 @@
// pathfinder/shaders/gles2/direct-3d-interior.vs.glsl
//
// Copyright (c) 2017 The Pathfinder Project Developers.
//
// Licensed under the Apache License, Version 2.0 <LICENSE-APACHE or
// http://www.apache.org/licenses/LICENSE-2.0> or the MIT license
// <LICENSE-MIT or http://opensource.org/licenses/MIT>, at your
// option. This file may not be copied, modified, or distributed
// except according to those terms.
precision highp float;
uniform mat4 uTransform;
uniform ivec2 uPathColorsDimensions;
uniform ivec2 uPathTransformDimensions;
uniform sampler2D uPathColors;
uniform sampler2D uPathTransform;
attribute vec2 aPosition;
attribute float aPathID;
varying vec4 vColor;
varying vec2 vPathID;
void main() {
int pathID = int(aPathID);
vec4 pathTransform = fetchFloat4Data(uPathTransform, pathID, uPathTransformDimensions);
vec2 position = transformVertexPositionST(aPosition, pathTransform);
gl_Position = uTransform * vec4(position, 0.0, 1.0);
vColor = fetchFloat4Data(uPathColors, pathID, uPathColorsDimensions);
vPathID = packPathID(pathID);
}