{"id":16153422,"url":"https://github.com/yonet/tsconf2020demo","last_synced_at":"2025-06-16T12:33:26.816Z","repository":{"id":48314050,"uuid":"296782269","full_name":"Yonet/TSConf2020Demo","owner":"Yonet","description":"A TypeScript BabylonJS Demo for TSConf 2020","archived":false,"fork":false,"pushed_at":"2023-03-05T12:43:43.000Z","size":27758,"stargazers_count":9,"open_issues_count":9,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T18:54:53.612Z","etag":null,"topics":["babylon","typescript"],"latest_commit_sha":null,"homepage":"http://bit.ly/tsconf2020","language":"TypeScript","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/Yonet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2020-09-19T03:56:59.000Z","updated_at":"2023-03-05T06:59:29.000Z","dependencies_parsed_at":"2024-10-27T19:25:53.173Z","dependency_job_id":null,"html_url":"https://github.com/Yonet/TSConf2020Demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"Yonet/Babylon4Hackathon","purl":"pkg:github/Yonet/TSConf2020Demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yonet%2FTSConf2020Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yonet%2FTSConf2020Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yonet%2FTSConf2020Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yonet%2FTSConf2020Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yonet","download_url":"https://codeload.github.com/Yonet/TSConf2020Demo/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yonet%2FTSConf2020Demo/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260162645,"owners_count":22968097,"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":["babylon","typescript"],"created_at":"2024-10-10T01:12:04.662Z","updated_at":"2025-06-16T12:33:26.751Z","avatar_url":"https://github.com/Yonet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# TSConf 2020 WebXR Demo\n\n[WebXR](https://www.w3.org/TR/webxr/) demo app for [TSConf2020](https://tsconf.io/).\n\n[![Getting started with WebXR Augmented Reality using Babylon.js](http://img.youtube.com/vi/RaB_Uyqx6Q4/0.jpg)](https://www.youtube.com/watch?v=RaB_Uyqx6Q4)\n\n## Technologies\n\n* [BabylonJS](https://www.babylonjs.com/)\n* [Azure Computer Vision](https://docs.microsoft.com/azure/cognitive-services/computer-vision/?WT.mc_id=aiml-8438-ayyonet)\n* [WebXR](https://docs.microsoft.com/windows/mixed-reality/develop/web/webxr-overview?WT.mc_id=spatial-8871-ayyonet)\n* [TypeScript](https://www.typescriptlang.org/?WT.mc_id=spatial-8871-ayyonet)\n* [BabylonJS-webpack-es6 starter](https://github.com/RaananW/babylonjs-webpack-es6) by [Raanan Weber](https://github.com/RaananW)\n* [Mixed Reality](https://docs.microsoft.com/windows/mixed-reality/develop/web/javascript-development-overview?WT.mc_id=spatial-8871-ayyonet)\n* [BabylonJS Playground](https://playground.babylonjs.com)\n* [BabylonJS documentation](https://doc.babylonjs.com)\n* [BabylonJS WebXR Docs](https://doc.babylonjs.com/how_to/introduction_to_webxr)\n* Check out more [Cognitive Services](https://azure.microsoft.com/services/cognitive-services/?WT.mc_id=aiml-8438-ayyonet), for [Sentiment](https://docs.microsoft.com/azure/databricks/scenarios/databricks-sentiment-analysis-cognitive-services?toc=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fcognitive-services%2Ftext-analytics%2Ftoc.json\u0026bc=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fbread%2Ftoc.json\u0026WT.mc_id=aiml-8438-ayyonet) and [Spatial analysis](https://docs.microsoft.com/legal/cognitive-services/computer-vision/responsible-use-deployment?context=/azure/cognitive-services/Computer-vision/context/context\u0026WT.mc_id=aiml-8438-ayyonet), [Anamoly Detection](https://docs.microsoft.com/azure/cognitive-services/anomaly-detector/?WT.mc_id=aiml-8438-ayyonet) and more.\n\n## Getting started\n\nTo run the basic scene:\n\n1. run `npm install` to install the needed dependencies.\n2. run `npm start`\n3. A new window should open in your default browser. if it doesn't, open `http://localhost:8080`\nRunning `npm start` will start the webpack dev server with hot-reloading turned on. Open your favorite editor (mine is VSCode, but you can use nano. we don't discriminate) and start editing.\n\nClick on the headset icon on the bottom left corner to view in immersive mode.\n\n![Click on the glasses icon on the bottom left](assets/images/tsconf.png)\n\nThe entry point for the entire TypeScript application is `./src/index.ts` . Any other file imported in this file will be included in the build.\n\nTo debug, open the browser's dev tool. Source maps are ready to be used. In case you are using VSCode, simply run the default debugger task ( `Launch Chrome against localhost` ) while making sure `npm start` is still running. This will allow you to debug your application straight in your editor.\n\n[![How to debug WebXR on Chrome Dev Tools Tutorial](http://img.youtube.com/vi/r-wSk24Wmpk/0.jpg)](https://www.youtube.com/watch?v=r-wSk24Wmpk)\n\n### Running Computer Vision Sample\n\n![Computer Vision Samples](assets/images/ComputerVision.png)\n\nTo be able to run the demo, you need to sign up for an Azure Cognitive Services Account and add your key and url to the form on [get-printed-text.html](./main/public/get-printed-text.html).\n\n- Sign up for a [free account for Azure for a Cognitive Services](https://azure.microsoft.com/free/?WT.mc_id=aiml-8438-ayyonet) Key.\n- Go to [Azure Portal](https://azure.microsoft.com/features/azure-portal/?WT.mc_id=aiml-8438-ayyonet) to create a Computer Vision resource.\n- Click \"Create Resource\" and search for Computer Vision.\n![Create Resource on Azure Portal](assets/images/createResource.png)\n\n- Once resource is created, on the overview of the resource, find Keys and Endpoints tab.\n\n![Computer Vision Resource Overview](assets/images/resourceOverview.png)\n- Copy and paste your key and endpoint url on the html input and add an image to analyse.\n\nCheck out more [Cognitive Services](https://azure.microsoft.com/services/cognitive-services/?WT.mc_id=aiml-8438-ayyonet), for [Sentiment](https://docs.microsoft.com/azure/databricks/scenarios/databricks-sentiment-analysis-cognitive-services?toc=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fcognitive-services%2Ftext-analytics%2Ftoc.json\u0026bc=https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fazure%2Fbread%2Ftoc.json\u0026WT.mc_id=aiml-8438-ayyonet) and [Spatial analysis](https://docs.microsoft.com/legal/cognitive-services/computer-vision/responsible-use-deployment?context=/azure/cognitive-services/Computer-vision/context/context\u0026WT.mc_id=aiml-8438-ayyonet), [Anamoly Detection](https://docs.microsoft.com/azure/cognitive-services/anomaly-detector/?WT.mc_id=aiml-8438-ayyonet) and more.\n\n## Loading different examples\n\nThe `./src/scenes` directory contains a few examples of scenes that can be loaded. To load a specific scene, add a `?scene=FILENAME` to the URL (i.e. to load the ammo physics demo, use `http://localhost:8080/?scene=physicsWithAmmo` ).\n\n## What else can I do\n\nTo lint your source code run `npm run lint`\nTo build the bundle in order to host it, run `npm run build` . This will bundle your code in production mode, meaning is will minify the code.\n\nBuilding will take some time, as it will build each sample (and create a different module for each). If you want to speed up the process, define the scene you want to render in `createScene.ts` (you can see the comment there)\n\n## What is covered\n\n* Latest typescript version\n* Simple texture loading (using url-loader)\n* dev-server will start on command (webpack-dev-server)\n* A working core-only example of babylon\n* Full debugging with any browser AND VS Code\n* (production) bundle builder.\n* eslint default typescript rules integrated\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyonet%2Ftsconf2020demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyonet%2Ftsconf2020demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyonet%2Ftsconf2020demo/lists"}