p90524618
/
antv-l7
mirror of https://gitee.com/antv-l7/antv-l7
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Passdev (#951) 

* fix: 恢复后处理，修复后处理和拾取的不兼容

* style: lint style
This commit is contained in:
YiQianYao 2022-02-07 17:45:46 +08:00 committed by GitHub
parent 77c5c8f5ea
commit 186f6c21f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 96 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/core/src/services/renderer/IUniform.ts
View File

@ -12,4 +12,5 @@ export type IUniform =
| boolean
| IFramebuffer
| ITexture2D
| IStruct;
| IStruct
| null;

2
packages/core/src/services/renderer/passes/BasePostProcessingPass.ts
View File

@ -20,7 +20,7 @@ import { IUniform } from '../IUniform';
@injectable()
export default class BasePostProcessingPass<InitializationOptions = {}>
implements IPostProcessingPass<InitializationOptions> {
// @inject(TYPES.IShaderModuleService)
@inject(TYPES.IShaderModuleService)
protected shaderModuleService: IShaderModuleService;
protected rendererService: IRendererService;

6
packages/core/src/services/renderer/passes/MultiPassRenderer.ts
View File

@ -63,13 +63,13 @@ export default class MultiPassRenderer implements IMultiPassRenderer {
for (const pass of this.passes) {
await pass.render(this.layer);
}
this.layer.renderModels();
// await this.postProcessor.render(this.layer);
// this.layer.renderModels();
await this.postProcessor.render(this.layer);
}
public resize(width: number, height: number) {
if (this.width !== width || this.height !== height) {
// this.postProcessor.resize(width, height);
this.postProcessor.resize(width, height);
this.width = width;
this.height = height;
}

34
packages/core/src/services/renderer/passes/PostProcessor.ts
View File

@ -80,23 +80,23 @@ export default class PostProcessor implements IPostProcessor {
@postConstruct()
private init() {
// const { createFramebuffer, createTexture2D } = this.rendererService;
// this.readFBO = createFramebuffer({
// color: createTexture2D({
// width: 1,
// height: 1,
// wrapS: gl.CLAMP_TO_EDGE,
// wrapT: gl.CLAMP_TO_EDGE,
// }),
// });
// this.writeFBO = createFramebuffer({
// color: createTexture2D({
// width: 1,
// height: 1,
// wrapS: gl.CLAMP_TO_EDGE,
// wrapT: gl.CLAMP_TO_EDGE,
// }),
// });
const { createFramebuffer, createTexture2D } = this.rendererService;
this.readFBO = createFramebuffer({
color: createTexture2D({
width: 1,
height: 1,
wrapS: gl.CLAMP_TO_EDGE,
wrapT: gl.CLAMP_TO_EDGE,
}),
});
this.writeFBO = createFramebuffer({
color: createTexture2D({
width: 1,
height: 1,
wrapS: gl.CLAMP_TO_EDGE,
wrapT: gl.CLAMP_TO_EDGE,
}),
});
}
private isLastEnabledPass(index: number): boolean {

7
packages/core/src/services/renderer/passes/RenderPass.ts
View File

@ -25,15 +25,14 @@ export default class RenderPass<
public render(layer: ILayer) {
const { useFramebuffer, clear } = this.rendererService;
// const readFBO = layer.multiPassRenderer.getPostProcessor().getReadFBO();
useFramebuffer(null, () => {
const readFBO = layer.multiPassRenderer.getPostProcessor().getReadFBO();
useFramebuffer(readFBO, () => {
clear({
color: [0, 0, 0, 0],
depth: 1,
stencil: 0,
// framebuffer: readFBO,
framebuffer: readFBO,
});
// render to post processor
layer.multiPassRenderer.setRenderFlag(false);
layer.render();

22
packages/layers/src/core/BaseLayer.ts
View File

@ -266,10 +266,11 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// 设置配置项
const sceneId = this.container.get<string>(TYPES.SceneID);
// 初始化图层配置项
const { enableMultiPassRenderer = false } = this.rawConfig;
this.configService.setLayerConfig(sceneId, this.id, {
enableMultiPassRenderer,
});
// const { enableMultiPassRenderer = false } = this.rawConfig;
// this.configService.setLayerConfig(sceneId, this.id, {
// enableMultiPassRenderer,
// });
this.configService.setLayerConfig(sceneId, this.id, this.rawConfig);
// 全局容器服务
@ -570,9 +571,20 @@ export default class BaseLayer<ChildLayerStyleOptions = {}> extends EventEmitter
// } else {
// this.renderModels();
// }
// TODO: this.getEncodedData().length !== 0 这个判断是为了解决在 2.5.x 引入数据纹理后产生的 空数据渲染导致 texture 超出上限问题
if (this.getEncodedData().length !== 0) {
this.renderModels();
if (this.multiPassRenderer && this.multiPassRenderer.getRenderFlag()) {
// multi render 开始执行 multiPassRender 的渲染流程
this.multiPassRenderer.render();
} else if (this.multiPassRenderer) {
// renderPass 触发的渲染
this.renderModels();
} else {
this.renderModels();
}
// this.renderModels();
}
// this.renderModels();

50
packages/layers/src/plugins/MultiPassRendererPlugin.ts
View File

@ -77,11 +77,11 @@ export default class MultiPassRendererPlugin implements ILayerPlugin {
});
layer.hooks.beforeRender.tap('MultiPassRendererPlugin', () => {
// if (this.enabled) {
// // 渲染前根据 viewport 调整 FBO size
// const { width, height } = rendererService.getViewportSize();
// layer.multiPassRenderer.resize(width, height);
// }
if (this.enabled) {
// 渲染前根据 viewport 调整 FBO size
const { width, height } = rendererService.getViewportSize();
layer.multiPassRenderer.resize(width, height);
}
});
}
@ -99,31 +99,31 @@ export default class MultiPassRendererPlugin implements ILayerPlugin {
const { enablePicking, enableTAA } = layer.getLayerConfig();
// picking pass if enabled
if (enablePicking) {
multiPassRenderer.add(normalPassFactory('pixelPicking'));
}
// use TAA pass if enabled instead of render pass
// if (enableTAA) {
// multiPassRenderer.add(normalPassFactory('taa'));
// } else {
// // render all layers in this pass
// multiPassRenderer.add(normalPassFactory('render'));
// if (enablePicking) {
// multiPassRenderer.add(normalPassFactory('pixelPicking'));
// }
// use TAA pass if enabled instead of render pass
if (enableTAA) {
multiPassRenderer.add(normalPassFactory('taa'));
} else {
// render all layers in this pass
multiPassRenderer.add(normalPassFactory('render'));
}
// post processing
// normalizePasses(passes).forEach(
// (pass: [string, { [key: string]: unknown }]) => {
// const [passName, initializationOptions] = pass;
// multiPassRenderer.add(
// postProcessingPassFactory(passName),
// initializationOptions,
// );
// },
// );
normalizePasses(passes).forEach(
(pass: [string, { [key: string]: unknown }]) => {
const [passName, initializationOptions] = pass;
multiPassRenderer.add(
postProcessingPassFactory(passName),
initializationOptions,
);
},
);
// 末尾为固定的 CopyPass
// multiPassRenderer.add(postProcessingPassFactory('copy'));
multiPassRenderer.add(postProcessingPassFactory('copy'));
return multiPassRenderer;
}

3
packages/layers/src/plugins/PixelPickingPlugin.ts
View File

@ -35,7 +35,8 @@ export default class PixelPickingPlugin implements ILayerPlugin {
) {
// TODO: 由于 Shader 目前无法根据是否开启拾取进行内容修改，因此即使不开启也需要生成 a_PickingColor
layer.hooks.init.tap('PixelPickingPlugin', () => {
const { enablePicking } = layer.getLayerConfig();
// const { enablePicking, enableMultiPassRenderer } = layer.getLayerConfig();
const enablePicking = true;
styleAttributeService.registerStyleAttribute({
name: 'pickingColor',
type: AttributeType.Attribute,

1
stories/MultiPassRenderer/components/Blur.tsx
View File

@ -35,6 +35,7 @@ export default class Blur extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
passes: [
[
'blurH',

22
stories/MultiPassRenderer/components/ColorHalftone.tsx
View File

@ -1,5 +1,5 @@
// @ts-ignore
import { PolygonLayer, Scene } from '@antv/l7';
import { PolygonLayer, PointLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import * as dat from 'dat.gui';
import * as React from 'react';
@ -35,8 +35,10 @@ export default class ColorHalftone extends React.Component {
}),
});
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
// enablePicking: true,
enablePicking: false,
// enableHighlight: true,
enableMultiPassRenderer: true,
passes: [
[
'colorHalftone',
@ -50,6 +52,7 @@ export default class ColorHalftone extends React.Component {
layer
.source(data)
.size('name', [0, 10000, 50000, 30000, 100000])
.active(true)
.color('name', [
'#2E8AE6',
'#69D1AB',
@ -65,6 +68,19 @@ export default class ColorHalftone extends React.Component {
scene.addLayer(layer);
let pointLayer = new PointLayer({ zIndex: 2 })
.source([{ lng: 130, lat: 30 }], {
parser: {
type: 'json',
x: 'lng',
y: 'lat',
},
})
.shape('circle')
.size(20)
.color('red');
scene.addLayer(pointLayer);
this.scene = scene;
/*** 运行时修改样式属性 ***/

1
stories/MultiPassRenderer/components/CustomPostProcessing.tsx
View File

@ -101,6 +101,7 @@ export default class CustomPostProcessing extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
passes: [
[
'dotScreenEffect',

1
stories/MultiPassRenderer/components/HexagonalPixelate.tsx
View File

@ -36,6 +36,7 @@ export default class HexagonalPixelate extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
passes: [
[
'hexagonalPixelate',

1
stories/MultiPassRenderer/components/Ink.tsx
View File

@ -36,6 +36,7 @@ export default class Ink extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
passes: [
[
'ink',

1
stories/MultiPassRenderer/components/Noise.tsx
View File

@ -36,6 +36,7 @@ export default class Noise extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
passes: ['noise'],
});

1
stories/MultiPassRenderer/components/Sepia.tsx
View File

@ -36,6 +36,7 @@ export default class Sepia extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
passes: ['sepia'],
});

1
stories/MultiPassRenderer/components/TAA.tsx
View File

@ -36,6 +36,7 @@ export default class TAA extends React.Component {
const layer = new PolygonLayer({
enablePicking: true,
enableHighlight: true,
enableMultiPassRenderer: true,
enableTAA: true,
jitterScale: 1,
});