Js lovers

Jan 7, 2018Download as PPTX, PDF0 likes76 views

GitPage: https://github.com/shivamsngh/newtsarkit Introduction to Augmented Reality web app using ARToolKit. Based on typescript, ionic and JSARToolKit.

Getting Started with AR
WebApps
JSLovers Meetup
7th of Jan ‘18
11 AM-1 PM
Shivam Singh

Reality
• Virtual Reality
• Augmented Reality
• Mixed Reality

Augmented Reality
• Real-world environment elements are "augmented" by
computer generated inputs.
• Different from Virtual Reality since it does not replace or
simulate the real world.

AR Engines
• ARKit( Apple ) - Suits apple devices
• ARCore( Google ) - Suits high-end android devices
• ARToolKit (Open Source) - Suits Web
• Tango (Google- Project Closed)
• ARjs by “jeromee” - Open source, optimised for 60 FPS
rendering.

ARToolKit
• Tracking library for augmented reality
• Open source and web optimised
• Mobile oriented
• An ASM.jS compilation for ARToolKit is available, known as
JSARToolKit.
• Javascript interface with C++ working under the hood.

Components
• WebRTC
• Device Camera
• Three.JS (WebGL based library)
• AR Engine

WebApp
• An HTML based application.
• Offline support
• Uses service workers for using device functions and
network caching
• Smaller in size
• Supported by all major browsers

WebRTC
• Open source project that provides browsers and mobile
applications with Real-Time Communications (RTC)
capabilities via simple APIs.
• MediaDevices.getUserMedia() method prompts the
user for permission to use a media input which
produces a MediaStream with tracks containing the
requested types of media.

Three.js (WebGL)
• Three.js is a cross-browser JavaScript library/API used
to create and display animated 3D computer graphics in
a web browser.
• Based on WebGL specifications
• Can handle and generate complex objects and has
capability to integrate .OBJ formats created on any
other animation software like Blender etc.

Tracking
• Square Marker
• 2D barcode Markers
• Fiducial markers based
• N number of
trackers(Multitracking) can be
tracked simultaneously but at the
cost of performance.
Square Marker 2D Barcode Marker

2D Barcode Markers
• Training is not required
• Self generating
• Recognition based on Marker ID
• Less number of patterns/ Pattern
restriction
Marker ID 5

How it Works?
• Input processing (Video or Canvas) based on markers
• Tracks the marker
• Determines it’s position and orientation
• Aligns object with marker
• Superimposes the object on marker(screen)

–Synonymous
“Technology can take you to Mars, but not out of your
bed. GET OUT AND EXPLORE”

We'll see in this session how to create 3D HTML5 WebGL games for the web (IE11/Chrome/Firefox & Opera) as well as for some mobile ecosystems. For that, we’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub: https://github.com/BabylonJS/Babylon.js You’ll see how to cover the complete gaming pipeline from the 3D assets created & exported from Blender/3DS Max/Maya to BabylonJS, the various camera's types (touch, device orientation, etc.), the usage of the embedded physic engine. At last, of course, how to implement the game logic in JavaScript. We'll build a simple game from scratch to better understand how to use this free engine.

Mobile applications in a new way with React NativeEugene Zharkov

React Native allows developing mobile apps using JavaScript and React principles instead of traditional languages like Java and Objective-C. It supports iOS and Android and uses components like View, Text, Image and more to build interfaces without HTML or CSS. Setting up a React Native project requires installing Node.js, Watchman, and the React Native CLI to transpile code and debug apps in a similar way to building React web apps.

Flex talk - Egridyongjiew

How to build a serverless helmet detection systemMandar Dharmadhikari

This document discusses building a serverless helmet detection system using various Azure services. It provides an overview of Custom Vision Service, Computer Vision Service, Logic Apps, Azure Functions, and Event Grid. It then discusses the system architecture, demonstrates the code, and provides best practices and lessons learned. These include tips for training models in Custom Vision Service and structuring logging in Azure Functions. The document encourages connecting on LinkedIn and GitHub for further discussion.

Design for HTML5 and Hybrid Mobile ApplicationsAlex Shirazi

The document discusses design resources for supporting multiple screens in mobile app development, including using fixed ratio bitmap images, 9 patch images, and supporting a variety of screen sizes and densities. It also compares the performance of native mobile apps to web/hybrid apps, noting that native apps have faster launch times and instantaneous transitions. Finally, it outlines aspects of user experience design like visual design using tools like Illustrator and Photoshop, as well as wireframing tools, user testing, and UI flows.

Virtualization based on Node.js andQEMUYan Wang

This document discusses virtualizing development environments using Node.js and QEMU. It describes virtualizing desktops, storage, networks, and providing a self-service web portal for provisioning environments as well as integrating with cloud providers like AWS and Linode. The story outlines a team in Bangalore, India that was set up to provide 20 development environments. It also mentions building a scalable enterprise application using HTML5 for remote display, real-time dashboards, and responsive websites.

