diff --git a/src/mol-canvas3d/passes/draw.ts b/src/mol-canvas3d/passes/draw.ts
index fc123fb77a79f5bb6c5b70c900cb61a6bae34f38..5a08e5f2a34dbaf6b1951d64e768be4368aa7e61 100644
--- a/src/mol-canvas3d/passes/draw.ts
+++ b/src/mol-canvas3d/passes/draw.ts
@@ -32,7 +32,7 @@ const DepthMergeSchema = {
uTexSize: UniformSpec('v2'),
dPackedDepth: DefineSpec('boolean'),
};
-
+const DepthMergeShaderCode = ShaderCode('depth-merge', quad_vert, depthMerge_frag);
type DepthMergeRenderable = ComputeRenderable<Values<typeof DepthMergeSchema>>
function getDepthMergeRenderable(ctx: WebGLContext, depthTexturePrimitives: Texture, depthTextureVolumes: Texture, packedDepth: boolean): DepthMergeRenderable {
@@ -45,8 +45,7 @@ function getDepthMergeRenderable(ctx: WebGLContext, depthTexturePrimitives: Text
};
const schema = { ...DepthMergeSchema };
- const shaderCode = ShaderCode('depth-merge', quad_vert, depthMerge_frag);
- const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
+ const renderItem = createComputeRenderItem(ctx, 'triangles', DepthMergeShaderCode, schema, values);
return createComputeRenderable(renderItem, values);
}
diff --git a/src/mol-canvas3d/passes/multi-sample.ts b/src/mol-canvas3d/passes/multi-sample.ts
index f4000bf861bcc3d98d0ea13839519e9782beb7ae..eda78ce95f9c6442bb3a559505b2b85f9c05e150 100644
--- a/src/mol-canvas3d/passes/multi-sample.ts
+++ b/src/mol-canvas3d/passes/multi-sample.ts
@@ -28,7 +28,7 @@ const ComposeSchema = {
uTexSize: UniformSpec('v2'),
uWeight: UniformSpec('f'),
};
-
+const ComposeShaderCode = ShaderCode('compose', quad_vert, compose_frag);
type ComposeRenderable = ComputeRenderable<Values<typeof ComposeSchema>>
function getComposeRenderable(ctx: WebGLContext, colorTexture: Texture): ComposeRenderable {
@@ -40,8 +40,7 @@ function getComposeRenderable(ctx: WebGLContext, colorTexture: Texture): Compose
};
const schema = { ...ComposeSchema };
- const shaderCode = ShaderCode('compose', quad_vert, compose_frag);
- const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
+ const renderItem = createComputeRenderItem(ctx, 'triangles', ComposeShaderCode, schema, values);
return createComputeRenderable(renderItem, values);
}
@@ -81,11 +80,14 @@ export class MultiSamplePass {
}
setSize(width: number, height: number) {
+ const [w, h] = this.compose.values.uTexSize.ref.value;
+ if (width !== w || height !== h) {
this.colorTarget.setSize(width, height);
this.composeTarget.setSize(width, height);
this.holdTarget.setSize(width, height);
ValueCell.update(this.compose.values.uTexSize, Vec2.set(this.compose.values.uTexSize.ref.value, width, height));
}
+ }
setProps(props: Partial<MultiSampleProps>) {
if (props.mode !== undefined) this.props.mode = props.mode;
diff --git a/src/mol-canvas3d/passes/pick.ts b/src/mol-canvas3d/passes/pick.ts
index 51538baf255b8be05fa624903f7a5eaec0737cf2..ae87e0ae8a4b814418702bc7ef7d008724faa63d 100644
--- a/src/mol-canvas3d/passes/pick.ts
+++ b/src/mol-canvas3d/passes/pick.ts
@@ -58,8 +58,12 @@ export class PickPass {
setSize(width: number, height: number) {
this.pickScale = this.pickBaseScale / this.webgl.pixelRatio;
- this.pickWidth = Math.ceil(width * this.pickScale);
- this.pickHeight = Math.ceil(height * this.pickScale);
+ const pickWidth = Math.ceil(width * this.pickScale);
+ const pickHeight = Math.ceil(height * this.pickScale);
+
+ if (pickWidth !== this.pickWidth || pickHeight !== this.pickHeight) {
+ this.pickWidth = pickWidth;
+ this.pickHeight = pickHeight;
this.objectPickTarget.setSize(this.pickWidth, this.pickHeight);
this.instancePickTarget.setSize(this.pickWidth, this.pickHeight);
@@ -67,6 +71,7 @@ export class PickPass {
this.setupBuffers();
}
+ }
render() {
const { renderer, scene, camera, handleHelper: { scene: handleScene } } = this;
diff --git a/src/mol-canvas3d/passes/postprocessing.ts b/src/mol-canvas3d/passes/postprocessing.ts
index 6d45c98f65257892b2bd186522803b2d52b6faf1..d5a9914ba17602d33ae3dcbd0b01505bc55d30fb 100644
--- a/src/mol-canvas3d/passes/postprocessing.ts
+++ b/src/mol-canvas3d/passes/postprocessing.ts
@@ -44,26 +44,7 @@ const PostprocessingSchema = {
uOutlineScale: UniformSpec('f'),
uOutlineThreshold: UniformSpec('f'),
};
-
-export const PostprocessingParams = {
- occlusion: PD.MappedStatic('off', {
- on: PD.Group({
- kernelSize: PD.Numeric(4, { min: 1, max: 32, step: 1 }),
- bias: PD.Numeric(0.5, { min: 0, max: 1, step: 0.01 }),
- radius: PD.Numeric(64, { min: 0, max: 256, step: 1 }),
- }),
- off: PD.Group({})
- }, { cycle: true, description: 'Darken occluded crevices with the ambient occlusion effect' }),
- outline: PD.MappedStatic('off', {
- on: PD.Group({
- scale: PD.Numeric(1, { min: 0, max: 10, step: 1 }),
- threshold: PD.Numeric(0.8, { min: 0, max: 5, step: 0.01 }),
- }),
- off: PD.Group({})
- }, { cycle: true, description: 'Draw outline around 3D objects' })
-};
-export type PostprocessingProps = PD.Values<typeof PostprocessingParams>
-
+const PostprocessingShaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag);
type PostprocessingRenderable = ComputeRenderable<Values<typeof PostprocessingSchema>>
function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, depthTexture: Texture, packedDepth: boolean, props: Partial<PostprocessingProps>): PostprocessingRenderable {
@@ -92,12 +73,30 @@ function getPostprocessingRenderable(ctx: WebGLContext, colorTexture: Texture, d
};
const schema = { ...PostprocessingSchema };
- const shaderCode = ShaderCode('postprocessing', quad_vert, postprocessing_frag);
- const renderItem = createComputeRenderItem(ctx, 'triangles', shaderCode, schema, values);
+ const renderItem = createComputeRenderItem(ctx, 'triangles', PostprocessingShaderCode, schema, values);
return createComputeRenderable(renderItem, values);
}
+export const PostprocessingParams = {
+ occlusion: PD.MappedStatic('off', {
+ on: PD.Group({
+ kernelSize: PD.Numeric(4, { min: 1, max: 32, step: 1 }),
+ bias: PD.Numeric(0.5, { min: 0, max: 1, step: 0.01 }),
+ radius: PD.Numeric(64, { min: 0, max: 256, step: 1 }),
+ }),
+ off: PD.Group({})
+ }, { cycle: true, description: 'Darken occluded crevices with the ambient occlusion effect' }),
+ outline: PD.MappedStatic('off', {
+ on: PD.Group({
+ scale: PD.Numeric(1, { min: 0, max: 10, step: 1 }),
+ threshold: PD.Numeric(0.8, { min: 0, max: 5, step: 0.01 }),
+ }),
+ off: PD.Group({})
+ }, { cycle: true, description: 'Draw outline around 3D objects' })
+};
+export type PostprocessingProps = PD.Values<typeof PostprocessingParams>
+
export class PostprocessingPass {
target: RenderTarget
props: PostprocessingProps
@@ -116,9 +115,12 @@ export class PostprocessingPass {
}
setSize(width: number, height: number) {
+ const [w, h] = this.renderable.values.uTexSize.ref.value;
+ if (width !== w || height !== h) {
this.target.setSize(width, height);
ValueCell.update(this.renderable.values.uTexSize, Vec2.set(this.renderable.values.uTexSize.ref.value, width, height));
}
+ }
setProps(props: Partial<PostprocessingProps>) {
this.props = produce(this.props, p => {
diff --git a/src/mol-gl/webgl/render-item.ts b/src/mol-gl/webgl/render-item.ts
index 7f3631b426ea04c10b8d6139be198463c3388988..88b9058212e518b9245354db4be0135eb128d7fb 100644
--- a/src/mol-gl/webgl/render-item.ts
+++ b/src/mol-gl/webgl/render-item.ts
@@ -57,7 +57,9 @@ const ComputeRenderVariants = Object.keys(ComputeRenderVariant) as ComputeRender
function createProgramVariant(ctx: WebGLContext, variant: string, defineValues: DefineValues, shaderCode: ShaderCode, schema: RenderableSchema) {
defineValues = { ...defineValues, dRenderVariant: ValueCell.create(variant) };
- schema = { ...schema, dRenderVariant: DefineSpec('string') };
+ if (schema.dRenderVariant === undefined) {
+ Object.defineProperty(schema, 'dRenderVariant', { value: DefineSpec('string') });
+ }
return ctx.resources.program(defineValues, shaderCode, schema);
}