fix alpha in shader, added alpha slider to canvas ui

src/apps/canvas/component/structure-representation.tsx

@@ -19,6 +19,7 @@ export interface StructureRepresentationComponentProps {
 export interface StructureRepresentationComponentState {
     label: string
     visible: boolean
+    alpha: number
     quality: VisualQuality
     colorTheme: ColorThemeProps
 }
@@ -27,6 +28,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
     state = {
         label: this.props.representation.label,
         visible: this.props.representation.props.visible,
+        alpha: this.props.representation.props.alpha,
         quality: this.props.representation.props.quality,
         colorTheme: this.props.representation.props.colorTheme,
     }
@@ -38,6 +40,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
             ...this.state,
             label: repr.label,
             visible: repr.props.visible,
+            alpha: repr.props.alpha,
             quality: repr.props.quality,
             colorTheme: repr.props.colorTheme,
         })
@@ -49,6 +52,7 @@ export class StructureRepresentationComponent extends React.Component<StructureR
 
         if (state.visible !== undefined) props.visible = state.visible
         if (state.quality !== undefined) props.quality = state.quality
+        if (state.alpha !== undefined) props.alpha = state.alpha
         if (state.colorTheme !== undefined) props.colorTheme = state.colorTheme
 
         await repr.createOrUpdate(props).run()
@@ -60,13 +64,14 @@ export class StructureRepresentationComponent extends React.Component<StructureR
             ...this.state,
             visible: repr.props.visible,
             quality: repr.props.quality,
+            alpha: repr.props.alpha,
             colorTheme: repr.props.colorTheme,
         }
         this.setState(newState)
     }
 
     render() {
-        const { label, visible, quality, colorTheme } = this.state
+        const { label, visible, quality, alpha, colorTheme } = this.state
 
         const ct = ColorTheme(colorTheme)
 
@@ -91,6 +96,17 @@ export class StructureRepresentationComponent extends React.Component<StructureR
                         {VisualQualityNames.map(name => <option key={name} value={name}>{name}</option>)}
                     </select>
                 </div>
+                <div>
+                    <span>Opacity </span>
+                    <input type='range'
+                        defaultValue={alpha.toString()}
+                        min='0'
+                        max='1'
+                        step='0.05'
+                        onInput={(e) => this.update({ alpha: parseFloat(e.currentTarget.value) })}
+                    >
+                    </input>
+                </div>
                 <div>
                     <span>Color Theme </span>
                     <select value={colorTheme.name} onChange={(e) => this.update({ colorTheme: { name: e.target.value as ColorThemeName } }) }>

src/mol-geo/representation/structure/visual/element-point.ts

@@ -23,7 +23,7 @@ import { SizeThemeProps } from 'mol-view/theme/size';
 import { LocationIterator } from '../../../util/location-iterator';
 import { createTransforms } from '../../../util/transform-data';
 import { StructureGroup } from '../units-visual';
-import { updateRenderableState } from '../../util';
+import { updateRenderableState, updateBaseValues } from '../../util';
 
 export const DefaultElementPointProps = {
     ...DefaultStructureProps,
@@ -130,6 +130,7 @@ export function ElementPointVisual(): UnitsVisual<ElementPointProps> {
                     await createSizes(ctx, locationIt, newProps.sizeTheme, renderObject.values)
                 }
 
+                updateBaseValues(renderObject.values, newProps)
                 updateRenderableState(renderObject.state, newProps)
 
                 currentProps = newProps

src/mol-gl/shader/chunks/assign-material-color.glsl

@@ -1,5 +1,7 @@
 #if defined(dColorType_uniform)
     vec4 material = vec4(uColor, uAlpha);
-#elif defined(dColorType_attribute) || defined(dColorType_instance) || defined(dColorType_group) || defined(dColorType_groupInstance) || defined(dColorType_objectPicking) || defined(dColorType_instancePicking) || defined(dColorType_groupPicking)
+#elif defined(dColorType_attribute) || defined(dColorType_instance) || defined(dColorType_group) || defined(dColorType_groupInstance)
+    vec4 material = vec4(vColor.rgb, uAlpha);
+#elif defined(dColorType_objectPicking) || defined(dColorType_instancePicking) || defined(dColorType_groupPicking)
     vec4 material = vColor;
 #endif