mapbox / mapbox/mapbox-gl-js

Porting mapboxgl-js to Qml/Canvas3D

Open
#10,796 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

environment-specific :desktop_computer:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

Hi
As far as i know, the mapboxgl-native isn't actively developed anymore and Qt/Qml users wont get updates and new features like terrain and fog, so as Qml user i started porting js to Qml, the Qml engine support es5 and some features of es6 and also theres QtCanvas3D module which implements WebGL like API's. the Canvas3D module has example projects which some of them are based on three.js, so conceptually and practically softwares developed with WebGL could also work with Canvas3D.
There are some differences between Qml JS engine and browser ones, however as far as i know none of them are blocker. for example there isn't DOM API's in Qml.

I started porting the JS version to Qml, there are some DOM dependencies like document global objects, methods like createElement, getElementById and ..., i have developed simple DOM like environment with Qml objects and fixed lots of missing dependencies.
The 'this' behavior in arrow functions was different i think due to strict mode, so i have to transpile it using babel to get function(){ } instead () => { } . (i can't figure out how integrate babel presets into build system, sorry i came from c++/native world, anybody can help me!?).

Right now, the codes are based on v2.3.0-master, i separated shared, mapboxgl and worker js files and all the interaction and inclusions are ok, no warnings are generated, style and sprite/tiles get fetched and render function called at 10 times a second (limited by me), I debugged into the render function and draw function of layers get called in all required render passes, but nothing drawn on screen.

One of the main differences of Canvas3D item and html canvas is context initialization, in html canvas when the canvas is created the getContext('webgl') could be called for getting gl context, but in Canvas3D we should wait for initialized signal gets fired and the context will be available, so i created the Canvas3D in advance and then initialized the Map.

**Edit** I can get background layer rendered while tiles are loading independently but tiles are black (tested with satellite style), where should i check for error or something problematic ?!

can anybody help me through this?!

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reviewing the separated shared, mapboxgl, and worker JavaScript files, then trace Canvas3D context initialization into the render and layer draw functions. Reproduce the current state where the background renders but tiles are black, and inspect the style, sprite, and tile loading path. Done means the port renders map tiles correctly in Qml/Canvas3D with no missing runtime dependencies.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics, frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.