Html5 (games)chamsddine bouzaine

HTML5 provides capabilities for building games in a cross-platform and lightweight manner without dependencies. It includes powerful APIs like the canvas element for 2D drawing and WebGL for 3D rendering. Common elements of HTML5 games include using <canvas> to define a drawing area, a 2D or 3D API to render shapes and objects, physics engines to simulate movement and interactions, and technologies like local storage for data caching. Tools like game engines, libraries, and bundlers can help develop HTML5 games.

Augmented realitybringiton

This document discusses augmented reality (AR) applications and frameworks. It describes several existing AR applications for different domains like medical, entertainment, and military. It then discusses developing an AR application using an AR framework, which implements basic AR features like shape recognition, depth detection, and rendering. The document proposes an AR framework prototype that offers these features and is cross-platform, with the ability to add or modify components. Test results showed it could support thousands of simultaneous clients.

So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa

The document provides guidance and best practices for developing mobile apps. It discusses prioritizing platforms based on usage share, targeting the needs and behaviors of different user groups, and the advantages of native apps over HTML5 for user experience. It also covers tools for testing across browsers and devices, such as Ringmark, Modernizr, and network monitoring with ARO. Thorough testing on real networks is emphasized to ensure apps degrade gracefully on unstable connections.

Android PresentationBram Vandeputte

Android is a software stack for mobile devices that includes an operating system, middleware and key applications. It allows developers to write managed code in Java for the Dalvik virtual machine. The Android SDK provides tools and APIs to develop applications that use features like its application framework, SQLite database, media support and hardware integration. Developers can create Android applications by defining activities, services and content providers and connecting them with intents in the AndroidManifest file.

Building AR and VR Experiences for Web Apps with JavaScriptFITC

AR/VR in JavaScript Apps discusses emerging technologies for building augmented and virtual reality experiences using web technologies. It introduces key concepts like AR, VR, and XR. It also outlines several JavaScript libraries and frameworks that can be used to create 3D content and immersive experiences, such as Three.js, WebXR, A-Frame, and React 360. The document recommends resources for continued learning and provides examples of how to get started with these technologies.

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick

The document discusses two open-source projects from Intel called Rapid Interface Builder (RIB) and Web Simulator that can be used to develop and debug HTML5 apps. RIB allows quick prototyping of web app UX through a drag-and-drop interface. Web Simulator allows debugging mobile web apps in Chromium by simulating device events and APIs. The document also discusses sample HTML5 apps created by Intel to demonstrate new web technologies and Intel's involvement in web standards.

Mobile native-hacksDevelopmentArc LLC

This document provides 14 lessons and hacks for building native and mobile web applications using JavaScript. It discusses issues like architecting for multiple platforms and environments, structuring the codebase, detecting the platform, improving performance of animations through CSS transitions, handling garbage collection of images and HTML, supporting touch events, adding sound, and leveraging tools like PhoneGap Build. The tips aim to help developers apply their web skills to build applications that run on both desktop and mobile devices using a single codebase.

Android lessons you won't learn in schoolMichael Galpin

This document discusses several lessons about Android development that are not typically covered in school. It covers architectural changes in Android over time, security best practices, techniques for logging user activity and crash reports, strategies for building hybrid mobile-web applications, considerations for creating mobile SDKs, and approaches for testing Android apps on multiple device configurations.

Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous

We'll see in this session how to create 3D HTML5 WebGL games for the desktop & mobile web. For that, I’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub. It has been recently used by Ubisoft for the Assassin’s Creed Pirates web experience. We’ll see how to cover the complete gaming pipeline from the 3D assets created & exported from Blender/3DS Max/Maya to BabylonJS, the various camera's types (touch, virtual joysticks, gamepad, etc.), the usage of the embedded physic engine. At last, of course, how to implement the game logic in JavaScript. We'll build a simple game to better understand how to use this free engine.

Cross-Platform DevelopmentSyed Owais Ali Chishti

This document discusses cross-platform development using HTML, CSS, and JavaScript. It covers JavaScript engines, the differences between JavaScript and Node.js, and frameworks like Electron, PhoneGap/Cordova, and Ionic that allow building cross-platform desktop and mobile applications with web technologies. It also provides an overview of creating a basic Cordova application, installing required tools, adding platforms, and deploying to devices.

Mobile Application Development FRAMEWORKS AND TOOLS.pdfsnhs88

Waking App Ltd: Next Gen AR ToolsetAugmentedWorldExpo

