{"id":13451153,"url":"https://github.com/regl-project/regl-camera","last_synced_at":"2025-10-14T20:13:49.790Z","repository":{"id":57352544,"uuid":"65515199","full_name":"regl-project/regl-camera","owner":"regl-project","description":"A camera for regl","archived":false,"fork":false,"pushed_at":"2020-01-05T23:20:52.000Z","size":191,"stargazers_count":48,"open_issues_count":8,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-01T13:53:17.598Z","etag":null,"topics":["javascript","regl","webgl"],"latest_commit_sha":null,"homepage":"https://regl-project.github.io/regl-camera/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/regl-project.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}},"created_at":"2016-08-12T02:04:11.000Z","updated_at":"2024-12-16T17:45:00.000Z","dependencies_parsed_at":"2022-09-16T08:12:03.729Z","dependency_job_id":null,"html_url":"https://github.com/regl-project/regl-camera","commit_stats":null,"previous_names":["mikolalysenko/regl-camera"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/regl-project/regl-camera","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regl-project%2Fregl-camera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regl-project%2Fregl-camera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regl-project%2Fregl-camera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regl-project%2Fregl-camera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/regl-project","download_url":"https://codeload.github.com/regl-project/regl-camera/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/regl-project%2Fregl-camera/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279021005,"owners_count":26086946,"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","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","regl","webgl"],"created_at":"2024-07-31T07:00:49.036Z","updated_at":"2025-10-14T20:13:49.765Z","avatar_url":"https://github.com/regl-project.png","language":"JavaScript","funding_links":[],"categories":["Tools"],"sub_categories":[],"readme":"# regl-camera\nA basic reusable \"turntable\" camera component for [regl](http://regl.party).  (Secretly just [spherical coordinates](https://en.wikipedia.org/wiki/Spherical_coordinate_system).)\n\n## Example\n\n```javascript\nconst regl = require('regl')()\nconst camera = require('regl-camera')(regl, {\n  center: [0, 2.5, 0]\n})\n\nconst bunny = require('bunny')\nconst normals = require('angle-normals')\n\nconst drawBunny = regl({\n  frag: `\n    precision mediump float;\n    varying vec3 vnormal;\n    void main () {\n      gl_FragColor = vec4(abs(vnormal), 1.0);\n    }`,\n  vert: `\n    precision mediump float;\n    uniform mat4 projection, view;\n    attribute vec3 position, normal;\n    varying vec3 vnormal;\n    void main () {\n      vnormal = normal;\n      gl_Position = projection * view * vec4(position, 1.0);\n    }`,\n  attributes: {\n    position: bunny.positions,\n    normal: normals(bunny.cells, bunny.positions)\n  },\n  elements: bunny.cells\n})\n\nregl.frame(() =\u003e {\n  camera((state) =\u003e {\n    if (!state.dirty) return;\n    regl.clear({color: [0, 0, 0, 1]})\n    drawBunny()\n  })\n})\n```\n\n## Install\n\n```\nnpm i regl-camera\n```\n\n## API\n\n### Constructor\n\n#### `var camera = require('regl-camera')(regl[, options])`\n`module.exports` of `regl-camera` is a constructor for the camera.  It takes the following arguments:\n\n* `regl` is a handle to the regl instance\n* `options` is an object with the following optional properties:\n  + `center` which is the center of the camera\n  + `theta` the theta angle for the camera\n  + `phi` the phi angle for the camera\n  + `distance` the distance from the camera eye to the center\n  + `up` is the up vector for the camera\n  + `fovy` is the field of view angle in y direction (defaults to `Math.PI / 4`)\n  + `near` is the near clipping plane in z (defaults to `0.01`)\n  + `far` is the far clipping plane in z (defaults to `1000.0`)\n  + `mouse` set to `false` to turn off mouse events\n  + `damping` multiplier for inertial damping (default 0.9). Set to 0 to disable inertia.\n  + `noScroll` boolean flag to prevent mouse wheel from scrolling the whole window. Default is false.\n  + `element` is an optional DOM element for mouse events (defaults to regl canvas element)\n  + `rotationSpeed` the rotation interactions (default: `1`)\n  + `zoomSpeed` the zoom interactions (default: `1`)\n  + `renderOnDirty` boolean flag to control whether scene is only rendered when the camera state has changed. If true, render can be triggerd at any time by setting `camer.dirty = true`. If false, dirty state can still be detected and used through `context.dirty`.\n\n### Command usage\n\n#### `camera(block)`\n`regl-camera` sets up an environment with the following variables in both the context and uniform blocks:\n\n| Variable | Type | Description |\n|----------|------|-------------|\n| `view`   | `mat4` | The view matrix for the camera |\n| `projection` | `mat4` | The projection matrix for the camera |\n| `center` | `vec3` | The center of the camera |\n| `eye` | `vec3` | The eye coordinates of the camera |\n| `up` | `vec3` | The up vector for the camera matrix |\n| `theta` | `float` | Latitude angle parameter in radians |\n| `phi` | `float` | Longitude angle parameter in radians |\n| `distance` | `float` | Distance from camera to center of objective |\n| `dirty` | `boolean` | Flag set to true when camera state has changed |\n\n**Note**\nThese properties can also be accessed and modified directly by accessing the object, though at the moment you will need to manually set `camera.dirty = true` if relying upon `renderOnDirty`\n\n## License\n(c) 2016 Mikola Lysenko. MIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fregl-project%2Fregl-camera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fregl-project%2Fregl-camera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fregl-project%2Fregl-camera/lists"}