Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add antialiasing #23

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add antialiasing #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions demo/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ const map = new mapgl.Map('container', {
zoom: 14.1,
pitch: 40,
key: '4970330e-7f1c-4921-808c-0eb7c4e63001',
webglVersion: 2,
});

const deck = new Deck(initDeck2gisProps(map));
Expand Down
4,427 changes: 958 additions & 3,469 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,6 @@
},
"dependencies": {
"@deck.gl/core": "8.8.17",
"2gl": "0.10.2"
"2gl": "0.13.3"
}
}
111 changes: 99 additions & 12 deletions src/deckgl2gisLayer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,8 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
static initDeck2gisProps = (map: Map, deckProps?: CustomRenderProps) =>
initDeck2gisProps(map, deckProps);

private frameBuffer?: RenderTarget;
private frameBuffer?: any;
private colorBuffer?: RenderTarget;
private program?: ShaderProgram;
private vao?: Vao;

Expand Down Expand Up @@ -111,11 +112,12 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
if ((map as any).__deck) {
this.deck = (map as any).__deck;
this.frameBuffer = (this.deck as any).props._2glRenderTarget;
this.colorBuffer = (this.deck as any).props._2glAliasingTarget;
}

if (!this.frameBuffer || !this.deck) {
const mapSize = map.getSize();
this.frameBuffer = new RenderTarget({
this.colorBuffer = new RenderTarget({
size: [
Math.ceil(mapSize[0] * window.devicePixelRatio),
Math.ceil(mapSize[1] * window.devicePixelRatio),
Expand All @@ -124,10 +126,65 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
minFilter: Texture.LinearFilter,
wrapS: Texture.ClampToEdgeWrapping,
wrapT: Texture.ClampToEdgeWrapping,
}).bind(gl);

const targetTextureWidth = Math.ceil(mapSize[0] * window.devicePixelRatio);
const targetTextureHeight = Math.ceil(mapSize[1] * window.devicePixelRatio);

const FRAMEBUFFER = {
RENDERBUFFER: 0,
COLORBUFFER: 1,
};
const fb = [gl.createFramebuffer(), (this.colorBuffer as any)._frameBuffer];

const depthRenderBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, depthRenderBuffer);
gl.renderbufferStorageMultisample(
gl.RENDERBUFFER,
4,
gl.DEPTH_COMPONENT16,
targetTextureWidth,
targetTextureHeight,
);

const colorRenderBuffer = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderBuffer);

gl.renderbufferStorageMultisample(
gl.RENDERBUFFER,
4,
gl.RGBA8,
targetTextureWidth,
targetTextureHeight,
);

gl.bindFramebuffer(gl.FRAMEBUFFER, fb[FRAMEBUFFER.RENDERBUFFER]);

gl.framebufferRenderbuffer(
gl.FRAMEBUFFER,
gl.COLOR_ATTACHMENT0,
gl.RENDERBUFFER,
colorRenderBuffer,
);

gl.framebufferRenderbuffer(
gl.FRAMEBUFFER,
gl.DEPTH_ATTACHMENT,
gl.RENDERBUFFER,
depthRenderBuffer,
);

gl.bindFramebuffer(gl.FRAMEBUFFER, null);

this.frameBuffer = fb[FRAMEBUFFER.RENDERBUFFER];

this.deck = prepareDeckInstance({
map,
gl,
deck: this.props.deck,
renderTarget: this.frameBuffer,
aliasingTarget: this.colorBuffer,
});
const renderTarget = this.frameBuffer.bind(gl);
this.frameBuffer.unbind(gl);
this.deck = prepareDeckInstance({ map, gl, deck: this.props.deck, renderTarget });
}
if (this.deck) {
this.program = (this.deck as any).props._2glProgram;
Expand Down Expand Up @@ -195,6 +252,7 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
!(this.deck as any).layerManager ||
!this.map ||
!this.frameBuffer ||
!this.colorBuffer ||
!this.program ||
!this.vao ||
!this.gl ||
Expand All @@ -213,30 +271,59 @@ export class Deck2gisLayer<LayerT extends Layer> implements DeckCustomLayer {
const renderTarget = this.frameBuffer.bind(this.gl);
onMapResize(this.map, this.deck, renderTarget);
}
this.frameBuffer.bind(gl);
gl.clearColor(1, 1, 1, 0);

gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

_2gisData._2gisCurrentViewport = undefined;
_2gisData._2gisFramestart = false;
} else {
this.frameBuffer.bind(gl);
gl.clearColor(1, 1, 1, 0);
gl.bindFramebuffer(gl.FRAMEBUFFER, this.frameBuffer);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
}

this.frameBuffer.unbind(gl);
gl.bindFramebuffer(gl.FRAMEBUFFER, null);

drawLayer(this.deck, this.map, this);

gl.bindFramebuffer((gl as WebGL2RenderingContext).READ_FRAMEBUFFER, this.frameBuffer);

gl.bindFramebuffer(
(gl as WebGL2RenderingContext).DRAW_FRAMEBUFFER,
(this.colorBuffer as any)._frameBuffer,
);

(gl as WebGL2RenderingContext).clearBufferfv(
(gl as WebGL2RenderingContext).COLOR,
0,
[0.0, 0.0, 0.0, 0.0],
);

(gl as WebGL2RenderingContext).blitFramebuffer(
0,
0,
mapSize[0] * window.devicePixelRatio,
mapSize[1] * window.devicePixelRatio,
0,
0,
mapSize[0] * window.devicePixelRatio,
mapSize[1] * window.devicePixelRatio,
gl.COLOR_BUFFER_BIT,
gl.LINEAR,
);

gl.bindFramebuffer(gl.FRAMEBUFFER, null);
const texture = this.frameBuffer.getTexture();
const texture = this.colorBuffer.getTexture();
texture.enable(gl, 0);
this.program.enable(gl);
this.program.bind(gl, {
iResolution: [
mapSize[0] * window.devicePixelRatio,
mapSize[1] * window.devicePixelRatio,
],
iChannel0: 0,
u_sr2d_texture: 0,
enabled: Number(this.antialiasing),
});

Expand Down
1 change: 1 addition & 0 deletions src/fillTexture.fsh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default 'precision mediump float;\nuniform sampler2D u_sr2d_texture;\nvarying vec2 v_vec2_position;\nvoid main()\n{\n vec4 color = texture2D(u_sr2d_texture, v_vec2_position);\n gl_FragColor = color;\n}\n';
1 change: 1 addition & 0 deletions src/fillTexture.vsh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default 'attribute vec2 a_vec2_position;\nvarying vec2 v_vec2_position;\nvoid main() {\n gl_Position = vec4(a_vec2_position, 0.0, 1.0);\n v_vec2_position = clamp(a_vec2_position, vec2(0,0), vec2(1,1));\n}\n';
1 change: 1 addition & 0 deletions src/fillTextureFXAA.fsh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default 'precision mediump float;\n#define GLSLIFY 1\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\nvarying vec2 vUv;\nuniform vec2 iResolution;\nuniform sampler2D u_sr2d_texture;\nuniform bool enabled;\n#ifndef FXAA_REDUCE_MIN\n #define FXAA_REDUCE_MIN (1.0/ 128.0)\n#endif\n#ifndef FXAA_REDUCE_MUL\n #define FXAA_REDUCE_MUL (1.0 / 8.0)\n#endif\n#ifndef FXAA_SPAN_MAX\n #define FXAA_SPAN_MAX 8.0\n#endif\nvec4 fxaa_1_0(sampler2D tex, vec2 fragCoord, vec2 resolution,\n vec2 v_rgbNW, vec2 v_rgbNE, \n vec2 v_rgbSW, vec2 v_rgbSE, \n vec2 v_rgbM) {\n vec4 color;\n mediump vec2 inverseVP = vec2(1.0 / resolution.x, 1.0 / resolution.y);\n vec3 rgbNW = texture2D(tex, v_rgbNW).xyz;\n vec3 rgbNE = texture2D(tex, v_rgbNE).xyz;\n vec3 rgbSW = texture2D(tex, v_rgbSW).xyz;\n vec3 rgbSE = texture2D(tex, v_rgbSE).xyz;\n vec4 texColor = texture2D(tex, v_rgbM);\n vec3 rgbM = texColor.xyz;\n vec3 luma = vec3(0.299, 0.587, 0.114);\n float lumaNW = dot(rgbNW, luma);\n float lumaNE = dot(rgbNE, luma);\n float lumaSW = dot(rgbSW, luma);\n float lumaSE = dot(rgbSE, luma);\n float lumaM = dot(rgbM, luma);\n float lumaMin = min(lumaM, min(min(lumaNW, lumaNE), min(lumaSW, lumaSE)));\n float lumaMax = max(lumaM, max(max(lumaNW, lumaNE), max(lumaSW, lumaSE)));\n \n mediump vec2 dir;\n dir.x = -((lumaNW + lumaNE) - (lumaSW + lumaSE));\n dir.y = ((lumaNW + lumaSW) - (lumaNE + lumaSE));\n \n float dirReduce = max((lumaNW + lumaNE + lumaSW + lumaSE) *\n (0.25 * FXAA_REDUCE_MUL), FXAA_REDUCE_MIN);\n \n float rcpDirMin = 1.0 / (min(abs(dir.x), abs(dir.y)) + dirReduce);\n dir = min(vec2(FXAA_SPAN_MAX, FXAA_SPAN_MAX),\n max(vec2(-FXAA_SPAN_MAX, -FXAA_SPAN_MAX),\n dir * rcpDirMin)) * inverseVP;\n \n vec3 rgbA = 0.5 * (\n texture2D(tex, fragCoord * inverseVP + dir * (1.0 / 3.0 - 0.5)).xyz +\n texture2D(tex, fragCoord * inverseVP + dir * (2.0 / 3.0 - 0.5)).xyz);\n vec3 rgbB = rgbA * 0.5 + 0.25 * (\n texture2D(tex, fragCoord * inverseVP + dir * -0.5).xyz +\n texture2D(tex, fragCoord * inverseVP + dir * 0.5).xyz);\n float lumaB = dot(rgbB, luma);\n if ((lumaB < lumaMin) || (lumaB > lumaMax))\n color = vec4(rgbA, texColor.a);\n else\n color = vec4(rgbB, texColor.a);\n return color;\n}\nvoid main() {\n \n mediump vec2 fragCoord = vUv * iResolution; \n vec4 color;\n if (enabled) {\n color = fxaa_1_0(u_sr2d_texture, fragCoord, iResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n } else {\n color = texture2D(u_sr2d_texture, vUv);\n }\n gl_FragColor = color;\n}\n';
1 change: 1 addition & 0 deletions src/fillTextureFXAA.vsh.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default 'precision mediump float;\n#define GLSLIFY 1\nvarying vec2 v_rgbNW;\nvarying vec2 v_rgbNE;\nvarying vec2 v_rgbSW;\nvarying vec2 v_rgbSE;\nvarying vec2 v_rgbM;\nuniform vec2 iResolution;\nattribute vec2 a_vec2_position;\nvarying vec2 vUv;\nvoid texcoords_1_0(vec2 fragCoord, vec2 resolution,\nout vec2 v_rgbNW, out vec2 v_rgbNE,\nout vec2 v_rgbSW, out vec2 v_rgbSE,\nout vec2 v_rgbM) {\nvec2 inverseVP = 1.0 / resolution.xy;\nv_rgbNW = (fragCoord + vec2(-1.0, -1.0)) * inverseVP;\nv_rgbNE = (fragCoord + vec2(1.0, -1.0)) * inverseVP;\nv_rgbSW = (fragCoord + vec2(-1.0, 1.0)) * inverseVP;\nv_rgbSE = (fragCoord + vec2(1.0, 1.0)) * inverseVP;\nv_rgbM = vec2(fragCoord * inverseVP);\n}\nvoid main(void) {\n gl_Position = vec4(a_vec2_position, 1.0, 1.0);\n \n \n vUv = (a_vec2_position + 1.0) * 0.5;\n vUv.y = vUv.y;\n vec2 fragCoord = vUv * iResolution;\n texcoords_1_0(fragCoord, iResolution, v_rgbNW, v_rgbNE, v_rgbSW, v_rgbSE, v_rgbM);\n}';
1 change: 0 additions & 1 deletion src/optimized.fsh.ts
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion src/optimized.vsh.ts
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions src/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface MapViewState {
*/
export type CustomRenderInternalProps = {
_2glRenderTarget: RenderTarget;
_2glAliasingTarget: RenderTarget;
_2glProgram: ShaderProgram;
_2glVao: Vao;
_2gisFramestart: boolean;
Expand Down
19 changes: 12 additions & 7 deletions src/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,10 @@ import ShaderProgram from '2gl/ShaderProgram';
import RenderTarget from '2gl/RenderTarget';
import Shader from '2gl/Shader';

import fill_fsh from './optimized.fsh';
import fill_vsh from './optimized.vsh';
//import fill_fsh from './fillTextureFXAA.fsh';
//import fill_vsh from './fillTextureFXAA.vsh';
import fill_fsh from './fillTexture.fsh';
import fill_vsh from './fillTexture.vsh';
import { CustomRenderProps } from './types';
import { DeckProps } from '@deck.gl/core/typed';

Expand All @@ -24,11 +26,13 @@ export function prepareDeckInstance({
gl,
deck,
renderTarget,
aliasingTarget,
}: {
map: Map & { __deck?: Deck | null };
gl: WebGLRenderingContext;
deck?: Deck;
renderTarget: RenderTarget;
renderTarget: any;
aliasingTarget: any;
}): Deck | null {
// Only create one deck instance per context
if (map.__deck) {
Expand All @@ -43,9 +47,10 @@ export function prepareDeckInstance({
useDevicePixels: true,
_2gisFramestart: false,
_2glRenderTarget: renderTarget,
_2glAliasingTarget: aliasingTarget,
_2glProgram: program,
_2glVao: vao,
_framebuffer: (renderTarget as any)._frameBuffer,
_framebuffer: renderTarget as any,
_customRender: (reason: string) => {
// todo need change to public rerender method in mapgl map.triggerRedraw()
map.triggerRerender();
Expand Down Expand Up @@ -258,7 +263,7 @@ function stateBinder(map: Map, layer: Deck2gisLayer<any>) {
export function createVao(program: ShaderProgram) {
const screenVertices = [-1, -1, 1, -1, 1, 1, -1, -1, 1, 1, -1, 1];
return new Vao(program, {
position: new Buffer(new Int8Array(screenVertices), {
a_vec2_position: new Buffer(new Int8Array(screenVertices), {
itemSize: 2,
dataType: Buffer.Byte,
stride: 0,
Expand All @@ -278,9 +283,9 @@ export function createProgram() {
fragment: new Shader('fragment', fill_fsh),
uniforms: [
{ name: 'iResolution', type: '2f' },
{ name: 'iChannel0', type: '1i' },
{ name: 'u_sr2d_texture', type: '1i' },
{ name: 'enabled', type: '1i' },
],
attributes: [{ name: 'position', location: 0 }],
attributes: [{ name: 'a_vec2_position', location: 0 }],
});
}
2 changes: 1 addition & 1 deletion webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ module.exports = (_, argv) => {
devServer: {
contentBase: path.resolve(__dirname, 'dist'),
host: 'localhost',
port: 3000,
port: 3030,
stats: {
modules: false,
hash: false,
Expand Down