Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support custom layer types powered by WebGL #281

Closed
edenh opened this issue Feb 7, 2014 · 25 comments
Closed

Support custom layer types powered by WebGL #281

edenh opened this issue Feb 7, 2014 · 25 comments
Labels
cross-platform 📺 Requires coordination with Mapbox GL Native (style specification, rendering tests, etc.) feature 🍏

Comments

@edenh
Copy link
Contributor

edenh commented Feb 7, 2014

@ansis and I have discussed the possibility of allowing people to write custom glsl shaders. While the learning curve is fairly steep, the possibilities are pretty mindblowing when considering integrated data vis and animated, interactive basemaps.

Checkout these shaders for inspiration:
https://www.shadertoy.com/view/MsXGRf
https://www.shadertoy.com/view/Msl3Rr
https://www.shadertoy.com/view/XdsGDB
http://glsl.heroku.com/e#13858.13
http://glsl.heroku.com/e#13880.2

I'm not really sure exactly how we would accomplish this, but hoping for discussion here.

cc @mourner @kkaefer @yhahn

@mourner mourner added this to the future milestone Jun 24, 2014
@jfirebaugh
Copy link
Contributor

No current plans to do this.

@enjalot
Copy link

enjalot commented Jan 20, 2016

I know this is closed but I'd love to see it for things like controlling saturation or other levels on a raster layer.
custom shaders on a layer could potentially enable arbitrary clipping via mask images which would be fun too.

@lucaswoj lucaswoj reopened this Jan 21, 2016
@lucaswoj lucaswoj changed the title Custom shaders Support custom layer types Jan 21, 2016
@lucaswoj
Copy link
Contributor

This is worth leaving open, now that we "support" this in gl-native

@mourner
Copy link
Member

mourner commented Jan 21, 2016

things like controlling saturation or other levels on a raster layer

@enjalot can't you control saturation and other stuff with raster paint properties?

@lucaswoj
Copy link
Contributor

As I said in #1742, this would be less scary if we had a GL state tracking abstraction #145

@enjalot
Copy link

enjalot commented Jan 21, 2016

@mourner oops I didn't see the other levels besides opacity before. I still believe that this could lead to very interesting customizations! depth of field, blurs, animations and a lot of other shiny stuff 💯

@lucaswoj
Copy link
Contributor

lucaswoj commented Aug 1, 2016

EDIT: A newer specification is discussed in #281 (comment) below 👇


Here's our plan for implementing this feature:

  • There will be a new style layer type called "custom"
  • Developers can register a rendering callback for each custom layer
  • When a custom layer is drawn, the callback is called and passed the WebGL context within in a declarative state-tracking wrapper a la OpenGL state management system #145
  • The callback may draw directly to the WebGL framebuffer (higher performance, must use declarative state-tracking wrapper) or copy content from another framebuffer (lower performance, no restrictions on rendering)
  • Custom layers must use the GL state tracker correctly or else the map may not render correctly or the application may stop working

@lucaswoj
Copy link
Contributor

lucaswoj commented Sep 14, 2016

Based on the experience we've had with custom layer types on GL Native and custom sources in GL JS, I'm proposing a new specification:

interface StyleLayer {
    getRendererAtoms(
        camera: Camera,
        callback: (error: Error, atoms: Array<RendererAtom>) => void
    );
}
  • We will create a reference implementation of the StyleLayer interface that copies content from another GL context (allowing the use of 3rd party canvas wrappers)
  • We will refactor existing layer types to use the same interface internally, allowing composability
  • We will refactor the custom source interface to use a similar mechanism (Map#addCustomSource(source: StyleSource))

@lucaswoj
Copy link
Contributor

I'm on board with that plan if the overhead isn't too big.

@mourner
Copy link
Member

mourner commented Nov 29, 2016

Given that we do 500-1000 draw calls per frame with vast state changes between them, 2 more shouldn't make much difference. We could also introduce a "red button" option to forego state resets completely (with "use at your own risk" label).

For resetting state, there's an existing module we might find useful: https://github.com/stackgl/gl-reset

@kronick
Copy link

kronick commented Nov 30, 2016

For reference, Mapzen supports something similar to what @mourner is suggesting ("augment existing shaders" that draw each layer) allows creation of maps like this: https://mapzen.com/blog/behind-the-scenes-tron2/

tron

Here's how they're integrated: https://mapzen.com/documentation/tangram/Shaders-Overview/ and some of their modular shader "blocks": http://tangrams.github.io/blocks/

This could be a very performant way of natively supporting some cool animated visualizations that right now are being built external to the core (such as with Uber's Deck.gl).

@lbud
Copy link
Contributor

lbud commented Feb 1, 2017

This was inadvertently closed due to some 🌳 history magic (the commit message that closed this intended to close style-spec's issue of the same number) — reopening.

@lbud lbud reopened this Feb 1, 2017
@lucaswoj lucaswoj added the cross-platform 📺 Requires coordination with Mapbox GL Native (style specification, rendering tests, etc.) label Feb 21, 2017
@lucaswoj lucaswoj changed the title Support custom WebGL-powered layer types Support custom-shader-powered layer types Feb 21, 2017
@lucaswoj lucaswoj changed the title Support custom-shader-powered layer types Support custom layer types powered by WebGL Mar 21, 2017
@gerbsen
Copy link

gerbsen commented Jul 18, 2017

Hey there, are there any new plans/timelines for this feature?

@terion-name
Copy link

@mourner applying shaders to map layers (as in your demo) — is very, very powerful and awesome thing and very expected from a webgl-map. Did something move in this direction?

@kaligrafy
Copy link

kaligrafy commented Dec 7, 2017

The hack proposed by @mourner no longer work since 0.39

I used that a lot. If someone can fix the hack, it would be very appreciated, since it worked very well and was easy to implement! Until we get an official way to do this.

@mourner
Copy link
Member

mourner commented Dec 7, 2017

Hey, I'll try to update the hack to work with recent releases. However should really look into exposing a proper API for this.

@kaligrafy
Copy link

Thanks a lot! I hope there will be an API for that too!

@mourner
Copy link
Member

mourner commented Apr 5, 2018

Opened a new issue with a summary of our current thinking about this API: #6456 — closing this issue in favor of the new one. Let's discuss there.

@mourner mourner closed this as completed Apr 5, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cross-platform 📺 Requires coordination with Mapbox GL Native (style specification, rendering tests, etc.) feature 🍏
Projects
None yet
Development

No branches or pull requests