webgl-wind - Wind power visualization with WebGL particles

  •        330

A WebGL-powered visualization of wind power. Capable of rendering up to 1 million wind particles at 60fps.

https://mapbox.github.io/webgl-wind/demo/
https://github.com/mapbox/webgl-wind

Tags
Implementation
License
Platform

   




Related Projects

wind-js - An demo animation of wind on a Canvas layer in the JSAPI

  •    Javascript

This project is an experiment in client-side data processing and visualization. Most of the code in this project is taken from https://github.com/cambecc/earth and has been re-purposed to support easier application to a variety of mapping APIs and Frameworks. The code for this project uses nothing but an HTML5 Canvas element and pure Javascript. The data come from the Global Forecast System which produces a large variety of datasets as continuous global gridded datasets (more info below). The data is passed into a JS class called Windy which takes the bounds of the map, the data, and the canvas element and then applies a Bilinear Interpolation to generate a smooth surface. Once the surface has been generated a function randomly places "particles" onto the canvas at random x/y points. Each particle is then "evolved", moving in a direction and at a velocity dictated by the interpolated surface.

react-map-gl - React friendly API wrapper around MapboxGL JS

  •    Javascript

In addition to exposing MapboxGL functionality to React apps, react-map-gl also integrates seamlessly with deck.gl.browserify - react-map-gl is extensively tested with browserify and works without configuration.

ShaderParticleEngine - A GLSL-heavy particle engine for THREE

  •    Javascript

The purpose of this library is to make creating particle effects using THREE.js and WebGL as simple as possible. The heavy-lifting is done by the GPU, freeing up CPU cycles. Emitters are created by first creating an instance of SPE.Group. It is in the group where ShaderMaterial settings are applied, and the texture for all emitters added to that group is set. Multiple groups can be created, but if efficiency is a high-priority then as few groups as possible should be created. The group takes care of uploading emitter data to the GPU for simulation and rendering, so the fewer chunks of data that get sent the better.

phenomenon - ⚡️ A fast 2kB low-level WebGL API.

  •    Javascript

Phenomenon is a very small, low-level WebGL library that provides the essentials to deliver a high performance experience. Its core functionality is built around the idea of moving millions of particles around using the power of the GPU. Returns an instance of Phenomenon.

mapbox-gl-js - Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL

  •    Javascript

Mapbox GL JS is a JavaScript library for interactive, customizable vector maps on the web. It takes map styles that conform to the Mapbox Style Specification, applies them to vector tiles that conform to the Mapbox Vector Tile Specification, and renders them using WebGL.Mapbox GL JS is part of the cross-platform Mapbox GL ecosystem, which also includes compatible native SDKs for applications on Android, iOS, macOS, Qt, and React Native. Mapbox provides building blocks to add location features like maps, search, and navigation into any experience you create. To get started with GL JS or any of our other building blocks, sign up for a Mapbox account.


WebGL-GPU-Particles - 1 million+ particles being moved around on the GPU via WebGL

  •    Javascript

Treat this as a first teaser of a GPU particle effects / physics library that I'm working on and will open source soon.

vizceral - WebGL visualization for displaying animated traffic graphs

  •    Javascript

Intuitive animated traffic graph visualization using webgl. If a graph of nodes and edges with data about traffic volume is provided, it will render a traffic graph animating the connection volume between nodes.

luma.gl - A JavaScript WebGL Framework for Data Visualization

  •    Javascript

luma.gl's provides efficient and easy-to-use WebGL2-based building blocks enabling high-performance GPU-based data visualizations and computations on your browser.See Examples and Documentation. Change Log.

mapbox-gl-native - Interactive, thoroughly customizable maps in native Android, iOS, macOS, Node

  •    C++

A library for embedding interactive, customizable vector maps into native applications on multiple platforms. It takes stylesheets that conform to the Mapbox Style Specification, applies them to vector tiles that conform to the Mapbox Vector Tile Specification, and renders them using OpenGL. Mapbox GL JS is the WebGL-based counterpart, designed for use on the Web.If your platform or hybrid application framework isn’t listed here, consider embedding Mapbox GL JS using the standard Web capabilities on your platform.

