diff --git a/src/mol-gl/webgl/context.ts b/src/mol-gl/webgl/context.ts
index b849f9f9ae06d4120d3576d4f6be6936d128708d..2b3edcf6fe520a300336e3a841a4d980c73d7a43 100644
--- a/src/mol-gl/webgl/context.ts
+++ b/src/mol-gl/webgl/context.ts
@@ -137,6 +137,7 @@ export interface WebGLContext {
 
     currentProgramId: number
     currentMaterialId: number
+    currentRenderVariant: string
 
     bufferCount: number
     framebufferCount: number
@@ -265,6 +266,7 @@ export function createContext(gl: GLRenderingContext): WebGLContext {
 
         currentProgramId: -1,
         currentMaterialId: -1,
+        currentRenderVariant: '',
 
         bufferCount: 0,
         framebufferCount: 0,
diff --git a/src/mol-gl/webgl/render-item.ts b/src/mol-gl/webgl/render-item.ts
index 5c64e5879f3e119bb658dacb6418cff19e4a5d4f..108cfdbf2e874710bcd1434b9ae0bf6538a6f845 100644
--- a/src/mol-gl/webgl/render-item.ts
+++ b/src/mol-gl/webgl/render-item.ts
@@ -140,6 +140,10 @@ export function createRenderItem(ctx: WebGLContext, drawMode: DrawMode, shaderCo
             const program = programs[variant].value
             const vertexArray = vertexArrays[variant]
             program.setUniforms(uniformValueEntries)
+            if (ctx.currentRenderVariant !== variant) {
+                ctx.currentMaterialId = -1
+                ctx.currentRenderVariant = variant
+            }
             if (materialId === -1 || materialId !== ctx.currentMaterialId) {
                 // console.log('materialId changed or -1', materialId)
                 program.setUniforms(materialUniformValueEntries)