This document discusses designing interactive augmented reality experiences for the web. It covers using smartphone AR capabilities like motion tracking and understanding the environment. It also discusses tools like WebARonARCore and WebARonARKit that allow bringing AR to the web. Prototypes were built to explore use cases, design principles, interfaces, and developer workflows. Code examples demonstrate techniques like loading assets, 3D rendering, model compression, and polyfills to enable AR capabilities on desktop. Guidelines and specifications and resources for getting started with web-based AR are also referenced.
Let's make the real world better together with virtual augmentation. AR is a cool and useful new technology that adds great power to potential applications. And it does not have to be that hard to get into it. We're going to make 3D happen on an iPad in the room. And we're going to do it with JavaScript, using open source software you can use and deploy at home or work.
Attendees will leave with knowledge of 3D programming principles, specifically how AR fits over that, and specific techniques to express 3D virtual objects and scenes in a real-world context on iOS using the react-reality framework for React Native.
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.
Building AR and VR Experiences for Web Apps with JavaScriptFITC
It is increasingly important to understand how AR and VR technologies are changing what is possible to do in modern web applications. There are a lot of tools and technologies that you can choose from to tie all of the pieces together to start implementing AR and VR features, but not all of them are JavaScript or web friendly. In this talk Hasan will get into AR and VR development from the perspective of a web app developer who is competent with modern JavaScript and web development tools. He will also introduce a way to share what you build on the growing Oculus platform, and why Oculus is a great entry point for VR.
Objective
Learn how to approach your first feature or project involving AR or VR in your applications that run in browsers and mobile devices, all using JavaScript
Target Audience
Web application developers interested in building AR and VR driven features in their web applications
Assumed Audience Knowledge
JavaScript, web technology
Five Things Audience Members Will Learn
WebGL basics
Intro to React360
Working with Three.js
What types of use cases to apply AR and VR technology to
Building for Oculus
Let's make the real world better together with virtual augmentation. AR is a cool and useful new technology that adds great power to potential applications. And it does not have to be that hard to get into it. We're going to make 3D happen on an iPad in the room. And we're going to do it with JavaScript, using open source software you can use and deploy at home or work.
Attendees will leave with knowledge of 3D programming principles, specifically how AR fits over that, and specific techniques to express 3D virtual objects and scenes in a real-world context on iOS using the react-reality framework for React Native.
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.
Building AR and VR Experiences for Web Apps with JavaScriptFITC
It is increasingly important to understand how AR and VR technologies are changing what is possible to do in modern web applications. There are a lot of tools and technologies that you can choose from to tie all of the pieces together to start implementing AR and VR features, but not all of them are JavaScript or web friendly. In this talk Hasan will get into AR and VR development from the perspective of a web app developer who is competent with modern JavaScript and web development tools. He will also introduce a way to share what you build on the growing Oculus platform, and why Oculus is a great entry point for VR.
Objective
Learn how to approach your first feature or project involving AR or VR in your applications that run in browsers and mobile devices, all using JavaScript
Target Audience
Web application developers interested in building AR and VR driven features in their web applications
Assumed Audience Knowledge
JavaScript, web technology
Five Things Audience Members Will Learn
WebGL basics
Intro to React360
Working with Three.js
What types of use cases to apply AR and VR technology to
Building for Oculus
Releasing a great app is more than having a unique idea. It takes teamwork, collaboration and the will to be the best. At Novoda we make awesomeness happen. This talk is about our process from coding dojos to group design and iterative sprint planning with our customers. We'll describe some of our best practices as well as some of the components that can make a good app great.
This includes:
- Day-to-day processes: pairing tennis, gif code reviews and toggling hidden features.
- Work Environment: hack & tells, continuous communication & kicking ass at Tekken.
- Releasing the app: polishing & quantifying can get you top of the class and not listening to Google can get you expelled.
Finishing with some bonus Android coding tips and tricks and crazy AOSP anti-patterns.
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017Codemotion
Get ready to develop a brand new experiences that seamlessly blend the digital and physical worlds with Android! We will learn the potential of the new AR SDK from Google, ARCore. By looking its 3 key technologies: Motion tracking, Environmental understanding and Light estimation We will have a clear vision of what We can develop with. You will be back at home with a deeper understanding of how to create AR apps with ARCore using your development environment and ready-to-reuse code samples.
Rockin' the Web into the Next Dimension: JQueryTO 2014 Final KeynoteVerold
Mozilla gave the web development community a wake up call last year at GDC by demonstrating the Unreal Engine running in the browser. Graphics, audio, networking, all performing natively in Javascript, without plugins. The implications for game development are huge - no more painful porting to multiple platforms, and significantly faster user acquisition. But we’re not talking about technology in the latest game console, we’re talking about technology in your web browser. Technology that is available to you, as a web designer and developer. It’s pushing the frontier of web design, and we’re all going to be better for it.
Mozilla’s demo was made possible largely because of WebGL, the Javascript API that lets web developers write directly to the graphics card. WebGL is an open standard that has been gaining momentum over the last three years. Alone, it opens up massive opportunities for data visualization and high performance graphics in your web apps and games. But it’s not alone, it’s part of an alphabet soup of advanced features in modern browsers that give creative coders unprecedented freedom: WebGL for graphics, WebCL and Web Workers for processing, WebRTC for networking, Web Sockets for real-time services and hardware device access.
Folks, there is a new frontier to be explored. Thanks to your modern browser, you have more raw horsepower than you could ever have imagined. I’m going to show you what’s possible, and inspire you to reach out of your comfort zone and use this new freedom to create next generation user experiences. The web is sexy again, let’s rock it!
Hacking for Salone: Drone Races - Di Saverio; Lippolis - Codemotion Milan 2016Codemotion
This year for the Salone del Mobile at frog, we came up with a funky experiment, based on Drones, Android, and VR. In this talk, your hosts will walk you through our Drone Race experiment, touching topics like real-time computer vision, reactive programming for mobile, indoor positioning and (wheeled) Drones hacking. The variety and complexity of these topics is equal to its coolness though, so you may be puzzled asking yourself: "Where do I start?" We will share experiences and lots of code, so that you can start right away.
Single Page Applications – Know The Ecosystem systemSynerzip
This webinar discusses technology frameworks recommended approach for building Single Page web applications.
In this Webinar, we will explore what goes into building a Single Page Application and the ecosystem around it. We will be looking at different aspects of Single Page Applications and how they fit together.
Read more at https://www.synerzip.com/webinar/building-single-page-applications-know-the-ecosystem-webinar-february-2014/
Building Robotics Application at Scale using OpenSource from Zero to HeroAlex Barbosa Coqueiro
Today, organizations are using robotics to address a host of business challenges, from the self-driving car to autonomous walkers to assist older adults, exploring various environments from deep oceans to other planets like Mars. In the past, the integration of these robots took a significant amount of time and effort, and it required specialized expertise in this field. Still, this scenario has dramatically changed thanks to adopting a real-time production system with Linux and the Robot Operating System (ROS). ROS is an open-source software framework for robot development, including middleware, drivers, libraries, tools, and commonly used algorithms for robotics. In this session, we walk the audience through the steps from design to deployment robots using ROS2 Foxy (new version of ROS) from zero to hero using live demo using Python 3 (rclpy) with DDS (Data Distribution Service) simulating real-world environments with Gazebo (open-source 3D robotics simulator). In a nutshell, I will cover designing, developing, testing, and deploying intelligent robotics applications at scale, including integration with critical components, and discuss models that allow for optimized large fleet management.
Part of a course on multimedia document engineering, presented at EPFL during the Spring 2009 semester. Quick introduction to the W3C SVG specification and Model Driven User Interface Design.
Varun Vachhar
rangle.io
Overview
JavaScript frameworks allow us to build innovative and delightful experiences for our users. A common approach adopted with these modern tools is to combine all required JavaScript into one large bundle. Therefore, causing the loading performance to suffer. Especially on older devices or devices with low memory and processing power.
An alternative approach is to split your code into various smaller chunks which you can then be loaded on demand — allowing you to reduce the load time drastically.
In this session, Varun will demonstrate how you can adopt the practice of code-splitting when building applications with frameworks such as React and Vue.
Objective
Learn how to use code-splitting to improve the loading performance of Javascript heavy applications.
Target Audience
Front-end developers who build JavaScript heavy applications
Assumed Audience Knowledge
Basic understanding of web development and some familiarity with frameworks such as React, Angular or Vue.
Level
Intermediate
Five Things Audience Members Will Learn
What is code-splitting?
Different types of code-splitting
How to split a React or Vue application
How to “lazy-load” parts of the application
Removing duplicate code from chunksa
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
More Related Content
Similar to Designing Interactive Web Based AR Experiences
Releasing a great app is more than having a unique idea. It takes teamwork, collaboration and the will to be the best. At Novoda we make awesomeness happen. This talk is about our process from coding dojos to group design and iterative sprint planning with our customers. We'll describe some of our best practices as well as some of the components that can make a good app great.
This includes:
- Day-to-day processes: pairing tennis, gif code reviews and toggling hidden features.
- Work Environment: hack & tells, continuous communication & kicking ass at Tekken.
- Releasing the app: polishing & quantifying can get you top of the class and not listening to Google can get you expelled.
Finishing with some bonus Android coding tips and tricks and crazy AOSP anti-patterns.
Giovanni Laquidara - Hello ARCore - Codemotion Milan 2017Codemotion
Get ready to develop a brand new experiences that seamlessly blend the digital and physical worlds with Android! We will learn the potential of the new AR SDK from Google, ARCore. By looking its 3 key technologies: Motion tracking, Environmental understanding and Light estimation We will have a clear vision of what We can develop with. You will be back at home with a deeper understanding of how to create AR apps with ARCore using your development environment and ready-to-reuse code samples.
Rockin' the Web into the Next Dimension: JQueryTO 2014 Final KeynoteVerold
Mozilla gave the web development community a wake up call last year at GDC by demonstrating the Unreal Engine running in the browser. Graphics, audio, networking, all performing natively in Javascript, without plugins. The implications for game development are huge - no more painful porting to multiple platforms, and significantly faster user acquisition. But we’re not talking about technology in the latest game console, we’re talking about technology in your web browser. Technology that is available to you, as a web designer and developer. It’s pushing the frontier of web design, and we’re all going to be better for it.
Mozilla’s demo was made possible largely because of WebGL, the Javascript API that lets web developers write directly to the graphics card. WebGL is an open standard that has been gaining momentum over the last three years. Alone, it opens up massive opportunities for data visualization and high performance graphics in your web apps and games. But it’s not alone, it’s part of an alphabet soup of advanced features in modern browsers that give creative coders unprecedented freedom: WebGL for graphics, WebCL and Web Workers for processing, WebRTC for networking, Web Sockets for real-time services and hardware device access.
Folks, there is a new frontier to be explored. Thanks to your modern browser, you have more raw horsepower than you could ever have imagined. I’m going to show you what’s possible, and inspire you to reach out of your comfort zone and use this new freedom to create next generation user experiences. The web is sexy again, let’s rock it!
Hacking for Salone: Drone Races - Di Saverio; Lippolis - Codemotion Milan 2016Codemotion
This year for the Salone del Mobile at frog, we came up with a funky experiment, based on Drones, Android, and VR. In this talk, your hosts will walk you through our Drone Race experiment, touching topics like real-time computer vision, reactive programming for mobile, indoor positioning and (wheeled) Drones hacking. The variety and complexity of these topics is equal to its coolness though, so you may be puzzled asking yourself: "Where do I start?" We will share experiences and lots of code, so that you can start right away.
Single Page Applications – Know The Ecosystem systemSynerzip
This webinar discusses technology frameworks recommended approach for building Single Page web applications.
In this Webinar, we will explore what goes into building a Single Page Application and the ecosystem around it. We will be looking at different aspects of Single Page Applications and how they fit together.
Read more at https://www.synerzip.com/webinar/building-single-page-applications-know-the-ecosystem-webinar-february-2014/
Building Robotics Application at Scale using OpenSource from Zero to HeroAlex Barbosa Coqueiro
Today, organizations are using robotics to address a host of business challenges, from the self-driving car to autonomous walkers to assist older adults, exploring various environments from deep oceans to other planets like Mars. In the past, the integration of these robots took a significant amount of time and effort, and it required specialized expertise in this field. Still, this scenario has dramatically changed thanks to adopting a real-time production system with Linux and the Robot Operating System (ROS). ROS is an open-source software framework for robot development, including middleware, drivers, libraries, tools, and commonly used algorithms for robotics. In this session, we walk the audience through the steps from design to deployment robots using ROS2 Foxy (new version of ROS) from zero to hero using live demo using Python 3 (rclpy) with DDS (Data Distribution Service) simulating real-world environments with Gazebo (open-source 3D robotics simulator). In a nutshell, I will cover designing, developing, testing, and deploying intelligent robotics applications at scale, including integration with critical components, and discuss models that allow for optimized large fleet management.
Part of a course on multimedia document engineering, presented at EPFL during the Spring 2009 semester. Quick introduction to the W3C SVG specification and Model Driven User Interface Design.
Similar to Designing Interactive Web Based AR Experiences (20)
Varun Vachhar
rangle.io
Overview
JavaScript frameworks allow us to build innovative and delightful experiences for our users. A common approach adopted with these modern tools is to combine all required JavaScript into one large bundle. Therefore, causing the loading performance to suffer. Especially on older devices or devices with low memory and processing power.
An alternative approach is to split your code into various smaller chunks which you can then be loaded on demand — allowing you to reduce the load time drastically.
In this session, Varun will demonstrate how you can adopt the practice of code-splitting when building applications with frameworks such as React and Vue.
Objective
Learn how to use code-splitting to improve the loading performance of Javascript heavy applications.
Target Audience
Front-end developers who build JavaScript heavy applications
Assumed Audience Knowledge
Basic understanding of web development and some familiarity with frameworks such as React, Angular or Vue.
Level
Intermediate
Five Things Audience Members Will Learn
What is code-splitting?
Different types of code-splitting
How to split a React or Vue application
How to “lazy-load” parts of the application
Removing duplicate code from chunksa
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
Presented at FITC Toronto 2019
More info at www.fitc.ca/toronto
Carl Sziebert
Google
Overview
Innovation is defined as the process of making an idea into a good or service that creates value by meeting a need or solving a problem at scale. This talk explores ways to find inspiration from everyday sources, invest in skills that foster collaboration, and identify opportunities for impact. While leveraging the core principles of and learnings from designing products for real people, Carl will examine a number methods for building creativity and innovation into our everyday work.
Target Audience
For individual contributors looking to cultivate opportunities for impact and find the right time, space, and tools to innovate in our everyday work.
Five Things Audience Members Will Learn
A bottom-up approach to framing innovation within your daily work
Identify and validate opportunities that make an impact
Prioritize, prototype, and build understanding of the problems you are solving
Collaborate locally and globally
Seek, give, and apply feedback often
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
Matt Swoboda
Notch
Overview
The adoption of real-time technologies and workflows for content creation is a seismic shift in the world of video/graphics. It has a fundamental effect on not just on render times but on the entire creative process. In this session hear from someone who has been using realtime graphics for creative work for almost 20 years, and his experiences in applying it to productions such as the Ed Sheeran world tour and Cirque du Soleil.
Objective
Give the audience an overview of what really is capable in a real-time workflow today, and where things are headed.
Target Audience
Anyone who wants to take confident steps in the direction of real-time motion graphics, especially within the live, installation and AR fields.
Five Things Audience Members Will Learn
How does real-time change the creative and production process
Limitations – where does it work, where doesn’t it make sense
What real-time graphics are capable of today
What happens on a rock’n’roll tour bus
What DOESN’T happen on a rock’n’roll tour bus
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
Bhavana Srinivas
Netlify
Overview
A new web stack has emerged. A stack powered by modern browsers, API economy and Git based workflows. A stack that is not tied to specific technologies. A stack that takes into account both developer experience while building the application, and user experience when interacting with the application. A stack that delivers better performance, higher security, and lower cost of scaling for web applications.
In this talk, Bhavana will dive more into the architecture and best practices for building performant web applications using the JAMstack
Objective
Educate the audience about the JAMstack and why it powers performant sites
Target Audience
Web stakeholders who want fast, secure and performant websites
Assumed Audience Knowledge
Built a website/interacted with sites
Five Things Audience Members Will Learn
What is the JAMstack
The ecosystem around the JAMstack
How to improve the performance of your site built on the JAMstack
Example sites built on this architecture
Resources and best practices
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
Studio Macouno has been realizing post industrial projects for two decades. Though they’re very busy doing things like creating generative shavers for Philips and designing life size 3D printed petition elephants, those are but a fraction of what they would like to do.
In this talk Dolf will explore the projects they just don’t have time for. The things the studio would love to do but can’t do on it’s own. The things that are way out there… Those that don’t seem possible, or are just too much work. The dreams that they think are a bit too much, but they just might do anyway.
Objective
Finding, funding and founding cooperatives for creative futurist projects.
Target Audience
People interested in making things today that seem ideas for tomorrow.
Five Things Audience Members Will Learn
Some about generative design
3d printing
Art
Running projects
And making things happen
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
19. Minimizing the use of new
Scratch matrices, vectors, quaternions
ES6 imports / exports to avoid pollution
Used [raw, image, glslify, json] loaders
Serving & reload via webpack-dev-server
eslint to catch mistakes and garbage
22. Converted .obj to .drc
Astronaut From Poly
185k > 9.5k ~20x 🤓
Astronaut From NASA
3.1M > 121k ~26x 😎
https://github.com/
google/draco github.com/google/draco
23. Responsive Layout via Bootstrap
CSS Styles via Bootswatch (Paper Theme)
three.js (shadows, lights, shaders, math)
Model sourced from poly.google.com
Model compressed ~20x by Draco
Desktop AR Prototyping Environment 💡
24. Polyfills AR api
🔥 RAY MARCHES 🔥
virtual scene (SDFs)
GPU Hit Computation
GPU > JS Encode float
Simple 1 line include
Rapidly iterate UX & UI
Desktop AR Prototyping Environment
28. AR Transition (0.25x Speed)
Entering & Exiting AR
1. Remove model
2. Remove SDF grid
3. Remove HUD
4. Fade out sphere
5. Fade in HUD
6. Enter AR flow
29. Entering & Exiting AR
1. Zero window scroll
2. Pop off canvas
3. Remove all content
4. Add canvas back
5. Add fullscreen CSS
6. Reverse for exiting