react-mapbox-gl - A React binding of mapbox-gl-js

  •    TypeScript

If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again. Please try to reproduce your problem with the boilerplate before posting an issue.

awesome-webgl - A curated list of awesome WebGL libraries, resources and much more

  •    

This is a curated list of awesome WebGL libraries, resources and much more. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas.

fieldplay - A vector field explorer

  •    Javascript

Vector fields explorer. Made with WebGL, love and passion. more examples...

keras-js - Run Keras models in the browser, with GPU support using WebGL

  •    Javascript

**This project is no longer active. Please check out TensorFlow.js.** The Keras.js demos still work but is no longer updated. Run Keras models in the browser, with GPU support provided by WebGL 2. Models can be run in Node.js as well, but only in CPU mode. Because Keras abstracts away a number of frameworks as backends, the models can be trained in any backend, including TensorFlow, CNTK, etc.

WEST

  •    Java

WEST (Wind Energy Simulation Toolkit) is a wind simulation application. It can be use to obtain high resolution results at various altitudes.

picogl.js - A minimal WebGL 2 rendering library

  •    Javascript

PicoGL.js is minimal WebGL 2 rendering library. It's meant for developers who understand the WebGL 2 rendering pipeline and want to use it, but with a more convenient API. Typical usage of PicoGL.js will involve creating programs, vertex buffers, vertex arrays, uniform buffers, framebuffers, textures, transform feedbacks, and combining them into draw calls. Note that PicoGL.js is not a scene graph library. There are no objects, hierarchies, transforms, materials, etc. It has been designed only to make management of GPU state more convenient. Its conceptual model maps fairly directly to the constructs one deals with when writing directly with the WebGL 2 API. The only higher-level construct is the draw call, which manages sets of related lower-level constructs.

HTML-GL - Get as many FPS as you need and amazing effects by rendering HTML/CSS in WebGL

  •    Javascript

HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have. Using HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL representations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.

encom-globe - 🌎 WebGL globe based on the boardroom scene from Tron: Legacy

  •    Javascript

The Encom Globe is a WebGL-based clone of the globe from the boardroom scene in Tron: Legacy. If you don't recall that scene, check out Bradley Munkowitz's excellent writeup about its production for more information. This version attempts to stay as true to the in-movie original as possible while maintaining a high frame rate on low powered machines and devices. It is getting pretty close to acheiving that goal and mimics most of the details seen on screen, including the loading animations for the globe hexagon particles, the satellites, and the markers.

regl-cnn - Digit recognition with Convolutional Neural Networks in WebGL

  •    Javascript

GPU accelerated handwritten digit recognition with regl. Note that this network will probably be slower than the corresponding network implemented on the CPU. This is because of the overhead associated with transferring data to and from the GPU. But in the future we will attempt implementing more complex networks in the browser, such as Neural Style, and then we think that we will see a significant speedup compared to the CPU.

WebMonkeys - Massively parallel GPU programming on JavaScript, simple and clean.

  •    Javascript

Allows you to spawn thousands of parallel tasks on the GPU with the simplest, dumbest API possible. It works on the browser (with browserify) and on Node.js. It is ES5-compatible and doesn't require any WebGL extension. set/get allow you to send/receive data from the GPU, and work creates a number of parallel tasks (monkeys) that can read, process and rewrite that data. The language used is GLSL 1.0, extended array access (foo(index), usable anywhere on the source), setters (foo(index) := value, usable on the end only), and int i, a global variable with the index of the monkey.

Cesium - An open-source JavaScript library for world-class 3D globes and maps

  •    Javascript

CesiumJS is a JavaScript library for creating 3D globes and 2D maps in a web browser without a plugin. It uses WebGL for hardware-accelerated graphics, and is cross-platform, cross-browser, and tuned for dynamic-data visualization.





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.