diff --git a/demo/client/src/3d-demo.ts b/demo/client/src/3d-demo.ts index 24d7617e..1d67f0e5 100644 --- a/demo/client/src/3d-demo.ts +++ b/demo/client/src/3d-demo.ts @@ -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 { + return 'direct3DCurve'; + } + + protected get directInteriorProgramName(): keyof ShaderMap { + return 'direct3DInterior'; + } + private _scale: number; private appController: ThreeDController; diff --git a/demo/client/src/camera.ts b/demo/client/src/camera.ts index 20086c90..b6f71563 100644 --- a/demo/client/src/camera.ts +++ b/demo/client/src/camera.ts @@ -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; } diff --git a/demo/client/src/shader-loader.ts b/demo/client/src/shader-loader.ts index 5a53d5e2..69fe9220 100644 --- a/demo/client/src/shader-loader.ts +++ b/demo/client/src/shader-loader.ts @@ -22,6 +22,8 @@ export const SHADER_NAMES: Array> = [ 'blit', 'directCurve', 'directInterior', + 'direct3DCurve', + 'direct3DInterior', 'ecaaEdgeDetect', 'ecaaCover', 'ecaaLine', @@ -44,6 +46,14 @@ const SHADER_URLS: ShaderMap = { 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 { blit: T; directCurve: T; directInterior: T; + direct3DCurve: T; + direct3DInterior: T; ecaaEdgeDetect: T; ecaaCover: T; ecaaLine: T; diff --git a/demo/client/src/svg-demo.ts b/demo/client/src/svg-demo.ts index 81426417..1a14f6d9 100644 --- a/demo/client/src/svg-demo.ts +++ b/demo/client/src/svg-demo.ts @@ -235,6 +235,14 @@ class SVGDemoView extends PathfinderDemoView { return transform; } + protected get directCurveProgramName(): keyof ShaderMap { + return 'directCurve'; + } + + protected get directInteriorProgramName(): keyof ShaderMap { + return 'directInterior'; + } + private appController: SVGDemoController; camera: OrthographicCamera; diff --git a/demo/client/src/text-demo.ts b/demo/client/src/text-demo.ts index 6f3fad64..890413f2 100644 --- a/demo/client/src/text-demo.ts +++ b/demo/client/src/text-demo.ts @@ -490,6 +490,14 @@ class TextDemoView extends MonochromePathfinderView { return glmatrix.mat4.create(); } + protected get directCurveProgramName(): keyof ShaderMap { + return 'directCurve'; + } + + protected get directInteriorProgramName(): keyof ShaderMap { + return 'directInterior'; + } + atlasFramebuffer: WebGLFramebuffer; atlasDepthTexture: WebGLTexture; diff --git a/demo/client/src/view.ts b/demo/client/src/view.ts index b22d3b75..4f1892ea 100644 --- a/demo/client/src/view.ts +++ b/demo/client/src/view.ts @@ -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; + protected abstract get directInteriorProgramName(): keyof ShaderMap; + protected antialiasingStrategy: AntialiasingStrategy | null; gl: WebGLRenderingContext; diff --git a/shaders/gles2/direct-3d-curve.vs.glsl b/shaders/gles2/direct-3d-curve.vs.glsl new file mode 100644 index 00000000..86db7f6d --- /dev/null +++ b/shaders/gles2/direct-3d-curve.vs.glsl @@ -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 or the MIT license +// , 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; +} diff --git a/shaders/gles2/direct-3d-interior.vs.glsl b/shaders/gles2/direct-3d-interior.vs.glsl new file mode 100644 index 00000000..e736a21f --- /dev/null +++ b/shaders/gles2/direct-3d-interior.vs.glsl @@ -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 or the MIT license +// , 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); +}