{"id":17793939,"url":"https://github.com/nora-soderlund/routerenderer","last_synced_at":"2025-04-02T02:20:06.991Z","repository":{"id":161209041,"uuid":"634482679","full_name":"nora-soderlund/RouteRenderer","owner":"nora-soderlund","description":"A pure JavaScript package to render paths, directions, routes, or lines in 3d using nothing but WebGL.","archived":false,"fork":false,"pushed_at":"2023-05-13T17:00:19.000Z","size":220,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-07T17:18:43.263Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nora-soderlund.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-30T09:15:23.000Z","updated_at":"2024-01-16T20:00:54.000Z","dependencies_parsed_at":"2023-07-13T20:16:24.397Z","dependency_job_id":null,"html_url":"https://github.com/nora-soderlund/RouteRenderer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nora-soderlund%2FRouteRenderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nora-soderlund%2FRouteRenderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nora-soderlund%2FRouteRenderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nora-soderlund%2FRouteRenderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nora-soderlund","download_url":"https://codeload.github.com/nora-soderlund/RouteRenderer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246741197,"owners_count":20826078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-27T11:14:35.829Z","updated_at":"2025-04-02T02:20:06.944Z","avatar_url":"https://github.com/nora-soderlund.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# RouteRenderer\nA pure JavaScript package to render paths, directions, routes, or lines in 3d using nothing but WebGL.\n\nhttps://user-images.githubusercontent.com/78360666/236035333-a6c91394-8e8b-4482-877f-3ea463873bb6.mp4\n\nGoogle Maps WebGL Overlay View integration is included.\n\n![Google Maps example](https://github.com/nora-soderlund/RouteRenderer/assets/78360666/8fae58d4-e47e-421b-93ca-a02653d79f66)\n\n# Get started\n## Prerequisites\n- gl-matrix must be loaded before this package, e.g.:\n  \n  ```html\n  \u003cscript\n      src=\"https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js\"\n      integrity=\"sha512-zhHQR0/H5SEBL3Wn6yYSaTTZej12z0hVZKOv3TwCUXT1z5qeqGcXJLLrbERYRScEDDpYIJhPC1fk31gqR783iQ==\"\n      crossorigin=\"anonymous\"\n      defer\u003e\u003c/script\u003e\n  ```\n  \n- Google Maps JS API is required to be loaded before constructing `RouteWebGLOverlayView` **only**.\n  \n  `RouteWebGLOverlayView` is only an adaption of this package for Google Maps, this package works as a core standalone regardless.\n  \n  If you do not plan on using Google Maps, you do not need this.\n  \n## Installation\n- Download the latest release and extract the bundle file(s); or use an existing CDN:\n  \n  ```js\n  \u003cscript src=\"https://www.unpkg.com/routerenderer@latest/dist/bundle.mjs\"\u003e\u003c/script\u003e\n  ```\n  \n- Initialize a `Renderer` instance on a canvas element and set a path, e.g.:\n  \n  ```js\n  function render(renderer, context, now) {\n      renderer.render(context, now);\n\n      window.requestAnimationFrame((now) =\u003e render(renderer, context, now));\n  };\n            \n  const canvas = document.getElementById(\"canvas\");\n\n  canvas.width = screen.width;\n  canvas.height = screen.height;\n\n  const context = canvas.getContext(\"webgl\", {\n      premultipliedAlpha: true\n  });\n\n  const renderer = new RouteRenderer.Renderer({\n    keepMinimumAltitude: true,\n\n    cameraFov: 4,\n\n    cameraRotation: [ .5, 0, 0 ]\n  });\n\n  renderer.registerMouseEvents(canvas);\n\n  renderer.setupContext(context);\n\n  renderer.setPaths([\n    [\n      { x: 0, y: 0, z: 1 },\n      { x: 0, y: 1, z: 1 },\n      { x: .5, y: 1.5, z: 1 }\n    ]\n  ], null, false);\n\n  render(renderer, context, performance.now());\n  ```\n\n# References\n## Renderer\n### Constructor\n- `constructor(options: RendererOptions)`\n\n### Methods\n- `setOptions(options: RendererOptions)`\n\n  Only adds or replaces current options, does not rewrite the entire options object!\n  \n- `setupContext(context: WebGLRenderingContext)`\n\n  Initializes required program information, a WebGL rendering context is required.\n  \n  Must be called before attempting to render.\n\n- `setPaths(paths: any[][], animations: Animation[] | null = null, project: boolean = true, projectionFunction?: (point: { latitude: number; longitude: number; altitude: number; }, options: RendererOptions) =\u003e { x: number; y: number; z: number; }`\n\n  Replaces the current paths with the input paths, note that this is a two dimensional array, each first dimensional item declares a new path, e.g. a leg of a direction step, second dimensional item declares an array of coordinates.\n\n  X and Y are expected to be latitude and longitudes, however, if `project` is passed as false, then X and Y are expected to be raw units.\n  Z is expected to be elevation irregardless of projection. \n  \n  The default projection uses the [World Geodetic System WGS84](https://en.wikipedia.org/wiki/World_Geodetic_System) standard, [same as Google Maps](https://developers.google.com/maps/documentation/javascript/coordinates).\n  To overwrite this projection function with your own, pass a function as the `projectionFunction` parameter.\n  \n- `registerMouseEvents(canvas: HTMLCanvasElement)`\n\n  Sets up mouse interaction with the canvas element for X and Y axis rotations.\n  \n- `render(context: WebGLRenderingContext, now: number, matrix?: Float64Array)`\n\n  Renders the current scene on the passed context, `now` is expected to be a high res timestamp, e.g. from `requestAnimationFrame`, `matrix` can be passed to use in the scene rendering if needed for e.g. Google Maps WebGL Overlay View implementations, etc.\n  \n## WebGLOverlayView\n### Constructor\n- `constructor(renderer: Renderer, paths: any[][])`\n\n  Sets up a Google Maps WebGL Overlay View with a custom projection using the transformer in the draw function.\n  \n  Returns an WebGLOverlayView instance.\n  \n  **This instance overwrites `autoClear`, `center`, `keepPerspectiveProjection` in the options.**\n\n\n## RendererOptions\n- `topColor?: number[];`\n- `bottomColor?: number[];`\n- `startBlockColor?: number[];`\n- `endBlockColor?: number[];`\n- `leftWallColor?: number[];`\n- `rightWallColor?: number[];`\n- `wallColor?: number[];`\n\n  Colors in the format of RGBA arrays, e.g. `[ 255, 0, 0, 255 ]` for solid red.\n  \n  `leftWallColor`, `rightWallColor`, `startBlockColor`, and `endBlockColor` takes priority over `wallColor`. \n\n  Default colors varies but are high contrast and should be changed.\n\n- `wallWidth?: number;`\n\n  Defines how wide the walls should be, default is `0.1` units.\n\n- `elevationGradient?: boolean;`\n- `elevationGradientColors?: number[][];`\n\n  Defines if the walls should have a gradient color for elevation. The color array only accepts 2 items, in the order of lowest (from) to highest (to).\n\n  Default, if enabled, is solid green to solid red.\n\n- `keepMinimumAltitude?: boolean;`\n\n  The path is anchored by the lowest altitude to depth 0, to disable this, set this to true.\n\n- `keepMinimumPositions?: boolean;`\n\n  The path is anchored by top left start position by default to help with centering.\n\n- `keepPerspectiveProjection?: boolean;`\n\n  Initializes the default projection matrix with a field of view, aspect ratio, near- and far clip units.\n  \n  Disable this to use with other contexts, such as the Google Maps WebGL Overlay View.\n\n- `projectionZoomLevel?: number;`\n\n  Defines the zoom level for the Mercator world coordinate projection, default is 4.\n\n  Increase this to get a more detailed (but larger) model.\n  \n  This only applies when a paths is set without a custom projection function, but it is also passed as an option in the options parameter and can be reused.\n\n- `cameraFov?: number;`\n\n  Defines the camera FOV, default is 45.\n\n- `cameraTranslation?: number[];`\n- `cameraRotation?: number[];`\n\n  Defines the camera translation and rotation in the format of XYZ, e.g.: `[ 0, 0, 0 ]`.\n\n- `grid?: boolean;`\n- `gridColor?: number[];`\n- `gridPadding?: number;`\n\n  Defines if a flat panel should cover the ground, default is false.\n\n  If enabled, padding is set to 1 unit default.\n\n## Animation\n- `type: \"distance\" | \"elevation\";`\n\n  Defines the type of the animation, whether to animate the elevation or the distance.\n\n- `forwards: boolean;`\n\n  Defines the direction to move the animation, if repeat is enabled, then this is switched on each animation interval.\n\n  Default is true.\n\n- `interval: number;`\n\n  Defines the animation interval in milliseconds.\n\n- `repeat: boolean;`\n\n  Keeps the animation running forever, if enabled, it switches the forwards property on each animation interval.\n\n- `progress?: AnimationProgress;`\n\n  Used internally to track the animation progress, however, can be used to alter the start or current progress.\n\n## AnimationProgress\n- `elapsed: number;`\n\n  Defines how many milliseconds has surpassed since the animation start.\n\n  If the interval is 2000 milliseconds and elapsed is set to 1000, the animation will have reached 50%.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnora-soderlund%2Frouterenderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnora-soderlund%2Frouterenderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnora-soderlund%2Frouterenderer/lists"}