From 08ecc29d0d9e2a990fe412549a1158e6d7780c4d Mon Sep 17 00:00:00 2001
From: Alexander Rose <alexander.rose@weirdbyte.de>
Date: Sun, 9 Sep 2018 13:55:44 -0700
Subject: [PATCH] fix alpha in shader, added alpha slider to canvas ui

---
 .../component/structure-representation.tsx     | 18 +++++++++++++++++-
 .../structure/visual/element-point.ts          |  3 ++-
 .../shader/chunks/assign-material-color.glsl   |  4 +++-
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/apps/canvas/component/structure-representation.tsx b/src/apps/canvas/component/structure-representation.tsx
index 25eb022ae..bdc194b70 100644
--- a/src/apps/canvas/component/structure-representation.tsx
+++ b/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 } }) }>
diff --git a/src/mol-geo/representation/structure/visual/element-point.ts b/src/mol-geo/representation/structure/visual/element-point.ts
index d0b74c089..eac5fb802 100644
--- a/src/mol-geo/representation/structure/visual/element-point.ts
+++ b/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
diff --git a/src/mol-gl/shader/chunks/assign-material-color.glsl b/src/mol-gl/shader/chunks/assign-material-color.glsl
index 11b177941..bc56340c2 100644
--- a/src/mol-gl/shader/chunks/assign-material-color.glsl
+++ b/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
\ No newline at end of file
-- 
GitLab