yusangeng / Pano.gl
Licence: mit
Equirectangular video/image viewer based on WebGL.
Stars: ✭ 42
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Pano.gl
Pannellum
Pannellum is a lightweight, free, and open source panorama viewer for the web. Built using HTML5, CSS3, JavaScript, and WebGL, it is plug-in free. It can be deployed easily as a single file, just 21kB gzipped, and then embedded into pages as an <iframe>. A configuration utility is included to generate the required code for embedding. An API is included for more advanced integrations.
Stars: ✭ 3,286 (+7723.81%)
Mutual labels: webgl, panorama
Vue Vr
A framework for building VR applications with Vue
Stars: ✭ 348 (+728.57%)
Mutual labels: webgl, panorama
Fijkplayer
ijkplayer for flutter. ijkplayer 的 flutter 封装。 Flutter video/audio player. Flutter media player plugin for android/iOS based on ijkplayer. fijkplayer 是基于 ijkplayer 封装的 flutter 媒体播放器,开箱即用,无需编译 ijkplayer
Stars: ✭ 943 (+2145.24%)
Mutual labels: video-player
Dailymotion Swift Player Sdk Ios
Dailymotion Player SDK for iOS in Swift
Stars: ✭ 29 (-30.95%)
Mutual labels: video-player
Unitystandalonefilebrowser
A native file browser for unity standalone platforms
Stars: ✭ 1,002 (+2285.71%)
Mutual labels: webgl
Phaser
Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.
Stars: ✭ 30,918 (+73514.29%)
Mutual labels: webgl
Playcanvas Spine
Plugin component for PlayCanvas which enables support for Spine animations.
Stars: ✭ 32 (-23.81%)
Mutual labels: webgl
Videojscustomization
HTML5 视频播放器 自定制: React + video.js 详细讲解
Stars: ✭ 32 (-23.81%)
Mutual labels: video-player
G3d
A pure 3D render engine compatible with webgl, running both in browser and gcanvas.
Stars: ✭ 948 (+2157.14%)
Mutual labels: webgl
Mapbox Gl Js
Interactive, thoroughly customizable maps in the browser, powered by vector tiles and WebGL
Stars: ✭ 8,017 (+18988.1%)
Mutual labels: webgl
Langterm
🕹️ WebGL-based VT220 emulator, made as a learning example and frontend for a text adventure
Stars: ✭ 35 (-16.67%)
Mutual labels: webgl
Pixi.js
The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer.
Stars: ✭ 34,982 (+83190.48%)
Mutual labels: webgl
Rn Floating Video Widget
React Native Module for Floating/Popup video player on Android.
Stars: ✭ 35 (-16.67%)
Mutual labels: video-player
Better Chrome Native Video
Add keyboard support to Chrome's native HTML5 video player.
Stars: ✭ 31 (-26.19%)
Mutual labels: video-player
Eog panorama
Panorama viewer plugin for the 'Eye of Gnome' image viewer
Stars: ✭ 30 (-28.57%)
Mutual labels: panorama
3d kibana charts vis
3D Kibana Charts: Pie Chart, Bars Chart, Bubbles Chart
Stars: ✭ 34 (-19.05%)
Mutual labels: webgl
pano.gl
Equirectangular video/image viewer based on WebGL.
Features
- Pure javascript.
- Multiple camera models: perspective/cylindrical/planet/pannini.
Install
npm install pano.gl --save
Build
git clone https://github.com/yusangeng/pano.gl.git
cd pano.gl
npm i
npm run build
The bundle files should be in ./.package
.
Usage
Image Viewer
import FramelessImageViewer 'pano.gl/lib/FramelessImageViewer'
const viewer = new FramelessImageViewer({
el: '#image-viewer-wrap', // container DOM element.
src: '//www.foobar.com/path/to/image',
camera: {
type: 'perspective' // perspective/cylindrical/planet/pannini.
}
})
Video Viewer
import FramelessVideoViewer 'pano.gl/lib/FramelessVideoViewer'
const viewer = new FramelessVideoViewer({
el: '#video-viewer-wrap', // container DOM element.
src: '#video', // <video /> DOM element as texture data source.
camera: {
type: 'perspective' // perspective/cylindrical/planet/pannini.
}
})
Switching Camera
viewer.cameraOptions = {
type: 'cylindrical' // perspective/cylindrical/planet/pannini.
}
Rotating Camera
const deltaX = 1
const deltaY = 2
viewer.rotate(deltaX, deltaY)
Zooming Camera
const delta = 0.1
viewer.zoom(delta)
Enabling / Disabling PTZ
// true: PTZ Enabled, false: PTZ disabled.
viewer.PTZ = false
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].