A talk from the Design Track at AWE EU 2018 - the World's #1 XR Conference & Expo in Munich, Germany 18 -19, October, 2018. Adiel Gur (Waking App Ltd) Matan Libis (Waking App Ltd) Waking App Ltd: Next Gen AR Toolset As we all know, Augmented Reality is not only an exciting new technology but a business enabler with numerous possibilities. In this presentation, Matan Libis, CEO and Adiel Gur, CTO and co-founder will demonstrate how WakingApp’s AR Toolset, ENTiTi 3.0, enables app designers, architects and construction professionals to create fabulous AR projects. Adiel will present the unique functionalities and features of ENTiTi 3.0. This will include how to integrate your AR creations into an existing mobile app and also how to create your own white label solution with our online wizard. http://AugmentedWorldExpo.com

Android quick talkSenthilKumar Selvaraj

This document provides an overview of Android and mobile application development. It discusses the history and growth of Android, the Android architecture including activities, services, and content providers. It also covers the Android development process, tools, and best practices. The document demonstrates a simple "Hello World" Android app to introduce basic Android application building blocks.

My androidpresentationniteshnarayanlal

The document discusses the history and development of the Android operating system, describing how it was created by Android Inc. and later acquired by Google, and outlines some of the key aspects of the Android platform including its open source nature, hardware requirements, software architecture using Linux and Java, and security features. It also provides an overview of the software development process for Android including required tools and common application components.

Creating personalized cross platform mobile apps with the Sitecore Mobile SDKMark van Aalst

Phonegap for EngineersBrian LeRoux

PhoneGap allows developers to build native mobile apps using web technologies like HTML, CSS, and JavaScript. It works by wrapping web content in a native container on each mobile platform, allowing developers to write code once and deploy it across iOS, Android, BlackBerry, and other platforms. PhoneGap uses a plugin architecture that enables accessing native device APIs like the camera, contacts, and geolocation from JavaScript. It supports many mobile browsers and platforms, while providing tools for compiling, debugging, and deploying apps.

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

The document discusses building HTML5 games and provides resources on graphics libraries, physics engines, handling touch input, and gaming frameworks. It recommends libraries like EaselJS and frameworks like MelonJS and ImpactJS for HTML5 game development. Tutorials are presented on porting games to HTML5 using these tools as well as considerations for building games targeting multiple platforms like Windows 8.

Android : How Do I Code Thee?Viswanath J

Dan Morrill discusses the different ways to code applications for Android, including managed Dalvik code, Ajax/web apps, and native code. He outlines what each approach is capable of and not capable of. He demonstrates k-means clustering implemented in each approach. Morrill concludes that there are benefits to different approaches and developers should choose based on their app's specific needs and the developer's skills.

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media

This document summarizes a meetup about HTML5 game development with WebGL. It introduces ThreeDee Media, which develops tools like the TDM Engine for WebGL game creation. It explains what WebGL is, how it works, browser support, and how to get started with WebGL game development using engines, content creation tools, and resources provided. The document conveys that WebGL allows for hardware-accelerated 3D graphics in browsers without plugins, and its support in iOS 8 marks a tipping point for web-based 3D games.

ProtoTech Solutions Corporate ProfileProtoTech Solutions

Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal

This document provides an overview of single page applications (SPAs) and AngularJS. It discusses why SPAs are useful, how they work, and key aspects of AngularJS like data binding, directives, routing, and dependency injection. Code samples are presented to demonstrate basic concepts like data binding, controllers, filters, and building an e-commerce application with routing and services. Future sessions are proposed to cover integration with Node.js backends, testing with Karma, and custom directives.

Transforming the web into a real application platformMohanadarshan Vivekanandalingam

The document discusses the evolution of using the web as a real application platform. It outlines key technologies like HTML5, JavaScript, and WebGL that have advanced the capabilities of web applications. The document also notes shortcomings in earlier versions of the web around user interaction, performance, and compatibility issues. However, new technologies and browser improvements have helped address many of these issues. The document concludes that the web is becoming a viable platform for developing full-featured applications that combine the benefits of installed software and web-based applications.

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Toradex brings robust Linux support to SMARC (Smart Mobility Architecture), ensuring high performance and long-term reliability for embedded applications. Here’s how: • Optimized Torizon OS & Yocto Support – Toradex provides Torizon OS, a Debian-based easy-to-use platform, and Yocto BSPs for customized Linux images on SMARC modules. • Seamless Integration with i.MX 8M Plus and i.MX 95 – Toradex SMARC solutions leverage NXP’s i.MX 8 M Plus and i.MX 95 SoCs, delivering power efficiency and AI-ready performance. • Secure and Reliable – With Secure Boot, over-the-air (OTA) updates, and LTS kernel support, Toradex ensures industrial-grade security and longevity. • Containerized Workflows for AI & IoT – Support for Docker, ROS, and real-time Linux enables scalable AI, ML, and IoT applications. • Strong Ecosystem & Developer Support – Toradex offers comprehensive documentation, developer tools, and dedicated support, accelerating time-to-market. With Toradex’s Linux support for SMARC, developers get a scalable, secure, and high-performance solution for industrial, medical, and AI-driven applications. Do you have a specific project or application in mind where you're considering SMARC? We can help with Free Compatibility Check and help you with quick time-to-market For more information: https://www.toradex.com/computer-on-modules/smarc-arm-family

