{"id":23529550,"url":"https://github.com/magic-script/magic-script-webgl-prism-controller","last_synced_at":"2025-08-19T02:40:32.735Z","repository":{"id":123586898,"uuid":"185518931","full_name":"magic-script/magic-script-webgl-prism-controller","owner":"magic-script","description":"Landscape app class containing a webgl enabled quad.","archived":false,"fork":false,"pushed_at":"2020-08-13T17:08:45.000Z","size":17,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-22T17:24:11.373Z","etag":null,"topics":["javascript","magicscript","webgl"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/magic-script.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","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,"zenodo":null}},"created_at":"2019-05-08T03:11:22.000Z","updated_at":"2020-08-13T17:08:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"c78ba9b0-079e-4357-9daf-1a7e573716f0","html_url":"https://github.com/magic-script/magic-script-webgl-prism-controller","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/magic-script/magic-script-webgl-prism-controller","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magic-script%2Fmagic-script-webgl-prism-controller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magic-script%2Fmagic-script-webgl-prism-controller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magic-script%2Fmagic-script-webgl-prism-controller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magic-script%2Fmagic-script-webgl-prism-controller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/magic-script","download_url":"https://codeload.github.com/magic-script/magic-script-webgl-prism-controller/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/magic-script%2Fmagic-script-webgl-prism-controller/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271092028,"owners_count":24697888,"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-08-19T02:00:09.176Z","response_time":63,"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","magicscript","webgl"],"created_at":"2024-12-25T21:12:23.596Z","updated_at":"2025-08-19T02:40:32.702Z","avatar_url":"https://github.com/magic-script.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MagicScript WebGL PrismController\n\n[![npm version](https://badge.fury.io/js/magic-script-webgl-prism-controller.svg)](https://badge.fury.io/js/magic-script-webgl-prism-controller) [![License](https://img.shields.io/:license-Apache%202.0-blue.svg?style=flat-square)](LICENSE)\n\nHelper library for running webgl code in a Lumun Runtime Quadnode.\n\nThis expands on magic-script-polyfills to add an environment where popular webgl framework such as three.js and xeogl can run out of the box.\n\n## Usage\n\nCreate a normal MagicScript LandScape app and use this PrismController on your prism to enable browser style webgl APIs.\n\n```js\nimport { LandscapeApp } from 'lumin';\nimport { WebGlController } from 'magic-script-webgl-prism-controller';\n\nexport class App extends LandscapeApp {\n  onAppStart () {\n    let prism = this.requestNewPrism([0.5, 0.5, 0.02]);\n    let controller = window.controller = new WebGlController();\n    prism.setPrismController(controller);\n  }\n}\n```\n\nNow, you can consume existing webgl libraries such as three.js, it will render to a quad that's created inside your prism.  Note that this part of the code can also be used in a web browser.\n\n```js\nimport { BoxGeometry, Mesh, MeshBasicMaterial, PerspectiveCamera, Scene, WebGLRenderer } from 'three';\n\nwindow.onload = () =\u003e {\n  // Create an empty scene\n  const scene = new Scene();\n\n  // Create a basic perspective camera\n  const camera = new PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n  camera.position.z = 4;\n\n  // Create and configure a renderer\n  const renderer = new WebGLRenderer({ antialias: true });\n  renderer.setClearColor('#000000');\n  renderer.setSize(window.innerWidth, window.innerHeight);\n\n  // Append Renderer to DOM\n  // Note: WebGLController ignores these calls, only here for browser compat.\n  document.body.appendChild(renderer.domElement);\n\n  // Create a Cube Mesh with basic material\n  const geometry = new BoxGeometry(1, 1, 1);\n  const material = new MeshBasicMaterial({ color: '#433F81' });\n  const cube = new Mesh(geometry, material);\n\n  // Add cube to Scene\n  scene.add(cube);\n\n  // Start rendering/animation.\n  return window.requestAnimationFrame(render);\n\n  function render (time) {\n    window.requestAnimationFrame(render);\n    cube.rotation.x = time / 1000;\n    cube.rotation.y = time / 1200;\n    renderer.render(scene, camera);\n  }\n};\n```\n\n## Installation\n\nOpen a Terminal in your project's folder and run,\n\n```sh\nnpm install magic-script-webgl-prism-controller\n```\n\nor\n\n```sh\nyarn add magic-script-webgl-prism-controller\n```\n\n## License\n\nThis project is licensed under the Apache 2.0 License - see the [LICENSE](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagic-script%2Fmagic-script-webgl-prism-controller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmagic-script%2Fmagic-script-webgl-prism-controller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmagic-script%2Fmagic-script-webgl-prism-controller/lists"}