Added credits and contributions + lint-fix

CHANGELOG.md

@@ -6,6 +6,7 @@ Note that since we don't clearly distinguish between a public and private interf
 
 ## [Unreleased]
 
+- Integration of Dual depth peeling - OIT method
 - Fix wboit in Safari >=15 (add missing depth renderbuffer to wboit pass)
 
 ## [v3.14.0] - 2022-08-20

package.json

@@ -89,7 +89,8 @@
     "Ludovic Autin <autin@scripps.edu>",
     "Michal Malý <michal.maly@ibt.cas.cz>",
     "Jiří Černý <jiri.cerny@ibt.cas.cz>",
-    "Panagiotis Tourlas <panagiot_tourlov@hotmail.com>"
+    "Panagiotis Tourlas <panagiot_tourlov@hotmail.com>",
+    "Gianluca Tomasello <giagitom@gmail.com>"
   ],
   "license": "MIT",
   "devDependencies": {

src/mol-canvas3d/canvas3d.ts

@@ -3,6 +3,7 @@
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author David Sehnal <david.sehnal@gmail.com>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { BehaviorSubject, Subscription } from 'rxjs';
@@ -287,7 +288,8 @@ namespace Canvas3D {
 
     export function create({ webgl, input, passes, attribs, assetManager }: Canvas3DContext, props: Partial<Canvas3DProps> = {}): Canvas3D {
         const p: Canvas3DProps = { ...DefaultCanvas3DParams, ...props };
-
+        console.trace();
+        console.log(props);
         const reprRenderObjects = new Map<Representation.Any, Set<GraphicsRenderObject>>();
         const reprUpdatedSubscriptions = new Map<Representation.Any, Subscription>();
         const reprCount = new BehaviorSubject(0);
@@ -920,4 +922,4 @@ namespace Canvas3D {
             Viewport.set(controls.viewport, x, y, width, height);
         }
     }
-}
+}

src/mol-canvas3d/passes/dpoit.ts

@@ -2,6 +2,8 @@
  * Copyright (c) 2020 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Gianluca Tomasello <giagitom@gmail.com>
+ *
+ * Adapted from https://github.com/tsherif/webgl2examples, The MIT License, Copyright © 2017 Tarek Sherif, Shuai Shao 
  */
 
 import { QuadSchema, QuadValues } from '../../mol-gl/compute/util';
