Framebuffer refactor

flow-typed/window.js

@@ -121,8 +121,9 @@ declare interface Window extends EventTarget, IDBEnvironment {
     Image: typeof Image;
     ImageData: typeof ImageData;
     URL: typeof URL;
-    webkitURL: typeof URL;
     URLSearchParams: typeof URLSearchParams;
+    WebGLFramebuffer: typeof WebGLFramebuffer;
+    webkitURL: typeof URL;
     WheelEvent: typeof WheelEvent;
     Worker: typeof Worker;
     XMLHttpRequest: typeof XMLHttpRequest;

src/gl/context.js

@@ -1,6 +1,7 @@
 // @flow
 const IndexBuffer = require('./index_buffer');
 const VertexBuffer = require('./vertex_buffer');
+const Framebuffer = require('./framebuffer');
 const State = require('./state');
 const {
     ClearColor,
@@ -87,6 +88,10 @@ class Context {
     pixelStoreUnpack: State<number>;
     pixelStoreUnpackPremultiplyAlpha: State<boolean>;
 
+    extTextureFilterAnisotropic: any;
+    extTextureFilterAnisotropicMax: any;
+    extTextureHalfFloat: any;
+
     constructor(gl: WebGLRenderingContext) {
         this.gl = gl;
         this.extVertexArrayObject = this.gl.getExtension('OES_vertex_array_object');
@@ -118,6 +123,21 @@ class Context {
         this.bindVertexArrayOES = this.extVertexArrayObject && new State(new BindVertexArrayOES(this));
         this.pixelStoreUnpack = new State(new PixelStoreUnpack(this));
         this.pixelStoreUnpackPremultiplyAlpha = new State(new PixelStoreUnpackPremultiplyAlpha(this));
+
+        this.extTextureFilterAnisotropic = (
+            gl.getExtension('EXT_texture_filter_anisotropic') ||
+            gl.getExtension('MOZ_EXT_texture_filter_anisotropic') ||
+            gl.getExtension('WEBKIT_EXT_texture_filter_anisotropic')
+        );
+        if (this.extTextureFilterAnisotropic) {
+            this.extTextureFilterAnisotropicMax = gl.getParameter(this.extTextureFilterAnisotropic.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
+        }
+
+        this.extTextureHalfFloat = gl.getExtension('OES_texture_half_float');
+        if (this.extTextureHalfFloat) {
+            gl.getExtension('OES_texture_half_float_linear');
+        }
+
     }
 
     createIndexBuffer(array: TriangleIndexArray | LineIndexArray, dynamicDraw?: boolean) {
@@ -128,6 +148,21 @@ class Context {
         return new VertexBuffer(this, array, dynamicDraw);
     }
 
+    createRenderbuffer(storageFormat: number, width: number, height: number) {
+        const gl = this.gl;
+
+        const rbo = gl.createRenderbuffer();
+        this.bindRenderbuffer.set(rbo);
+        gl.renderbufferStorage(gl.RENDERBUFFER, storageFormat, width, height);
+        this.bindRenderbuffer.set(null);
+
+        return rbo;
+    }
+
+    createFramebuffer(width: number, height: number) {
+        return new Framebuffer(this, width, height);
+    }
+
     clear({color, depth}: ClearArgs) {
         const gl = this.gl;
         let mask = 0;

src/gl/framebuffer.js

@@ -0,0 +1,39 @@
+// @flow
+const State = require('./state');
+const { ColorAttachment, DepthAttachment } = require('./value');
+
+import type Context from './context';
+
+class Framebuffer {
+    context: Context;
+    width: number;
+    height: number;
+    framebuffer: WebGLFramebuffer;
+    colorAttachment: State<?WebGLTexture>;
+    depthAttachment: State<?WebGLRenderbuffer>;
+
+    constructor(context: Context, width: number, height: number) {
+        this.context = context;
+        this.width = width;
+        this.height = height;
+        const gl = context.gl;
+        const fbo = this.framebuffer = gl.createFramebuffer();
+
+        this.colorAttachment = new State(new ColorAttachment(context, fbo));
+        this.depthAttachment = new State(new DepthAttachment(context, fbo));
+    }
+
+    destroy() {
+        const gl = this.context.gl;
+
+        const texture = this.colorAttachment.get();
+        if (texture) gl.deleteTexture(texture);
+
+        const renderbuffer = this.depthAttachment.get();
+        if (renderbuffer) gl.deleteRenderbuffer(renderbuffer);
+
+        gl.deleteFramebuffer(this.framebuffer);
+    }
+}
+
+module.exports = Framebuffer;

src/gl/state.js

@@ -17,11 +17,19 @@ class State<T> {
     }
 
     set(t: T) {
-        if (!this.value.constructor.equal(this.current, t)) {
+        if (this.dirty || !this.value.constructor.equal(this.current, t)) {
             this.current = t;
             this.value.set(t);
         }
     }
+
+    isDirty(): boolean {
+        return this.dirty;
+    }
+
+    setDirty(): void {
+        this.dirty = true;
+    }
 }
 
 module.exports = State;

src/gl/value.js

@@ -15,7 +15,6 @@ import type {
     ViewportType,
 } from './types';
 
-
 export interface Value<T> {
     context: Context;
     static default(context?: Context): T;
@@ -324,6 +323,51 @@ class PixelStoreUnpackPremultiplyAlpha extends ContextValue implements Value<boo
     }
 }
 
+/**
+ * Framebuffer values
+ */
+class FramebufferValue extends ContextValue {
+    context: Context;
+    parent: WebGLFramebuffer;
+
+    constructor(context: Context, parent: WebGLFramebuffer) {
+        super(context);
+        this.parent = parent;
+    }
+}
+
+class ColorAttachment extends FramebufferValue implements Value<?WebGLTexture> {
+    static default() { return null; }
+
+    set(v: ?WebGLTexture): void {
+        const gl = this.context.gl;
+        this.context.bindFramebuffer.set(this.parent);
+        // note: it's possible to attach a renderbuffer to the color
+        // attachment point, but thus far MBGL only uses textures for color
+        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, v, 0);
+    }
+
+    static equal(a, b): boolean {
+        return a === b;
+    }
+}
+
+class DepthAttachment extends FramebufferValue implements Value<?WebGLRenderbuffer> {
+    static default() { return null; }
+
+    set(v: ?WebGLRenderbuffer): void {
+        const gl = this.context.gl;
+        this.context.bindFramebuffer.set(this.parent);
+        // note: it's possible to attach a texture to the depth attachment
+        // point, but thus far MBGL only uses renderbuffers for depth
+        gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, v);
+    }
+
+    static equal(a, b): boolean {
+        return a === b;
+    }
+}
+
 module.exports = {
     ClearColor,
     ClearDepth,
@@ -352,4 +396,7 @@ module.exports = {
     BindVertexArrayOES,
     PixelStoreUnpack,
     PixelStoreUnpackPremultiplyAlpha,
+
+    ColorAttachment,
+    DepthAttachment,
 };

src/render/draw_fill_extrusion.js

@@ -2,6 +2,7 @@
 
 const glMatrix = require('@mapbox/gl-matrix');
 const pattern = require('./pattern');
+const Texture = require('./texture');
 const Color = require('../style-spec/util/color');
 const mat3 = glMatrix.mat3;
 const mat4 = glMatrix.mat4;
@@ -20,14 +21,8 @@ function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLa
         return;
     }
 
-    if (painter.renderPass === '3d') {
-        const context = painter.context;
-
-        context.stencilTest.set(false);
-        context.depthTest.set(true);
-
-        context.clear({ color: Color.transparent });
-        context.depthMask.set(true);
+    if (painter.renderPass === 'offscreen') {
+        drawToExtrusionFramebuffer(painter, layer);
 
         for (let i = 0; i < coords.length; i++) {
             drawExtrusion(painter, source, layer, coords[i]);
@@ -37,6 +32,39 @@ function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLa
     }
 }
 
+function drawToExtrusionFramebuffer(painter, layer) {
+    const context = painter.context;
+    const gl = context.gl;
+
+    let renderTarget = layer.viewportFrame;
+
+    if (painter.depthRboNeedsClear) {
+        painter.setupOffscreenDepthRenderbuffer();
+    }
+
+    if (!renderTarget) {
+        const texture = new Texture(context, {width: painter.width, height: painter.height, data: null}, gl.RGBA);
+        texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+
+        renderTarget = layer.viewportFrame = context.createFramebuffer(painter.width, painter.height);
+        renderTarget.colorAttachment.set(texture.texture);
+    }
+
+    context.bindFramebuffer.set(renderTarget.framebuffer);
+    renderTarget.depthAttachment.set(painter.depthRbo);
+
+    if (painter.depthRboNeedsClear) {
+        context.clear({ depth: 1 });
+        painter.depthRboNeedsClear = false;
+    }
+
+    context.stencilTest.set(false);
+    context.depthTest.set(true);
+
+    context.clear({ color: Color.transparent });
+    context.depthMask.set(true);
+}
+
 function drawExtrusionTexture(painter, layer) {
     const renderedTexture = layer.viewportFrame;
     if (!renderedTexture) return;
@@ -48,8 +76,8 @@ function drawExtrusionTexture(painter, layer) {
     context.stencilTest.set(false);
     context.depthTest.set(false);
 
-    gl.activeTexture(gl.TEXTURE0);
-    gl.bindTexture(gl.TEXTURE_2D, renderedTexture.texture);
+    context.activeTexture.set(gl.TEXTURE0);
+    gl.bindTexture(gl.TEXTURE_2D, renderedTexture.colorAttachment.get());
 
     gl.uniform1f(program.uniforms.u_opacity, layer.paint.get('fill-extrusion-opacity'));
     gl.uniform1i(program.uniforms.u_image, 0);