More Related Content

Similar to Js lovers (20)

So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa

Android PresentationBram Vandeputte

Building AR and VR Experiences for Web Apps with JavaScriptFITC

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick

Mobile native-hacksDevelopmentArc LLC

Android lessons you won't learn in schoolMichael Galpin

Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous

Cross-Platform DevelopmentSyed Owais Ali Chishti

Mobile Application Development FRAMEWORKS AND TOOLS.pdfsnhs88

Waking App Ltd: Next Gen AR ToolsetAugmentedWorldExpo

Android quick talkSenthilKumar Selvaraj

My androidpresentationniteshnarayanlal

Creating personalized cross platform mobile apps with the Sitecore Mobile SDKMark van Aalst

Phonegap for EngineersBrian LeRoux

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

Android : How Do I Code Thee?Viswanath J

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media

ProtoTech Solutions Corporate ProfileProtoTech Solutions

Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal

Transforming the web into a real application platformMohanadarshan Vivekanandalingam

So you want to build a mobile app - HTML5 vs. Native @ the Boston Mobile Expe...Yottaa

Android PresentationBram Vandeputte

Building AR and VR Experiences for Web Apps with JavaScriptFITC

OSCON 2012: Design and Debug HTML5 Apps for Devices with RIB and Web SimulatorGail Frederick

Mobile native-hacksDevelopmentArc LLC

Android lessons you won't learn in schoolMichael Galpin

Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous

Cross-Platform DevelopmentSyed Owais Ali Chishti

Mobile Application Development FRAMEWORKS AND TOOLS.pdfsnhs88

Waking App Ltd: Next Gen AR ToolsetAugmentedWorldExpo

Android quick talkSenthilKumar Selvaraj

My androidpresentationniteshnarayanlal

Creating personalized cross platform mobile apps with the Sitecore Mobile SDKMark van Aalst

Phonegap for EngineersBrian LeRoux

W3C HTML5 KIG-The complete guide to building html5 gamesChanghwan Yi

Android : How Do I Code Thee?Viswanath J

Amsterdam HTML5 Game Developement Meetup - ThreeDee Media presentationThreeDee Media

ProtoTech Solutions Corporate ProfileProtoTech Solutions

Tech io spa_angularjs_20130814_v0.9.5Ganesh Kondal

Transforming the web into a real application platformMohanadarshan Vivekanandalingam

Recently uploaded (20)

Heap, Types of Heap, Insertion and DeletionJaydeep Kale

Linux Support for SMARC: How Toradex Empowers Embedded DevelopersToradex

Special Meetup Edition - TDX Bengaluru Meetup #52.pptxshyamraj55

Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul

Artificial intelligence is changing how businesses operate. Companies are using AI agents to automate tasks, reduce time spent on repetitive work, and focus more on high-value activities. Noah Loul, an AI strategist and entrepreneur, has helped dozens of companies streamline their operations using smart automation. He believes AI agents aren't just tools—they're workers that take on repeatable tasks so your human team can focus on what matters. If you want to reduce time waste and increase output, AI agents are the next move.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

2025-05-Q4-2024-Investor-Presentation.pptxSamuele Fogagnolo

Procurement Insights Cost To Value Guide.pptxJon Hansen

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

Increasing Retail Store Efficiency How can Planograms Save Time and Money.pptxAnoop Ashok

Drupalcamp Finland – Measuring Front-end Energy ConsumptionExove

Greenhouse_Monitoring_Presentation.pptx.hpbmnnxrvb

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john

IEDM 2024 Tutorial2_Advances in CMOS Technologies and Future Directions for C...organizerofv

Cyber Awareness overview for 2025 month of securityriccardosl1

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

ThousandEyes Partner Innovation Updates for May 2025ThousandEyes

Technology Trends in 2025: AI and Big Data AnalyticsInData Labs

At InData Labs, we have been keeping an ear to the ground, looking out for AI-enabled digital transformation trends coming our way in 2025. Our report will provide a look into the technology landscape of the future, including: -Artificial Intelligence Market Overview -Strategies for AI Adoption in 2025 -Anticipated drivers of AI adoption and transformative technologies -Benefits of AI and Big data for your business -Tips on how to prepare your business for innovation -AI and data privacy: Strategies for securing data privacy in AI models, etc. Download your free copy nowand implement the key findings to improve your business.