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.
A-Frame is a declarative WebVR framework for web developers. We'll introduce the game-changing concepts of A-Frame, showcase what the community has built with A-Frame in the last several months, and present sneak peeks of novel experiments that we have rapidly prototyped using A-Frame.
Watch the talk at https://www.youtube.com/watch?v=wRqoSdPZQBY
Download presentation materials and videos at https://github.com/ngokevin/aframe-sfhtml5-presentation
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...Codemotion
“WebXR” is the API formerly known as WebVR, upgraded to embrace the web’s potential not just for Virtual Reality, but for immersive Mixed Reality experiences. We can start exploring the possibilities now, using libraries like Mozilla’s WebXR Polyfill and Google’s three.ar.js, plus special development browsers that incorporate ARCore (Android) or ARKit (iOS). This talk will share how you can begin to blend the real world and the digital world as a Mixed Reality web developer - and a glimpse into the exciting future of the Immersive Web.
In this side, I introduce Webrender 1.0 (it have been updated to 2.0 after 08/03/2016) that is based on Rust language and OpenGL to develop a proof of concept to bring the game engine technology into Web browser. It mentions how Scene Graph, Batching, Composite work in this modern web browser, Servo.
Using The New Flash Stage3D Web Technology To Build Your Own Next 3D Browser ...Daosheng Mu
This document discusses using the Adobe Flash Stage3D API to build 3D browser MMOs. It outlines optimization techniques used in the XPEC Flash 3D engine like material sorting, shared buffers, and command buffering to reduce draw calls and improve performance. It also covers challenges in implementing features like particles, skinning, shadows, and post-effects within Flash's limitations and solutions developed. Future work areas discussed include Adobe Texture Format, multi-threading via workers, and cross-compilation technologies.
Mixed Realities for Web - Carsten Sandtner - Codemotion Amsterdam 2018Codemotion
Ok, let’s get real: VR in a Web Browser isn’t something new in 2017. Firefox shipped their support for everyone. HTC Vive, Oculus Rift and other hardware is being supported. You can create VR experiences using your browser and Javascript. New browser engines are powerful enough to be able to serve the experiences on a open and standardised platform. But what about AR? Or Mixed Realities (MR)? Join my session and learn how AR or better said MR is getting into your browsers, too. See how and what the platform is being able to offer and what you could expect in near future.
The document discusses emerging web technologies including web components, web graphics, service workers, WebRTC, web animations, and transpilers. It compares these technologies to native platforms, and how browsers work differently than CPUs and GPUs. The document contains links to additional resources on these topics.
125 고성능 web view-deview 2013 발표 자료_공유용NAVER D2
The document discusses ways to improve the performance of hybrid mobile applications that use WebView. It describes how WebView has less powerful capabilities and worse web standard compatibility compared to mobile browsers. This can cause issues like fragmentation across device versions.
The document proposes techniques for creating a high-performance WebView, including adding new capabilities like WebSockets, and replacing slower native elements like Canvas 2D with optimized custom implementations. It provides code examples for calling JavaScript from native and vice versa on Android and iOS. Lessons learned emphasize minimizing native/JavaScript communication and dealing with threading issues.
The document provides code snippets for loading images into ImageViews using Picasso and Glide libraries. It also discusses libraries for using a toolbar instead of an action bar, working with RecyclerViews and card views, generating color palettes from images, and using ButterKnife for view injection. Recommendations are given for libraries to make a toolbar scrollable, add rounded corners to card views, and implement horizontal scrolling on landscape.
This session will be delivered in Bahasa. Riza will talk about how to starting implement machine learning with JavaScript. He will introduce some tools and terminology that can be used for implementing machine learning.
This talk is for TechInAsia Product Development Conference in Jakarta, Indonesia. Held at 2018-07-04.
Sara Harkousse - "Web Components: It's all rainbows and unicorns! Is it?"IT Event
Web components are a tale of four w3c specifications. They are a hot topic now. We’ve all seen big headlines, for instance, “The Web Components revolution”, “Web Components are a game changer”, “A Tectonic Shift for Web Development”, … and so many others. They are certainly exciting and promising, nevertheless, there are some factors holding them back such as performance issues and lack of browser support. Some features seems to be more hassle than they’re worth. In this talk you’ll examine web components from a pragmatic stand point. So if you want to start using web components in production, come to learn what features can you use today. Actually, despite the still short browser support, some of web components features seems to be the best choice to start with . The assessment you’ll learn is the reflection of my personal research and work on my spare time and also feedbacks from my co-workers.
This document discusses Amazon's approach to developing web components for use across their teams. It outlines how they standardized on web components to provide reusable UI elements that work across JavaScript frameworks like Angular and React. The document shares the benefits they saw, such as reduced onboarding time and enforced design compliance. It also discusses lessons learned, like how reinventing components paid off and the importance of support. Examples are provided of how their conference component can be used in different frameworks.
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.
The document discusses minimalism in web development. It advocates for building simple things using simple tools where appropriate. This includes using microframeworks that do just enough rather than full-featured frameworks, and taking advantage of CSS3 features to simplify layouts and designs. SQLite is recommended for low to medium traffic sites due to its small size and simplicity. Graceful degradation is also discussed to ensure sites still function acceptably in older browsers.
The document discusses building mobile web applications using HTML5. It covers topics like HTML5 features that are well supported on mobile browsers like forms, communication, canvas, geolocation, audio and video. It provides examples of using CSS3 for styling, animation and media queries for responsive design. It also discusses utilizing HTML5 APIs for advanced interactions, graphics, offline support, performance and accessing device capabilities.
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.
Immersive Web technologies like WebXR allow developers to build augmented and virtual reality experiences that can be accessed through web browsers on various devices. This expands accessibility of XR beyond specialized headsets to a wide range of phones, tablets and computers. WebXR uses web standards and APIs to integrate with sensors, displays and inputs, enabling cross-device experiences. As support grows across browsers and devices, the web has the potential to become a leading platform for immersive content and applications.
This document provides an overview and introduction to building virtual reality (VR) experiences using WebVR and the A-Frame framework. It discusses:
- What WebVR is and how it allows creating VR tools, standards, and experiences for the open web.
- What A-Frame is and its features for building VR scenes in HTML such as being easy to learn, cross-platform support, performance optimizations, and a visual inspector.
- Examples of VR experiences that have been built with A-Frame, Mozilla's work in mixed reality and VR including Firefox Reality, Spoke for creating 3D environments, and Unity WebVR assets.
This document provides an overview of Node.js including:
- What Node.js is and its event-driven, non-blocking architecture
- How to install Node.js and build applications
- How to use modules like Express.js and Socket.io
- Examples of deploying Node.js applications to Microsoft Azure
- A demonstration of building a collaborative drum machine app with Node.js, WebSockets, and the Web Audio API
This document discusses building HTML5 apps with native capabilities for BlackBerry devices. It outlines various HTML5 APIs that can access native device features like geolocation, accelerometer, notifications and more. It also describes how to create custom WebWorks APIs that extend HTML5 functionality by connecting to native device APIs for BlackBerry OS, Tablet OS, and BlackBerry 10. Resources provided include documentation, code samples, and details on the WebWorks SDK and roadmap.
This document discusses how HTML5 can be used to build engaging mobile applications. Key features covered include offline storage using the Application Cache API, storing data locally using Web Storage, using a SQL database with Web SQL, advanced graphics capabilities with Canvas and SVG, real-time communications over WebSockets, and tools for developing HTML5 apps like jQuery Mobile, Sencha Touch, and Google Web Toolkit. It emphasizes testing on multiple platforms and browsers to ensure compatibility.
1. JavaScript is well-suited for IoT applications due to its popularity, maturity, and productivity benefits.
2. JerryScript is an ultra-lightweight JavaScript engine that can run on embedded devices and has been used to power IoT platforms like IoT.js.
3. The Things Gateway by Mozilla uses JavaScript and the WebThings API to allow embedded devices to expose properties and events over HTTP/HTTPS, and integrate with web applications and third-party services.
ITCamp 2012 - Alessandro Pilotti - Web API, web sockets and RSignalITCamp
This document summarizes a presentation about building modern web sites with ASP.Net Web API, WebSockets, and SignalR. The presentation introduces these technologies and how they can be used to build single page applications with real-time functionality. It provides examples of using ASP.Net Web API to create RESTful APIs, SignalR for persistent connections and messaging, and WebSockets for bidirectional communication. The presentation demonstrates how these tools allow building applications that approach the usability of desktop applications.
This document discusses responsive image techniques for adaptive web design. It begins by explaining browser sniffing versus feature testing, and recommends using feature testing to determine browser width, screen resolution, and bandwidth instead of browser sniffing. It then covers techniques like using background-size to control image sizes, SVG for smaller file sizes, and font-based solutions. The document also discusses server-side techniques like .htaccess rewrite rules and client-side techniques like picture and HiSRC. It advocates for a mobile-first approach using CSS media queries and a single pixel GIF for responsive images.
Tony Parisi discusses the foundations of the immersive web and how it can reach billions of users by 2020. Key points include:
- WebVR allows rendering of 3D graphics and VR content directly in browsers using standards like WebGL and a new VR API.
- This eliminates friction compared to native apps by allowing instant access to VR content through web links on any device with a compatible browser.
- Current browsers like Chrome and Firefox are adding initial WebVR support, and content can already be experienced on mobile in Cardboard viewers.
- The immersive web is being built on open standards and has potential to scale to the billions of users accessible through the existing web ecosystem and its development
Front End Development for Back End Java Developers - Jfokus 2020Matt Raible
The document is a presentation about front end development for back end Java developers. It discusses topics like JavaScript, TypeScript, build tools, CSS frameworks, front end performance, and progressive web apps. It also provides introductions and comparisons of popular JavaScript frameworks like Angular, React, and Vue. The presentation encourages attendees to learn new front end skills and try building something with a front end framework.
Analyzing the Performance of Mobile WebAriya Hidayat
This document discusses techniques for analyzing the performance of mobile web applications. It covers challenges like network variability, different device hardware, and continuous integration. Approaches mentioned include benchmarking, injecting instrumentation, emulation, and remote inspection. Strategies suggested are reducing complexity, replicating analysis on desktop, and tweaking at the system level. Tools mentioned include the Nexus One, Gingerbread, PhantomJS, and headless WebKit. The document provides examples and caveats for analyzing areas like network traffic, graphics commands, garbage collection, and JavaScript parsing.
Building modern web sites with ASP .Net Web API, WebSockets and RSignalAlessandro Pilotti
My session at ITCamp.ro 2012:
Web site development is an ever changing landscape. Thanks to the latest web browser technologies it's possible to create highly responsive single page applications, requiring a new approach to design and development on the server side. During this session we'll see ho to use .Net technologies to get the best out of the new Web API, WebSockets and the excellent RSignal framework.
Front End Development for Back End Developers - UberConf 2017Matt Raible
Are you a backend developer that’s being pushed into front end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools of the trade for frontend development (npm, yarn, Gulp, Webpack, Yeoman) and learn the basics of HTML, CSS, and JavaScript.
This presentation dives into the intricacies of Bootstrap, Material Design, ES6, and TypeScript. Finally, after getting you up to speed with all this new tech, I'll show how it can all be found and integrated through the fine and dandy JHipster project.
Front End Development for Back End Developers - vJUG24 2017Matt Raible
Are you a backend developer that’s being pushed into front-end development? Are you frustrated with all JavaScript frameworks and build tools you have to learn to be a good UI developer? If so, this session is for you! We’ll explore the tools for frontend development and frameworks too!
Streamed live at 8pm MST on Oct 25, 2017! https://virtualjug.com/vjug24/
This document discusses developing augmented reality (AR) and virtual reality (VR) applications using React Native. It provides an overview of AR and VR history and technologies. It then discusses using the Viro React library to build cross-platform AR, VR, and XR applications in React Native. It covers components for 3D objects, lighting, and particle effects. Examples are provided for basic component layout and using 3D models, lighting, and particle effects in a Viro application. Considerations for when to use Viro React are discussed.
It is not HTML5. but ... / HTML5ではないサイトからHTML5を考えるSadaaki HIRAI
This document provides an overview of HTML5 technologies including HTML5 markup, microdata/RDFa, WebFonts, Canvas, MediaQueries, performance optimizations like SPDY and HTTP 2.0. It discusses specifications from the W3C and implementations by companies. Tools for testing responsive design, fonts and browser compatibility are also mentioned. The document is written in Japanese and references the author's blog for code samples.
Similar to Building AR and VR Experiences for Web Apps with JavaScript (20)
1) The document discusses code splitting strategies for bundling JavaScript applications, including route-based code splitting, splitting on-demand components, and using the Split Chunks plugin.
2) It recommends optimizing lazy loading through techniques like prefetching and using IntersectionObserver to preload resources the user may visit.
3) The key code splitting strategies discussed are route-based splitting, splitting common dependencies, and splitting asynchronous or on-demand components.
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Andréa Crofts
League
Overview
Examining our responsibility as creators to design for disconnection.
The “restore connection” alert isn’t just for devices– it applies to people too. And it’s more important now than ever before.
Digital creators, we need to talk. The rise in mental health as a result of situational stress is a prevailing theme in today’s society, and some of the products we’re building are the root cause. But we have the power to change this. As creators of digital products, how might we enable our users to be more present in their lives? How might we invest in features like Instagram’s activity timer, despite the fact that they’re fundamentally counterintuitive to the usage metrics most behemoth tech companies are driving towards?
We have a responsibility as creators of digital products to enable others to disconnect …and re-connect with themselves, physically and mentally. This intersection is an emerging category Andrea likes to call digital health, and it’s something we can create together.
Objective
To share actionable strategies, principles and considerations for designing with digital health top of mind. Andrea will get into some #realtalk about how we can collectively create more balance and presence for the humans using our products.
Target Audience
Designers and digital creators of all kinds – especially those building digital products at scale!
Level
Open to audience members of any skill level (this is a more high-level talk)
Five Things Audience Members Will Learn
Tips and best-in-class examples of designing for digital health
Design guidelines and principles for designing with digital health in mind
Evidence-based practices to ground your future design decisions
Strategies for re-framing the success metrics of digital products
Design ethics resources
Presented at Web Unleashed 2019
More info at www.fitc.ca/webu
Luke DeWitt
REDspace
Overview
JavaScript’s popularity has exploded over the last decade, taking it from a laughable scripting language to one that powers much of the web today. Because it’s so flexible and so easy to learn, it’s extremely popular with new developers looking to cut their teeth in programming. However, these strengths are also weaknesses, as it’s incredibly easy to write bad JavaScript without even knowing it.
A lot of these newer developers jump from “Hello, World!”, to TodoMVC in order to find the library that makes their life easier. By doing this, they skip over some of the important details of not only how JavaScript works, but also how to optimize its performance to ensure the best user experience.
The Chrome profiler is a very handy tool that not a lot of developers have experience with. In this talk, we’ll take a beginner’s look at the profiler tool and examine how to use it to best improve your web application, and identify bottlenecks in your code without having to rely only on console.log statements.
Objective
To help developers understand how to better make use of the JavaScript profiler.
Target Audience
Any JavaScript developers
Assumed Audience Knowledge
Basic JavaScript
Level
Beginner / intermediate
Five Things Audience Members Will Learn
Javascript inner-workings
Profiling concepts
Identifying bottlenecks
Profiling node applications
Tooling
presented at Web Unleashed 2019
For more info see https://fitc.ca/event/webu19/
Kevin Daly RBC Ventures
Every developer has faced the difficult choice of deciding what tech stack they should use for a new project. Should you use the latest tech or something that everyone knows? Which framework is the best for your team? To survive your tech stack, developers must make trade-offs with developing on new tech stacks and the ability to maintain and scale their applications.
In this presentation, you’ll learn how to evaluate your tech stack and understand the pros and cons of using bleeding edge technology. Using his past experiences, Kevin will also share his lessons learned and how his team tackles managing their tech stack today.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Bushra Mahmood
Unity Technologies
Overview
In this talk, Bushra Mahmood will explain how to articulate and pitch augmented reality as a viable medium to help solve problems. Learn about what makes an AR application come together on both mobile devices and headsets. Uncover different tools and methodologies for problem-solving and making a compelling story.
By properly understanding this technology and its parts, creatives can take an active role in shaping and defining this new space in computing.
Objective
Learn the tools and techniques required to pitch an augmented reality project.
Target Audience
Designers, product managers, product stakeholders.
Assumed Audience Knowledge
An understanding of product design and an awareness of AR
Five Things Audience Members Will Learn
The right language to use when explaining ‘spatial’ design
The different requirements and considerations for scoping an AR project
The tools that are currently available for AR authoring
Insights into what the near and far future will hold for this medium.
An example of an AR application pitch
Start by Understanding the Problem, Not by Delivering the AnswerFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Karri Ojanen
RBC Royal Bank of Canada
Overview
Over the past number of years companies have adopted the idea of customer-centricity. People across functions can fluently talk about the importance of paying special attention to end-user needs and overall customer experience.
But innovation and forward-thinking ideas that connect both customer and business needs can’t simply be squeezed out of brainstorm sessions and sticky notes if the organization doesn’t learn how to effectively look outside of its own silos. In this session, Karri will show how to move from jumping to solutions to driving innovation by understanding the question first.
Target Audience
Designers, researchers, strategists, product managers, and technology leads
Three Things Audience Members Will Learn
Methodologies and tools to form insights out of a holistic understanding of customer challenges
How to synthesize data to form a vision of the better future
How to break the vision into manageable chunks that drive value for the business and the customer at every launch
Cocaine to Carrots: The Art of Telling Someone Else’s StoryFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Alan Williams
Imaginary Forces
Overview
During dailies as an intern at Imaginary Forces, Alan’s director, Karin Fong, would follow her animation feedback with one of the scariest and empowering questions of his career, “what do you think?” Over the last eight years, Alan’s transition from technician to creative director came from a dramatic shift in how he approached and answered that question. By examining larger conceptual principles to practical application in commercial and tv/film design, such as HBO’s Vinyl and Netflix’s Anne with an E, he will share hard-learned lessons that can empower you, whether in Photoshop, behind a camera, or pitching to clients, in developing and selling your creative voice.
Target Audience
Visual communicators eager to become more evocative storytellers
Five Things Audience Members Will Learn
‘Method branding’ in a selfie culture
O.C.D. (observe, collect, dissect) & the imagination
The resuscitating power of rearrangement
Pertinence vs pipeline: the crippling cage of routine
Less pitching, more poetry
Everyday innovation is defined as a daily process of introducing new ideas, devices, or methods through small improvements. There are different types of innovation, including empowering, sustaining, efficiency, and disruptive innovation. Everyday innovation focuses on making incremental improvements through collaboration, identifying opportunities by listening for user needs, and building habits of innovation. Effective collaboration and feedback are important to driving everyday innovation, with feedback working best when it is specific, goal-oriented, organized, relevant and timely.
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Chris Zacharias
imgix
Overview
The average website loads over 1.5MBs of content per page, making over 75 requests. Many popular websites are serving over 5MBs just to load their homepages. And these numbers represent measurements taken AFTER compression is applied. The full weight of many popular websites is pushing 20+ MBs these days. In an era where performance truly matters to the end user experience, web developers need techniques to help curtail this bloat in data down the wire.
No matter how well you optimize, there is no better way to than to delete things you do not need. How does one determine what is essential to the user experience and what is not? One answer Chris posits is to develop a hyper-lightweight version of your website which will provide critical insights into your specific performance priorities. This is a process that he has leveraged on many projects, in particular at YouTube to reduce the size of the video watch page from 1.5MBs to 100KBs. In this talk, Chris will take real-world web pages and show techniques for dramatically reducing their page weight and for identifying areas to optimize, while outlining the key steps to doing this well.
Objective
Learn a process for building a hyper-lightweight version of your website for establishing reasonable performance budgets, grounded in reality, to work from.
Target Audience
Web developers
Assumed Audience Knowledge
HTML, CSS, Javascript, some server-side awareness.
Level
Intermediate
Five Things Audience Members Will Learn
How to analyze a web page for performance issues
A holistic approach to deconstructing an existing website
A clear process for building a hyper-lightweight version of your website
Translating your findings into real performance priorities
Establishing a realistic performance budget
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Michael Fullman
VT Pro Design
Overview
An exploration of the process of creation. We live in a time where technology and inspiration are more readily available and accessible than ever before. That being said we also live in a time that mostly highlights the successes of projects and process. In this particular talk Michael wants to touch on the process of creation with technology at VT Pro, to further explore a full circle approach to inspiration and creation where often times our next project is inspired by something learned in the process of creating something else.
By exploring what went wrong and what went right in a number of different projects he’s created, Michael will touch on points where inspiration can be found in this world of seemingly endless technology; the importance of collaboration; what can be learned from the moments that don’t necessarily go as planned; and how often projects come close to failure than the audience ever knows. Lastly he wants to touch on the process of finding personal inspiration to inspire an audience, and the momentum to push further that comes from their energy.
Objective
Things often don’t go as planned, but often that’s the fun part.
Target Audience
Creative technologists and experience designers
Five Things Audience Members Will Learn
Collaborative process
Giving personality to a piece of technology
How to learn from the unexpected
We all start somewhere (the journey is just as important as the destination)
Everything is possible now
Post-Earth Visions: Designing for Space and the Future HumanFITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Sands Fish
MIT Media Lab
Overview
Today, the environments that humans occupy in space are designed for survival. Humans are carefully shuttled to and from space, and during their relatively short stays, they are provided with minimum supplies to remain alive and able to perform experiments. As we begin to plan less for short visits and more for life in space (such as a six to eight month trip to Mars and beyond) the question becomes: What does human culture look like in space?
This talk will explore how human culture, design, and creativity might evolve as we begin to live in space, and the unique environmental conditions that might guide us in certain directions, just as the environment on Earth has. It will discuss space tourism, living in zero gravity, and some experiments in art and design that hint at future aesthetics.
Objective
Convey what opportunities exist at the outset of a more democratized New Space age, and call out the aesthetics, ethics, and cultural frontiers we find ourselves faced with at the end of the second decade of this century.
Target Audience
Those interested in the future of human life in space
Five Things Audience Members Will Learn
The history of human culture in space
Unique design constraints and considerations when designing for zero gravity
The experience of flying in a zero-g flight
The aesthetics at play in human spacefaring — (what has been)
New forms, new materials, new ideas — (what might be)
The Rise of the Creative Social Influencer (and How to Become One)FITC
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Lindsay Munro
Adobe XD
Overview
Your social network could be more valuable than the work you’re doing today, because it could (and should) lead to the opportunities you get tomorrow. Your next post could result in your next recommendation, job, collaboration, exhibit, and next level experience.
In this session, you’ll learn how to hone and build your online social media presence to attract brands and engage in the modern-day endorsement deal. Get a behind-the-scenes perspective on the things brands look for in creative profiles and the rules of engagement.
Objective
Teach the ins and outs of what it means to be a creative social influencer.
Target Audience
Creatives looking to up level their social media presence and strike brand partnerships.
Things Audience Members Will Learn
How to set yourself up for “success” on social media
The importance of working with the right brands
Figuring out compensation and negotiating contracts
The ins and outs of disclosure and liability
How to not mess it up
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Amelie Rosser
Jam3
Overview
For the past two years Jam3 worked alongside Joy Kogawa and the NFB to create East of the Rockies, an augmented reality storytelling experience.
East of the Rockies is the first interactive AR game of its kind. The story takes users through a piece of Canadian history where Japanese Canadians were forced to leave their homes and live at internment camps during WWII.
This talk will cover the creation of the game: from concept and storyboarding, to the development process in Unity and various challenges and questions to consider from a creator’s perspective.
Objective
To let the audience in on the behind the scenes of developing an AR experience like East of the Rockies.
Target Audience
For those interested in Augmented Reality storytelling and game development.
Five Things Audience Members Will Learn
AR techniques using Unity
Storytelling in AR
Prototyping interactions in AR
Game state management using Unidux
Game optimization techniques in Unity
The Knowledge Society: Three Talks About the Future
Futurism Innovation Science
Isabella Grandic
The Knowledge Society
Overview
Join three incredible, young, and brilliant minds as they present their findings on topics that we’ll all have to deal with in the not so distant future. This series of talks will explore how exponential technologies like synthetic farming, nanotechnology, and quantum computing can be used to solve some of the world’s most difficult problems.
The speakers are all students of The Knowledge Society (TKS), a human accelerator for high school students designed to help them impact billions. TKS encourages students to take risks and think big.
Ayaan Esmail‘s talk will cover creating a proactive healthcare system
World Transformation: The Secret Agenda of Product DesignFITC
R.C. Woodmass
Crescendo
Overview
The reports are in: how we relate to technology directly affects how we relate to other humans, to our environments, and to ourselves. Are we headed for a technological dystopia, where robots are in charge and empathy is just a word for the history books? Not necessarily! Learn how the interfaces we interact with can teach us how to be better communicators, increase our understanding of each other, and how product design might be the key to building a positive future for all.
Objective
Directly address fear and skepticism about technology, inspiring all who design and build tech to think more empathetically when building UX and UI.
Target Audience
Product designers, HR specialists, and anyone skeptical about technology
Three Things Audience Members Will Learn
How to create user interfaces that are flexible enough to include everyone, even if they can’t keep up with all the different identities and new labels that people are using
What is conversation design, and how it has the power to teach people how to communicate
How AI has the potential to be more inclusive than previous data analysis systems, if we leverage its weaknesses to the human advantage
This document discusses various topics related to video games and digital media including the power of now, video games from PlayStation and PC demos, games editors, live events featuring popular musicians, current uses of augmented reality, and real-time ray tracing technology. It features various images related to the topics.
Hasan Ahmad
Aquent DEV6
Overview
PWAs are a newly emerging delivery format for web, desktop apps. The fact that they can be installed on a client device and behave like natively installed apps means that special care should be taken when designing and building these types of apps, above and beyond a typical browser-only web application. One of the most important (potential) differentiators in the user experience of a PWA app vs a traditional web app is the ability to provide a high-performance UI because of their ability to do things like cache resources offline, including entire pieces of Web UI code, and the use of background services. In this talk we are going to do an exhaustive overview of the entire landscape of building PWAs from a performance-first perspective.
Target Audience
Web development teams
Assumed Audience Knowledge
Web Development fundamentals
Objective
Large enterprise applications
Five Things Audience Members Will Learn
Why PWA’s require performance engineering
What tools are available to measure performance metrics
Offline caching strategies
Host device considerations: desktop and mobile
Taking advantage of background code: Service Workers
The document discusses the rise of the JAMstack, which stands for JavaScript, APIs, and Markup. It describes how the JAMstack architecture uses static sites, content managed by headless CMSes, and APIs to provide performance and security benefits compared to traditional monolithic frameworks. Key advantages of the JAMstack include faster load times, higher security since there are fewer moving parts, and easier scalability using CDNs. The document outlines the various ingredients that make up the JAMstack like static site generators, hosting providers, and serverless functions, and provides examples of how popular sites have benefited from adopting this architecture.
From Closed to Open: A Journey of Self DiscoveryFITC
Midge “Mantissa” Sinnaeve
Mantissa
Overview
Midge will be speaking about his experience of switching to open source applications for his freelance work. From ditching expensive software subscriptions to going down the linux rabbit hole, he’ll take you along for the ride and show you some cool stuff along the way.
It’s an in-depth look at what happens when your digital tools become an extension of yourself and how that can in turn inspire you to get better as an artist and find your style.
Objective
Taking a critical look at how you work and why.
Target Audience
(Motion) designers, 3D & VFX artists
Four Things Audience Members Will Learn
Open Source Design Tools
Self-criticism
Inspiration
Letting go
This document discusses several art projects including 42 SKULLS which offers limited edition prints, THE LIGHTS, and SOFT BOTS. It also mentions UWATELA's new materials and presentation as well as AMERDAHL.
10th International Conference on Networks, Mobile Communications and Telema...ijp2p
10th International Conference on Networks, Mobile Communications and
Telematics (NMOCT 2024)
Scope
10th International Conference on Networks, Mobile Communications and Telematics (NMOCT 2024) is a forum for presenting new advances and research results in the fields of Network, Mobile communications, and Telematics. The aim of the conference is to provide a platform to the researchers and practitioners from both academia as well as industry to meet and share cutting-edge development in the field.
Authors are solicited to contribute to the conference by submitting articles that illustrate research results, projects, surveying works, and industrial experiences that describe significant advances in the following areas but are not limited to.
Topics of interest include, but are not limited to, the following:
Mobile Communications and Telematics Mobile Network Management and Service Infrastructure Mobile Computing Integrated Mobile Marketing Communications Efficacy of Mobile Communications Mobile Communication Applications Critical Success Factors for Mobile Communication Diffusion Metric Mobile Business Enterprise Mobile Communication Security Issues and Requirements Mobile and Handheld Devices in the Education Telematics Tele-Learning Privacy and Security in Mobile Computing and Wireless Systems Cross-Cultural Mobile Communication Issues Integration and Interworking of Wired and Wireless Networks Location Management for Mobile Communications Distributed Systems Aspects of Mobile Computing Next Generation Internet Next Generation Web Architectures Network Operations and Management Adhoc and Sensor Networks Internet and Web Applications Ubiquitous Networks Wireless Multimedia Systems Wireless Communications
Heterogeneous Wireless Networks Operating System and Middleware Support for Mobile Computing Interaction and Integration in Mobile Communications Business Models for Mobile Communications E-Commerce & E-Governance
Nomadic and Portable Communication Wireless Information Assurance Mobile Multimedia Architecture and Network Management Mobile Multimedia Network Traffic Engineering & Optimization Mobile Multimedia Infrastructure Developments Mobile Multimedia Markets & Business Models Personalization, Privacy and Security in Mobile Multimedia Mobile Computing Software Architectures Network & Communications Network Protocols & Wireless Networks Network Architectures High Speed Networks Routing, Switching and Addressing Techniques Measurement and Performance Analysis Peer To Peer and Overlay Networks QOS and Resource Management Network-Based Applications Network Security Self-organizing networks and Networked Systems Mobile & Broadband Wireless Internet Recent Trends & Developments in Computer Networks
Paper Submission
Authors are invited to submit papers through the conference Submission System by July 06, 2024. Submissions must be original and
Tarun Gaur On Data Breaches and Privacy FearsTarun Gaur
Tarun Gaur On Data Breaches and Privacy Fears https://www.cbs19news.com/story/50764645/tarun-gaur-on-data-breaches-and-privacy-fears-navigating-the-minefield-of-modern-internet-safety
Have you ever built a sandcastle at the beach, only to see it crumble when the tide comes in? In the digital world, our information is like that sandcastle, constantly under threat from waves of cyberattacks. A cybersecurity course is like learning to build a fortress for your information!
This course will teach you how to protect yourself from sneaky online characters who might try to steal your passwords, photos, or even mess with your computer. You'll learn about things like:
* **Spotting online traps:** Phishing emails that look real but could steal your info, and websites that might be hiding malware (like tiny digital monsters).
* **Building strong defenses:** Creating powerful passwords and keeping your software up-to-date, like putting a big, strong lock on your digital door.
* **Fighting back (safely):** Learning how to identify and avoid threats, and what to do if something does go wrong.
By the end of this course, you'll be a cybersecurity champion, ready to defend your digital world and keep your information safe and sound!
Book dating , international dating phgrathomaskurtha9
International dating programhttps: please register here and start to meet new people todayhttps://www.digistore24.com/redir/384521/godtim/.
get started. https://www.digistore24.com/redir/384521/godtim/
2. The Rise of Extended Reality (AR/VR)
• AR (Augmented Reality) – Interaction with physical realty
augmented with computer generated input and output
• VR (Virtual Reality) – Replace physical reality with a computer
generated one
• Hardware costs plummeting (Oculus Go launched F8 2018,
$199)
• Software for building AR and VR experiences getting better
every day
4. Introduction – Hasan Ahmad
• Principal Consultant at DEV6
• Developer Circles from Facebook
(Toronto)
• https://dev6.com
• https://www.facebook.com/groups
/DeveloperCirclesToronto/
• https://twitter.com/has_ibr_ahm
5. Industries that are embracing XR
• Gaming
• Media
• Mobile Apps
• Streaming
• Education
• Industrial
• Retail
6. AR/VR tech-stack for web devs
• Little bit of math & physics background
• Smartphone or VR headset
• Three.js
• WebVR API / Web XR API
• A-Frame
• React 360
• AR.js
• 3D Content
7. Three.js
• https://threejs.org/
• WebGL graphics library
• Scene – What to display
• Camera – What to view
• Renderer – How to display
• Geometry – Objects, textures, etc
8. $ npm install three
...
import { Scene } from 'three’;
const scene = new Scene();
OR
<script
src="https://fastcdn.org/three.js/73/three.min.js">
</script>
9. var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,
window.innerWidth / window.innerHeight,
0.1,
1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
10. WebVR
• Low-level API to gather info about the VR display + capabilities
• Eye parameters, the data to render the scene for each eye
• Field of view data
• Position of the VR display (and velocity and acceleration)
11. WebXR (unstable!)
• Evolution of WebVR spec
• Much faster than WebVR API
• Better architecture to support both VR and AR, multiple view
types
• Desktop
• VR Headset
• Smartphone
• Magic Window
• Touchscreen, Mouse, Gamepad, Controllers
12. The future of the web is immersive (Google I/O ‘18)
https://www.youtube.com/watch?v=1t1gBVykneA
13. WebXR-Polyfill
• Best way to make sure code written to XR spec (proposal) will
actually work
https://github.com/immersive-web/webxr-polyfill
<script src='https://cdn.jsdelivr.net/npm/webxr-
polyfill@latest/build/webxr-polyfill.js’></script>
$ npm install --save webxr-polyfill
14. function initXR() {
xrButton = new XRDeviceButton({
onRequestSession: onRequestSession,
onEndSession: onEndSession
});
document.querySelector('header').appendChild(xrButton.domElement);
if (navigator.xr) {
navigator.xr.requestDevice().then((device) => {
device.supportsSession({immersive: true}).then(() => {
xrButton.setDevice(device);
});
});
}
}
function onRequestSession(device) {
device.requestSession({immersive: true}).then(onSessionStarted);
}
15. function onSessionStarted(session) {
xrButton.setSession(session);
session.addEventListener('end', onSessionEnded);
gl = createWebGLContext({compatibleXRDevice: session.device});
renderer = new Renderer(gl);
scene.setRenderer(renderer);
session.baseLayer = new XRWebGLLayer(session, gl);
session.requestFrameOfReference('eye-level').then((frameOfRef) => {
xrFrameOfRef = frameOfRef;
session.requestAnimationFrame(onXRFrame);
});
}
16. function onXRFrame(t, frame) {
let session = frame.session;
scene.startFrame();
session.requestAnimationFrame(onXRFrame);
let pose = frame.getDevicePose(xrFrameOfRef);
if (pose) {
gl.bindFramebuffer(gl.FRAMEBUFFER, session.baseLayer.framebuffer);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
for (let view of frame.views) {
let viewport = session.baseLayer.getViewport(view);
gl.viewport(viewport.x, viewport.y,
viewport.width, viewport.height);
scene.draw(view.projectionMatrix, pose.getViewMatrix(view));
}
} else {}
scene.endFrame();
}
17. A-Frame
• Web framework originally from Mozilla for rendering AR and VR
in web pages
• Declarative syntax
• 3D scene graph with markup language
25. React 360
• Similar in Architecture to React Native
• Uses Web Workers to avoid single-
threaded computation limitation, which
could impact performance, break
immersion
26. React 360
• Can also load 3D models, using Entity (multiple formats)
// to reference a GLTF2 model
<Entity source={{gltf2: asset('myModel.gltf')}} />
// to reference an untextured OBJ model
<Entity source={{obj: asset('myModel.obj')}} />
// to reference an OBJ with matching MTL file
<Entity source={{obj: asset('myModel.obj'), mtl: asset('myModel.mtl')}} />
27. Augmented Reality
• Similar problems solved in VR
• Must be able to identify real-
world geometry
• Capable of marker-based AR at
60fps, even on budget
smartphones
https://aframe.io/blog/arjs/
28. Building AR with A-Frame (AR.js)
<script
src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js">
</script>
<a-scene embedded arjs>
<a-marker-camera preset='hiro'></a-marker-camera>
30. Building AR with A-Frame
<body style='margin : 0px; overflow: hidden;’>
<a-scene embedded arjs>
<!-- create your content here. just a box for now -->
<a-box position='0 0.5 0' material='opacity: 0.5;'></a-box>
<!-- define a camera which will move according to the marker position -->
<a-marker-camera preset='hiro'></a-marker-camera>
</a-scene>
</body>
31. Wikitude SDK
• Paid SDK, for implements sophisticated AR algorithms,
available as a plugin for Native or Cordova projects
• Free trial available (for experiments and education)
• Instant Tracking, SLAM, SMART
• Built on top of ARCore and ARKit
• https://www.wikitude.com/augmented-reality-instant-tracking/
33. Continued Study
• https://www.khanacademy.org/math/linear-algebra
• https://medium.com/@necsoft/three-js-101-hello-world-part-1-
443207b1ebe1
• https://developer.mozilla.org/en-
US/docs/Web/API/WebGL_API#Guides
• https://github.com/mozilla/aframe-xr
• https://aframe.io/blog/arjs/
34. Summary
• Extended Reality is of increasing interest to many industries
• Web tech can get us quite far, even with today’s experimental
APIs
• There are a number of entry points into this tech stack, pick the
right level of abstraction for you
AR/VR/MR/XR terms are all interchangeable
In 2016, Oculus Rift (high-end experience) was about $800, the year before over $1000? Currently in the $550 range
https://www.zdnet.com/article/walmart-deploys-17000-oculus-go-headsets-to-train-its-employees/
Front-end training and consulting firm
VoIP & chat apps for telecom (Mitel)
Real-time telemetry and diagnostics apps for automotive service industry (FCA)
Customized global developer platforms training (Facebook, BlackBerry)
Modern search UI and experience for Ontario Electronic Land Registry (Teranet)
B2B e-Commerce portal for retail giant (Adidas)
DevC Toronto
1500 member community
Monthly meetups, guidance, training, networking, learn about latest tech from Facebook platform
https://www.zdnet.com/article/walmart-deploys-17000-oculus-go-headsets-to-train-its-employees/
Talk about each image and how it’s market is relevant
We are going to walkthrough a variety of options to get started with these technologies, to get a better understanding of the state of the art in 2018.
Once we understand where each tool or library is focused, hopefully we can make a decision about what is the appropriate level of detail for us
How many of would consider themselves beginner web developers?
How many would consider themselves to be intermediate? Expert?
How many would consider themselves to be beginner AR/VR developers?
How many would consider themselves to be intermediate or expert AR/VR?
Core building block of many libraries in this field
WebGL is too low level for web developers (shader pipeline code, GPU programming) – basically the thinnest layer possible for a browser to access the GPU directly
Fun to learn about, but need to dedicate a huge chunk of time to become a computer graphics expert
Need strong understanding of mathematics in computer graphics (linear algebra, geometry, some physics)
Not the best use of time when you have a real web project with tight deadlines
Ricardo Cabello – Mr.Doob
Beware, not all the example code has been ported over to work with ES6 modules, this is an open issue on GitHub
Introductory threejs code,
Draws a config scene, camera, renderer, view cube
Much easier to work with than dealing with low-level WebGL API
Basic boilerplate and set up info to configure a VR session on a web page
Handles enormous amount of boiler plate code to set up a VR session consistently across many different types of set ups
https://caniuse.com/#search=webxr
// Checks to see if WebXR is available and, if so, queries a list of
// XRDevices that are connected to the system.
// Adds a helper button to the page that indicates if any XRDevices are
// available and let's the user pick between them if there's multiple.
// Is WebXR available on this UA?
// Request an XRDevice connected to the system.
// If the device allows creation of exclusive sessions set it as the
// target of the 'Enter XR' button.
// Called when the user selects a device to present to. In response we
// will request an exclusive session from that device.
// Called when we've successfully acquired a XRSession. In response we
// will set up the necessary session state and kick off the frame loop.
// This informs the 'Enter XR' button that the session has started and
// that it should display 'Exit XR' instead.
// Listen for the sessions 'end' event so we can respond if the user
// or UA ends the session for any reason.
// Create a WebGL context to render with, initialized to be compatible
// with the XRDisplay we're presenting to.
// Create a renderer with that GL context (this is just for the samples
// framework and has nothing to do with WebXR specifically.)
// Set the scene's renderer, which creates the necessary GPU resources.
// Use the new WebGL context to create a XRWebGLLayer and set it as the
// sessions baseLayer. This allows any content rendered to the layer to
// be displayed on the XRDevice.
// Get a frame of reference, which is required for querying poses. In
// this case an 'eye-level' frame of reference means that all poses will
// be relative to the location where the XRDevice was first detected.
// Per-frame scene setup. Nothing WebXR specific here.
// Inform the session that we're ready for the next frame.
// Get the XRDevice pose relative to the Frame of Reference we created
// earlier.
// Getting the pose may fail if, for example, tracking is lost. So we
// have to check to make sure that we got a valid pose before attempting
// to render with it. If not in this case we'll just leave the
// framebuffer cleared, so tracking loss means the scene will simply
// dissapear.
// If we do have a valid pose, bind the WebGL layer's framebuffer,
// which is where any content to be displayed on the XRDevice must be
// rendered.
// Clear the framebuffer
// Loop through each of the views reported by the frame and draw them
// into the corresponding viewport.
// Draw this view of the scene. What happens in this function really
// isn't all that important. What is important is that it renders
// into the XRWebGLLayer's framebuffer, using the viewport into that
// framebuffer reported by the current view, and using the
// projection and view matricies from the current view and pose.
// We bound the framebuffer and viewport up above, and are passing
// in the appropriate matrices here to be used when rendering.
That is a lot of code just to create a VR scene. Good to know what the API is responsible for, but if what if you just want to start building VR environments in the browser, as quickly as possible?
Is ~10 LOC quick enough?
This is the best place to start for 90% of web devs
https://aframe.io/
Brilliant entity component framework by Mozilla, allows you to declaratively build and define a 3D VR scene with a natural HTML markup syntax
Abstract a scene using entity component architecture
Components and entities abstract 3d concepts like geometry, mesh, lighting, textures into single objects in a scene
Can create higher level re-usable components
Declaratively mark up a scene using high level re-usable components
Multiple ways to install, depending on your projects build setup.
Declaratively build a scene by nesting entities inside of <a-scene>
Components are an entities Attributes
Compose entities of each other
Can extend this to a full interaction model
Load huge geometry effeciently
This fetches the latest version of the CLI and installs it on your system. After installation, we can use it to generate the initial code for our first project. Start by navigating to a directory where you would like to put your new project, and run the command to create a new project called Hello360.
This creates a new directory called Hello360, with all of the files needed to run your project. Enter the directory to view them.
During development, the bundler runs a local server that allows you to access your project. It serves up the files for your project, doing any necessary compilation or processing at request time. When you're ready to publish your project, you can instruct the bundler to build production versions of these files, so you can place them on any web server. For now, start the development server with the following command.
After the first load, successive loads are much faster, even when you change your code. You can watch the progress in the terminal where you started your server, and once the app has loaded you should see something like this in your browser:
Previously React VR, project has been replaced with React 360. Focused on 3D and 360 UIs, and photosphere and 360 video integration for web applications
React 360 allows you to use familiar tools and concepts to create immersive 360 content on the web.
Abstractions are focused on user interfaces and user interactions, rather than focus on 3D scene framework (A-Frame approach)
Uses Three.js internally, but in the future will be open to working with WebGL directly
Executors
Executors are pieces of the runtime that run your React application in a separate process from the main browser window. React 360 ships with two different executors, but chances are good that you don't need to worry about configuring this.
Web Worker Executor
Web Workers are a modern browser feature that allows code to run outside of the main window context. This is ideal for high-cost operations, or in our case, running code without interrupting the requestAnimationFrame loop. By default, React 360 uses a Web Worker to execute your React code. That means that any code found in your index.js runs inside a Web Worker environment, not the standard browser window
React 360 is still in VERY early stages
Mininal API surface, not many built-in Components and APIs yet. Oculus native APIs are the focus for game development, React 360 has transitioned to focusing on developing Immersive 360 media for the web, which can be experienced with VR and AR equipment, but its not necessarily a requirement.
Not many examples yet
Windows Mixed Reality
Smartphone cameras
Generally understood as a bit harder to pull off a good AR experience, compared to VR
This is because VR developers have 100% control of user perception. AR needs to take into account data from the real world, at human scale and time
Markers allow the AR engine to determine physical space that is being viewed by the camera
Algorithms adjust over time, if the expected surface “drifts” from the actual surface, markers help the AR engine correct itself
Can think of like a “QR” code to activate AR display
Can create custom markers as well
But AR.js supports another kind of marker, called barcode. Each of those markers contains a kind of binary code which encodes a number. For example below, you see one representing 5
While the tech is not quite mature, the capabilities of the existing tech is quite impressive
The more time you spend working with AR and VR features, the more you start to feel like this is going to be the future for a lot of industries