@@ -91,61 +93,61 @@ export class DpoitPass {
     }
 
     bind() {
-        const { state, gl, extensions : { blendMinMax, drawBuffers } } = this.webgl;
+        const { state, gl, extensions: { blendMinMax, drawBuffers } } = this.webgl;
 
-        //initialize
+        // initialize
         this.passCount = 0;
 
         this.blendBackFramebuffer.bind();
-        state.clearColor(0, 0, 0, 0); //correct blending when texture is cleared with background color (for example state.clearColor(1,1,1,0) on white background)
+        state.clearColor(0, 0, 0, 0); // correct blending when texture is cleared with background color (for example state.clearColor(1,1,1,0) on white background)
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.depthFramebuffers[0].bind()
+        this.depthFramebuffers[0].bind();
         drawBuffers!.drawBuffers([gl.NONE, gl.NONE, drawBuffers!.COLOR_ATTACHMENT2]);
         state.clearColor(this.DEPTH_CLEAR_VALUE, this.DEPTH_CLEAR_VALUE, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.depthFramebuffers[1].bind()
+        this.depthFramebuffers[1].bind();
         state.clearColor(-this.MIN_DEPTH, this.MAX_DEPTH, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.colorFramebuffers[0].bind()
+        this.colorFramebuffers[0].bind();
         state.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.colorFramebuffers[1].bind()
+        this.colorFramebuffers[1].bind();
         state.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
         this.depthFramebuffers[0].bind();
-        //rawBuffers!.drawBuffers([gl.NONE, gl.NONE, drawBuffers!.COLOR_ATTACHMENT2]);
+        // rawBuffers!.drawBuffers([gl.NONE, gl.NONE, drawBuffers!.COLOR_ATTACHMENT2]);
         state.blendEquation(blendMinMax!.MAX);
 
-        return { depth: this.depthTextures[1], frontColor: this.colorFrontTextures[1], backColor: this.colorBackTextures[1] }
+        return { depth: this.depthTextures[1], frontColor: this.colorFrontTextures[1], backColor: this.colorBackTextures[1] };
     }
 
     bindDualDepthPeeling() {
-        const { state, gl, extensions : { blendMinMax, drawBuffers } } = this.webgl;
+        const { state, gl, extensions: { blendMinMax, drawBuffers } } = this.webgl;
 
         this.readId = this.passCount % 2;
-        this.writeId = 1 - this.readId;  // ping-pong: 0 or 1
+        this.writeId = 1 - this.readId; // ping-pong: 0 or 1
 
-        this.passCount += 1 //increment for next pass
+        this.passCount += 1; // increment for next pass
 
-        this.depthFramebuffers[this.writeId].bind()
+        this.depthFramebuffers[this.writeId].bind();
         drawBuffers!.drawBuffers([gl.NONE, gl.NONE, drawBuffers!.COLOR_ATTACHMENT2]);
         state.clearColor(this.DEPTH_CLEAR_VALUE, this.DEPTH_CLEAR_VALUE, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.colorFramebuffers[this.writeId].bind()
+        this.colorFramebuffers[this.writeId].bind();
         state.clearColor(0, 0, 0, 0);
         gl.clear(gl.COLOR_BUFFER_BIT);
 
-        this.depthFramebuffers[this.writeId].bind()
+        this.depthFramebuffers[this.writeId].bind();
         drawBuffers!.drawBuffers([drawBuffers!.COLOR_ATTACHMENT0, drawBuffers!.COLOR_ATTACHMENT1, drawBuffers!.COLOR_ATTACHMENT2]);
         state.blendEquation(blendMinMax!.MAX);
 
-        return { depth: this.depthTextures[this.readId], frontColor: this.colorFrontTextures[this.readId], backColor: this.colorBackTextures[this.readId] }
+        return { depth: this.depthTextures[this.readId], frontColor: this.colorFrontTextures[this.readId], backColor: this.colorBackTextures[this.readId] };
     }
 
     bindBlendBack() {
@@ -185,7 +187,7 @@ export class DpoitPass {
     setSize(width: number, height: number) {
         const [w, h] = this.renderable.values.uTexSize.ref.value;
         if (width !== w || height !== h) {
-            for (let i=0;i<2;i++){
+            for (let i = 0; i < 2; i++) {
                 this.depthTextures[i].define(width, height);
                 this.colorFrontTextures[i].define(width, height);
                 this.colorBackTextures[i].define(width, height);
@@ -201,35 +203,34 @@ export class DpoitPass {
     }
 
     private _init() {
-        const { extensions : { drawBuffers } } = this.webgl;
-        for (let i=0;i<2;i++){
-            //depth
+        const { extensions: { drawBuffers } } = this.webgl;
+        for (let i = 0; i < 2; i++) {
+            // depth
             this.depthFramebuffers[i].bind();
             this.depthTextures[i].attachFramebuffer(this.depthFramebuffers[i], 'color2');
             this.colorFrontTextures[i].attachFramebuffer(this.depthFramebuffers[i], 'color0');
             this.colorBackTextures[i].attachFramebuffer(this.depthFramebuffers[i], 'color1');
 
-            //color
+            // color
             this.colorFramebuffers[i].bind();
             drawBuffers!.drawBuffers([drawBuffers!.COLOR_ATTACHMENT0, drawBuffers!.COLOR_ATTACHMENT1]);
             this.colorFrontTextures[i].attachFramebuffer(this.colorFramebuffers[i], 'color0');
             this.colorBackTextures[i].attachFramebuffer(this.colorFramebuffers[i], 'color1');
         }
 
-        //blend back
+        // blend back
         this.blendBackFramebuffer.bind();
         drawBuffers!.drawBuffers([drawBuffers!.COLOR_ATTACHMENT0]);
         this.blendBackTexture.attachFramebuffer(this.blendBackFramebuffer, 'color0');
     }
 
     static isSupported(webgl: WebGLContext) {
-        const { extensions: { drawBuffers, textureFloat, colorBufferFloat, depthTexture, blendMinMax } } = webgl;
-        if (!textureFloat || !colorBufferFloat || !depthTexture || !drawBuffers || !blendMinMax) {
+        const { extensions: { drawBuffers, textureFloat, colorBufferFloat, blendMinMax } } = webgl;
+        if (!textureFloat || !colorBufferFloat || !drawBuffers || !blendMinMax) {
             if (isDebugMode) {
                 const missing: string[] = [];
                 if (!textureFloat) missing.push('textureFloat');
                 if (!colorBufferFloat) missing.push('colorBufferFloat');
-                if (!depthTexture) missing.push('depthTexture');
                 if (!drawBuffers) missing.push('drawBuffers');
                 if (!blendMinMax) missing.push('blendMinMax');
                 console.log(`Missing "${missing.join('", "')}" extensions required for "dpoit"`);
@@ -245,24 +246,24 @@ export class DpoitPass {
 
         const { resources } = webgl;
 
-        //textures
+        // textures
         this.depthTextures = [
-          resources.texture('image-float32', 'rg', 'float', 'nearest'),
-          resources.texture('image-float32', 'rg', 'float', 'nearest')
+            resources.texture('image-float32', 'rg', 'float', 'nearest'),
+            resources.texture('image-float32', 'rg', 'float', 'nearest')
         ];
         this.depthTextures[0].define(width, height);
         this.depthTextures[1].define(width, height);
 
         this.colorFrontTextures = [
-          resources.texture('image-float32', 'rgba', 'float', 'nearest'),
-          resources.texture('image-float32', 'rgba', 'float', 'nearest')
+            resources.texture('image-float32', 'rgba', 'float', 'nearest'),
+            resources.texture('image-float32', 'rgba', 'float', 'nearest')
         ];
         this.colorFrontTextures[0].define(width, height);
         this.colorFrontTextures[1].define(width, height);
 
         this.colorBackTextures = [
-          resources.texture('image-float32', 'rgba', 'float', 'nearest'),
-          resources.texture('image-float32', 'rgba', 'float', 'nearest')
+            resources.texture('image-float32', 'rgba', 'float', 'nearest'),
+            resources.texture('image-float32', 'rgba', 'float', 'nearest')
         ];
         this.colorBackTextures[0].define(width, height);
         this.colorBackTextures[1].define(width, height);
@@ -270,12 +271,12 @@ export class DpoitPass {
         this.blendBackTexture = resources.texture('image-float32', 'rgba', 'float', 'nearest');
         this.blendBackTexture.define(width, height);
 
-        //framebuffers
+        // framebuffers
         this.depthFramebuffers = [resources.framebuffer(), resources.framebuffer()];
         this.colorFramebuffers = [resources.framebuffer(), resources.framebuffer()];
         this.blendBackFramebuffer = resources.framebuffer();
 
-        this.blendBackRenderable = getBlendBackDpoitRenderable(webgl, this.colorBackTextures[0])
+        this.blendBackRenderable = getBlendBackDpoitRenderable(webgl, this.colorBackTextures[0]);
 
         this.renderable = getEvaluateDpoitRenderable(webgl, this.colorFrontTextures[0], this.blendBackTexture);
 

src/mol-canvas3d/passes/draw.ts

@@ -3,6 +3,7 @@
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  * @author Áron Samuel Kovács <aron.kovacs@mail.muni.cz>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { WebGLContext } from '../../mol-gl/webgl/context';
@@ -152,7 +153,7 @@ export class DrawPass {
             this.postprocessing.render(camera, false, transparentBackground, renderer.props.backgroundColor, postprocessingProps);
         }
 
-        let dpoitTextures
+        let dpoitTextures;
         // render transparent primitives and volumes
         if (scene.opacityAverage < 1 || scene.volumes.renderables.length > 0) {
 
@@ -167,13 +168,13 @@ export class DrawPass {
                 renderer.renderDpoitTransparent(scene.volumes, camera, this.depthTextureOpaque, dpoitTextures);
             }
 
-            for (let i=0;i<2;i++){ //not working with 1 pass
+            for (let i = 0; i < 2; i++) { // not working with 1 pass
                 dpoitTextures = this.dpoit.bindDualDepthPeeling();
                 if (scene.opacityAverage < 1) {
-                  renderer.renderDpoitTransparent(scene.primitives, camera, this.depthTextureOpaque, dpoitTextures);
+                    renderer.renderDpoitTransparent(scene.primitives, camera, this.depthTextureOpaque, dpoitTextures);
                 }
                 if (scene.volumes.renderables.length > 0) {
-                  renderer.renderDpoitTransparent(scene.volumes, camera, this.depthTextureOpaque, dpoitTextures);
+                    renderer.renderDpoitTransparent(scene.volumes, camera, this.depthTextureOpaque, dpoitTextures);
                 }
                 this.dpoit.bindBlendBack();
                 this.dpoit.renderBlendBack();
@@ -328,8 +329,8 @@ export class DrawPass {
 
         if (this.wboitEnabled) {
             this._renderWboit(renderer, camera, scene, transparentBackground, props.postprocessing);
-        } else if (this.dpoitEnabled){
-              this._renderDpoit(renderer, camera, scene, transparentBackground, props.postprocessing);
+        } else if (this.dpoitEnabled) {
+            this._renderDpoit(renderer, camera, scene, transparentBackground, props.postprocessing);
         } else {
             this._renderBlended(renderer, camera, scene, !volumeRendering && !postprocessingEnabled && !antialiasingEnabled && toDrawingBuffer, transparentBackground, props.postprocessing);
         }
@@ -415,4 +416,4 @@ export class DrawPass {
         }
         return this.colorTarget;
     }
-}
+}

src/mol-gl/renderable/schema.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { ValueCell } from '../../mol-util';
@@ -168,7 +169,7 @@ export type GlobalUniformValues = Values<GlobalUniformSchema>
 export const GlobalTextureSchema = {
     tDepth: TextureSpec('texture', 'depth', 'ushort', 'nearest'),
 
-    //dpoit
+    // dpoit
     tDpoitDepth: TextureSpec('texture', 'rg', 'float', 'nearest'),
     tDpoitFrontColor: TextureSpec('texture', 'rgba', 'float', 'nearest'),
     tDpoitBackColor: TextureSpec('texture', 'rgba', 'float', 'nearest')
@@ -332,4 +333,4 @@ export const BaseSchema = {
     invariantBoundingSphere: ValueSpec('sphere'),
 } as const;
 export type BaseSchema = typeof BaseSchema
-export type BaseValues = Values<BaseSchema>
+export type BaseValues = Values<BaseSchema>

src/mol-gl/renderer.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { Viewport } from '../mol-canvas3d/camera/util';
@@ -71,7 +72,7 @@ interface Renderer {
     renderWboitOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
     renderWboitTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
     renderDpoitOpaque: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null) => void
-    renderDpoitTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, dpoitTextures : { depth: Texture, frontColor: Texture, backColor: Texture }) => void
+    renderDpoitTransparent: (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, dpoitTextures: { depth: Texture, frontColor: Texture, backColor: Texture }) => void
 
     setProps: (props: Partial<RendererProps>) => void
     setViewport: (x: number, y: number, width: number, height: number) => void
@@ -626,7 +627,7 @@ namespace Renderer {
             if (isTimingMode) ctx.timer.markEnd('Renderer.renderDpoitOpaque');
         };
 
-        const renderDpoitTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, dpoitTextures : { depth: Texture, frontColor: Texture, backColor: Texture }) => {
+        const renderDpoitTransparent = (group: Scene.Group, camera: ICamera, depthTexture: Texture | null, dpoitTextures: { depth: Texture, frontColor: Texture, backColor: Texture }) => {
             if (isTimingMode) ctx.timer.mark('Renderer.renderDpoitTransparent');
 
             state.enable(gl.BLEND);
@@ -815,4 +816,4 @@ namespace Renderer {
     }
 }
 
-export { Renderer };
+export { Renderer };

src/mol-gl/shader/blend-back-dpoit.frag.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Gianluca Tomasello <giagitom@gmail.com>
+ */
+
 export const blendBackDpoit_frag = `
   precision highp float;
 

src/mol-gl/shader/chunks/dpoit-write.glsl.ts

@@ -18,11 +18,8 @@ export const dpoit_write = `
                 if (interior) discard;
             #endif
 
-            // ---------------------------------------------------------
-            // Order Independent Transparency - Dual Depth Peeling
             // adapted from https://github.com/tsherif/webgl2examples
             // The MIT License, Copyright 2017 Tarek Sherif, Shuai Shao
-            // ---------------------------------------------------------
 
             vec2 lastDepth = texture2D(tDpoitDepth, coords).rg;
             vec4 lastFrontColor = texture2D(tDpoitFrontColor, coords);

src/mol-gl/shader/evaluate-dpoit.frag.ts

@@ -1,3 +1,9 @@
+/**
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Gianluca Tomasello <giagitom@gmail.com>
+ */
+
 export const evaluateDpoit_frag = `
 precision highp float;
 

src/mol-gl/webgl/render-item.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { createAttributeBuffers, ElementsBuffer, AttributeKind } from './buffer';
@@ -52,9 +53,9 @@ export interface RenderItem<T extends string> {
 const GraphicsRenderVariant = { colorBlended: '', colorWboit: '', colorDpoit: '', pick: '', depth: '', marking: '' };
 export type GraphicsRenderVariant = keyof typeof GraphicsRenderVariant
 export const GraphicsRenderVariants = Object.keys(GraphicsRenderVariant) as GraphicsRenderVariant[];
-export const GraphicsRenderVariantsBlended = GraphicsRenderVariants.filter(v => !['colorWboit','colorDpoit'].includes(v));
-export const GraphicsRenderVariantsWboit = GraphicsRenderVariants.filter(v => !['colorBlended','colorDpoit'].includes(v));
-export const GraphicsRenderVariantsDpoit = GraphicsRenderVariants.filter(v => !['colorWboit','colorBlended'].includes(v));
+export const GraphicsRenderVariantsBlended = GraphicsRenderVariants.filter(v => !['colorWboit', 'colorDpoit'].includes(v));
+export const GraphicsRenderVariantsWboit = GraphicsRenderVariants.filter(v => !['colorBlended', 'colorDpoit'].includes(v));
+export const GraphicsRenderVariantsDpoit = GraphicsRenderVariants.filter(v => !['colorWboit', 'colorBlended'].includes(v));
 
 const ComputeRenderVariant = { compute: '' };
 export type ComputeRenderVariant = keyof typeof ComputeRenderVariant
@@ -368,4 +369,4 @@ export function createRenderItem<T extends string>(ctx: WebGLContext, drawMode:
             }
         }
     };
-}
+}

src/mol-gl/webgl/texture.ts

@@ -2,6 +2,7 @@
  * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ * @author Gianluca Tomasello <giagitom@gmail.com>
  */
 
 import { WebGLContext } from './context';
@@ -84,11 +85,11 @@ export function getInternalFormat(gl: GLRenderingContext, format: TextureFormat,
                     case 'int': return gl.R32I;
                 }
             case 'rg':
-                switch (type){
-                  case 'ubyte': return gl.RG;
-                  case 'float': return gl.RG32F;
-                  case 'fp16': return gl.RG16F;
-                  case 'int': return gl.RG32I;
+                switch (type) {
+                    case 'ubyte': return gl.RG;
+                    case 'float': return gl.RG32F;
+                    case 'fp16': return gl.RG16F;
+                    case 'int': return gl.RG32I;
                 }
             case 'rgb':
                 switch (type) {