renamed 'draw' render variant to 'color'

src/apps/image-generator/index.ts

@@ -19,8 +19,8 @@ import { Model, Structure } from 'mol-model/structure';
 import { ajaxGet } from 'mol-util/data-source';
 import { ColorNames } from 'mol-util/color/tables';
 
-const width = 1024
-const height = 768
+const width = 2048
+const height = 1536
 const gl = createContext(width, height, {
     alpha: false,
     antialias: true,
@@ -104,7 +104,7 @@ async function run(id: string, out: string) {
     }
 
     setTimeout(() => {
-        const pixelData = canvas3d.getPixelData('draw')
+        const pixelData = canvas3d.getPixelData('color')
         const png = new PNG({ width, height })
         png.data = Buffer.from(pixelData.array)
         png.pack().pipe(fs.createWriteStream(out)).on('finish', () => {

src/mol-canvas3d/canvas3d.ts

@@ -130,16 +130,16 @@ namespace Canvas3D {
         const controls = TrackballControls.create(input, camera, p.trackball)
         const renderer = Renderer.create(webgl, camera, p.renderer)
 
-        const drawTarget = createRenderTarget(webgl, width, height)
+        const colorTarget = createRenderTarget(webgl, width, height)
         const depthTarget = webgl.extensions.depthTexture ? null : createRenderTarget(webgl, width, height)
         const depthTexture = depthTarget ? depthTarget.texture : createTexture(webgl, 'image-depth', 'depth', 'ushort', 'nearest')
         if (!depthTarget) {
             depthTexture.define(width, height)
-            depthTexture.attachFramebuffer(drawTarget.framebuffer, 'depth')
+            depthTexture.attachFramebuffer(colorTarget.framebuffer, 'depth')
         }
 
-        const postprocessing = new PostprocessingPass(webgl, drawTarget.texture, depthTexture, !!depthTarget, p.postprocessing)
-        const multiSample = new MultiSamplePass(webgl, camera, drawTarget, postprocessing, renderDraw, p.multiSample)
+        const postprocessing = new PostprocessingPass(webgl, colorTarget.texture, depthTexture, !!depthTarget, p.postprocessing)
+        const multiSample = new MultiSamplePass(webgl, camera, colorTarget, postprocessing, renderDraw, p.multiSample)
 
         const pickBaseScale = 0.5
         let pickScale = pickBaseScale / webgl.pixelRatio
@@ -221,10 +221,10 @@ namespace Canvas3D {
 
         function renderDraw() {
             renderer.setViewport(0, 0, width, height)
-            renderer.render(scene, 'draw', true)
+            renderer.render(scene, 'color', true)
             if (debugHelper.isEnabled) {
                 debugHelper.syncVisibility()
-                renderer.render(debugHelper.scene, 'draw', false)
+                renderer.render(debugHelper.scene, 'color', false)
             }
 
             if (postprocessing.enabled && depthTarget) {
@@ -263,7 +263,7 @@ namespace Canvas3D {
                         if (multiSample.enabled) {
                             multiSample.render()
                         } else {
-                            if (postprocessing.enabled) drawTarget.bind()
+                            if (postprocessing.enabled) colorTarget.bind()
                             else webgl.unbindFramebuffer()
                             renderDraw()
                             if (postprocessing.enabled) postprocessing.render(true)
@@ -426,7 +426,7 @@ namespace Canvas3D {
             },
             getPixelData: (variant: GraphicsRenderVariant) => {
                 switch (variant) {
-                    case 'draw': return webgl.getDrawingBufferPixelData()
+                    case 'color': return webgl.getDrawingBufferPixelData()
                     case 'pickObject': return objectPickTarget.getPixelData()
                     case 'pickInstance': return instancePickTarget.getPixelData()
                     case 'pickGroup': return groupPickTarget.getPixelData()
@@ -497,7 +497,7 @@ namespace Canvas3D {
             Viewport.set(camera.viewport, 0, 0, width, height)
             Viewport.set(controls.viewport, 0, 0, width, height)
 
-            drawTarget.setSize(width, height)
+            colorTarget.setSize(width, height)
             postprocessing.setSize(width, height)
             multiSample.setSize(width, height)
 

src/mol-canvas3d/helper/multi-sample.ts

@@ -62,11 +62,11 @@ export class MultiSamplePass {
     private currentTime = 0
     private lastRenderTime = 0
 
-    constructor(private webgl: WebGLContext, private camera: Camera, private drawTarget: RenderTarget, private postprocessing: PostprocessingPass, private renderDraw: () => void, props: Partial<MultiSampleProps>) {
+    constructor(private webgl: WebGLContext, private camera: Camera, private colorTarget: RenderTarget, private postprocessing: PostprocessingPass, private renderDraw: () => void, props: Partial<MultiSampleProps>) {
         const { gl } = webgl
         this.composeTarget = createRenderTarget(webgl, gl.drawingBufferWidth, gl.drawingBufferHeight)
         this.holdTarget = createRenderTarget(webgl, gl.drawingBufferWidth, gl.drawingBufferHeight)
-        this.compose = getComposeRenderable(webgl, drawTarget.texture)
+        this.compose = getComposeRenderable(webgl, colorTarget.texture)
         this.props = { ...PD.getDefaultValues(MultiSampleParams), ...props }
     }
 
@@ -110,7 +110,7 @@ export class MultiSamplePass {
     }
 
     private renderMultiSample() {
-        const { camera, compose, drawTarget, composeTarget, postprocessing, renderDraw, webgl } = this
+        const { camera, compose, colorTarget, composeTarget, postprocessing, renderDraw, webgl } = this
         const { gl, state } = webgl
 
         // based on the Multisample Anti-Aliasing Render Pass
@@ -124,10 +124,10 @@ export class MultiSamplePass {
         const roundingRange = 1 / 32
 
         camera.viewOffset.enabled = true
-        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawTarget.texture)
+        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : colorTarget.texture)
         compose.update()
 
-        const { width, height } = drawTarget
+        const { width, height } = colorTarget
 
         // render the scene multiple times, each slightly jitter offset
         // from the last and accumulate the results.
@@ -144,7 +144,7 @@ export class MultiSamplePass {
             ValueCell.update(compose.values.uWeight, sampleWeight)
 
             // render scene and optionally postprocess
-            drawTarget.bind()
+            colorTarget.bind()
             renderDraw()
             if (postprocessing.enabled) postprocessing.render(false)
 
@@ -178,7 +178,7 @@ export class MultiSamplePass {
     }
 
     private renderTemporalMultiSample() {
-        const { camera, compose, drawTarget, composeTarget, holdTarget, postprocessing, renderDraw, webgl } = this
+        const { camera, compose, colorTarget, composeTarget, holdTarget, postprocessing, renderDraw, webgl } = this
         const { gl, state } = webgl
 
         // based on the Multisample Anti-Aliasing Render Pass
@@ -197,11 +197,11 @@ export class MultiSamplePass {
         const i = this.sampleIndex
 
         if (i === 0) {
-            drawTarget.bind()
+            colorTarget.bind()
             renderDraw()
             if (postprocessing.enabled) postprocessing.render(false)
             ValueCell.update(compose.values.uWeight, 1.0)
-            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawTarget.texture)
+            ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : colorTarget.texture)
             compose.update()
 
             holdTarget.bind()
@@ -212,11 +212,11 @@ export class MultiSamplePass {
         const sampleWeight = 1.0 / offsetList.length
 
         camera.viewOffset.enabled = true
-        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : drawTarget.texture)
+        ValueCell.update(compose.values.tColor, postprocessing.enabled ? postprocessing.target.texture : colorTarget.texture)
         ValueCell.update(compose.values.uWeight, sampleWeight)
         compose.update()
 
-        const { width, height } = drawTarget
+        const { width, height } = colorTarget
 
         // render the scene multiple times, each slightly jitter offset
         // from the last and accumulate the results.
@@ -227,7 +227,7 @@ export class MultiSamplePass {
             camera.updateMatrices()
 
             // render scene and optionally postprocess
-            drawTarget.bind()
+            colorTarget.bind()
             renderDraw()
             if (postprocessing.enabled) postprocessing.render(false)
 

src/mol-gl/renderer.ts

@@ -184,7 +184,7 @@ namespace Renderer {
             state.enable(gl.DEPTH_TEST)
 
             if (clear) {
-                if (variant === 'draw') {
+                if (variant === 'color') {
                     state.clearColor(bgColor[0], bgColor[1], bgColor[2], 1.0)
                 } else {
                     state.clearColor(1, 1, 1, 1)
@@ -192,7 +192,7 @@ namespace Renderer {
                 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
             }
 
-            if (variant === 'draw') {
+            if (variant === 'color') {
                 for (let i = 0, il = renderables.length; i < il; ++i) {
                     const r = renderables[i]
                     if (r.state.opaque) renderObject(r, variant)

src/mol-gl/scene.ts

@@ -36,8 +36,8 @@ function calculateBoundingSphere(renderables: Renderable<RenderableValues & Base
 }
 
 function renderableSort(a: Renderable<RenderableValues & BaseValues>, b: Renderable<RenderableValues & BaseValues>) {
-    const drawProgramIdA = a.getProgram('draw').id
-    const drawProgramIdB = b.getProgram('draw').id
+    const drawProgramIdA = a.getProgram('color').id
+    const drawProgramIdB = b.getProgram('color').id
     const materialIdA = a.materialId
     const materialIdB = b.materialId
     const zA = a.values.boundingSphere.ref.value.center[2]

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

@@ -48,7 +48,7 @@ export interface RenderItem<T extends string> {
 //
 
 const GraphicsRenderVariantDefines = {
-    'draw': {},
+    'color': {},
     'pickObject': { dColorType: ValueCell.create('objectPicking') },
     'pickInstance': { dColorType: ValueCell.create('instancePicking') },
     'pickGroup': { dColorType: ValueCell.create('groupPicking') },