This document provides information about developing web graphics with WebGL. It includes Tony Parisi's contact information and links to book source code and purchasing information. The document then covers topics including WebGL capabilities and browser support, examples of WebGL used in science, advertising, data visualization and more. It provides explanations of basic WebGL programming concepts such as creating a canvas, buffers, shaders and drawing. Frameworks for WebGL development like Three.js are also discussed.
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 17:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2478.html
Виртуальная реальность - мощный тренд, который до текущего момента обходил стороной веб-разработчиков. Данный доклад о том, как интегрировать существующие Web-приложения в миры виртуальной реальности, предоставляя вашим пользователям новые возможности и UX, а себе дозу фана.
Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?
3D Graphics have come to the browser and this represents a new world of possibilities. WebGL has a reputation for a high entry barrier, but fortunately there are already some frameworks out there making things simpler. We’ll cover some of the WebGL basics and show you what to look for in a framework for 3D graphics in the browser. You’ll also meet PhiloGL, a WebGL framework focused on data visualization, creative coding and game development from Sencha Labs. Prepare to watch cool 3D demos!
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 17:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2478.html
Виртуальная реальность - мощный тренд, который до текущего момента обходил стороной веб-разработчиков. Данный доклад о том, как интегрировать существующие Web-приложения в миры виртуальной реальности, предоставляя вашим пользователям новые возможности и UX, а себе дозу фана.
Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?
3D Graphics have come to the browser and this represents a new world of possibilities. WebGL has a reputation for a high entry barrier, but fortunately there are already some frameworks out there making things simpler. We’ll cover some of the WebGL basics and show you what to look for in a framework for 3D graphics in the browser. You’ll also meet PhiloGL, a WebGL framework focused on data visualization, creative coding and game development from Sencha Labs. Prepare to watch cool 3D demos!
HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!
Although Web and mobile apps are getting more capable every day, often your application makes the most sense on the desktop. In this talk, we’ll look at some recent technologies that have allowed significant desktop apps — like Barnes & Noble’s NOOK Study e-textbook reader, or Adobe’s Brackets IDE — to be written in HTML5 and JavaScript. Projects like the Chromium Embedded Framework, node-webkit, and AppJS provide an excellent native-to-JS bridge. With them in hand, you can bring the full power of the Node.js and front-end ecosystems to bear, while still gaining the advantages of running as a native app.
Presented at SCREENS 2013 in Toronto with Nick Van Weerdenburg
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
AngularJS is a hot, hot, hot topic. Building web and mobile apps in AngularJS is an ease but there is a learning curve. In this session, you’ll learn the ins and outs of AngularJS and leave the session knowing how to build killer AngularJS apps.
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn practical techniques on how to access a web service, how to work with camera, and how to make live tiles, etc.
◦Expect a lot of code and demo.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.
Slides of my talk at Coding-Berlin November Meetup on 01.11.2017 (https://www.meetup.com/CODING-BERLIN/events/244169839). Also have a look at the demo repo at Github: https://github.com/coding-berlin/vuejs-demo
I'll tell you about using 3D technologies in browsers. I will explain the advantages of WebGL. Let’s get acquainted with the basic concepts of 3D. I’ll show you how to write a simple 3D viewer and add to this some interesting features.
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
Virtual Reality development has become very active recently, with the availability of low cost and high quality headsets, motion tracking equipment, and sensors. However, most VR app development is happening natively — users are stuck in the days of needing to download the right binary, trust a third-party that their code isn’t malicious and fix compatibility issues. Developers need to target multiple platforms, thus often ignoring those with fewer users. Instead, wouldn’t it be great if high quality VR content could be delivered through the Web?
In this session, Vladimir Vukicevic will address additions to HTML, CSS, and WebGL that Mozilla is experimenting with which allow Web developers to create immersive VR experiences. Everything from pure VR WebGL content to responsive HTML and CSS that can shift from mobile to tablet to desktop to VR will be covered. Additionally, Vladimir will discuss delivering VR video via the Web, as well as how to mix WebGL and CSS content in a true 3D space.
OBJECTIVE
To show how VR and the Web work together, and the techniques for bringing VR content to the Web.
TARGET AUDIENCE
Web developers and designers
ASSUMED AUDIENCE KNOWLEDGE
Some knowledge of at least one of WebGL, CSS 3D Transforms, or modern 3D graphics would be helpful.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
An overview of current VR devices, their capabilities and how they can interface with the Web.
How to render WebGL content to a VR device.
How to create documents using HTML and CSS that can be projected in VR.
How to create responsive documents that can shift in and out of VR based on user choice.
How WebGL and CSS content can be mixed, providing interactive 3D graphics but with the full power of HTML for non-3D elements.
Writing JavaScript as a hobby and writing JavaScript as a job are two very different things. Learn some common practices for making your JavaScript friendly to a team environment.
HTML5 is all the rage with the cool kids, and although there’s a lot of focus on the new language, there’s plenty for web app developers with new JavaScript APIs both in the HTML5 spec and separated out as their own W3C specifications. This session will take you through demos and code and show off some of the outright crazy bleeding edge demos that are being produced today using the new JavaScript APIs. But it’s not all pie in the sky – plenty is useful today, some even in Internet Explorer!
Although Web and mobile apps are getting more capable every day, often your application makes the most sense on the desktop. In this talk, we’ll look at some recent technologies that have allowed significant desktop apps — like Barnes & Noble’s NOOK Study e-textbook reader, or Adobe’s Brackets IDE — to be written in HTML5 and JavaScript. Projects like the Chromium Embedded Framework, node-webkit, and AppJS provide an excellent native-to-JS bridge. With them in hand, you can bring the full power of the Node.js and front-end ecosystems to bear, while still gaining the advantages of running as a native app.
Presented at SCREENS 2013 in Toronto with Nick Van Weerdenburg
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
AngularJS is a hot, hot, hot topic. Building web and mobile apps in AngularJS is an ease but there is a learning curve. In this session, you’ll learn the ins and outs of AngularJS and leave the session knowing how to build killer AngularJS apps.
What Web Developers Need to Know to Develop Windows 8 AppsDoris Chen
You already have a Web app on the Internet and want to reach customers with a new, targeted experience on Windows 8. Come get practical guidance and best practices on how to reuse your Web assets. Come dive into the specifics of this exciting platform and see how you can use your Web skills to build deeply-integrated Windows apps.
◦You’ll discover how this mirrors or differs from traditional Web programming and how to harness the rich capabilities of Windows 8 through JavaScript and the Windows Runtime.
◦You'll learn practical techniques on how to access a web service, how to work with camera, and how to make live tiles, etc.
◦Expect a lot of code and demo.
This session will jump start you with everything you need to know to start building Windows 8 apps with the skills you already have.
Slides of my talk at Coding-Berlin November Meetup on 01.11.2017 (https://www.meetup.com/CODING-BERLIN/events/244169839). Also have a look at the demo repo at Github: https://github.com/coding-berlin/vuejs-demo
I'll tell you about using 3D technologies in browsers. I will explain the advantages of WebGL. Let’s get acquainted with the basic concepts of 3D. I’ll show you how to write a simple 3D viewer and add to this some interesting features.
Flash over the years, has been used to prop up the regular browser like a sad old man drinking alone in a pub.
Today browsers come shipped with technology designed to rival flash and aim to shut it squarely out of the game.
Are browser ready to rock without Flash?
Bringing Virtual Reality to the Web: VR, WebGL and CSS – Together At Last!FITC
Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
Virtual Reality development has become very active recently, with the availability of low cost and high quality headsets, motion tracking equipment, and sensors. However, most VR app development is happening natively — users are stuck in the days of needing to download the right binary, trust a third-party that their code isn’t malicious and fix compatibility issues. Developers need to target multiple platforms, thus often ignoring those with fewer users. Instead, wouldn’t it be great if high quality VR content could be delivered through the Web?
In this session, Vladimir Vukicevic will address additions to HTML, CSS, and WebGL that Mozilla is experimenting with which allow Web developers to create immersive VR experiences. Everything from pure VR WebGL content to responsive HTML and CSS that can shift from mobile to tablet to desktop to VR will be covered. Additionally, Vladimir will discuss delivering VR video via the Web, as well as how to mix WebGL and CSS content in a true 3D space.
OBJECTIVE
To show how VR and the Web work together, and the techniques for bringing VR content to the Web.
TARGET AUDIENCE
Web developers and designers
ASSUMED AUDIENCE KNOWLEDGE
Some knowledge of at least one of WebGL, CSS 3D Transforms, or modern 3D graphics would be helpful.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
An overview of current VR devices, their capabilities and how they can interface with the Web.
How to render WebGL content to a VR device.
How to create documents using HTML and CSS that can be projected in VR.
How to create responsive documents that can shift in and out of VR based on user choice.
How WebGL and CSS content can be mixed, providing interactive 3D graphics but with the full power of HTML for non-3D elements.
Writing JavaScript as a hobby and writing JavaScript as a job are two very different things. Learn some common practices for making your JavaScript friendly to a team environment.
TК°Conf. Ещё не поздно учить WebGL. Антон Корзунов.TKConf
Что в докладе:
Коротко о том, почему WebGL не нужен;
Коротко о тех кейсах, где он может быть полезен;
Коротко о том, почему его следует изучить;
Немного о том, чем webgl является, а чем нет;
И о том чем webgl отличается от TreeJs.
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
Using the potential of WebGL in web browser in a simple way with three.js javascript library. Practical demonstration of a WebGL app developed for a Silicon Valley startup.
The Power of WebGL - Hackeando sua GPU com JavaScriptRaphael Amorim
Vamos aprender a hackear placas de vídeo com Javascript usando WebGL (Web Graphics Library) e a usar a mesma tecnologia para criar realidade virtual usando MozVR. WebGL é uma API em JavaScript, disponível a partir do novo elemento canvas da HTML5, que oferece suporte para renderização de gráficos 2D e gráficos 3D.
a billion desktops - check.
mobile support turned on by default - check.
Microsoft on board - check.
engines, tools, killer apps – check.
it's GO time.
My look at the WebGL landscape circa late 2013, presented at the GamesJS Meetup September 30th 2013. http://www.meetup.com/gamesjs/events/140781742/
JS Experience 2017 - Animações simples com o three.jsiMasters
Luis Camicado e Henrique Poyatos, Front End Developer e Professor de EAD da FIAP falam sobre Animações simples com o three.js no JS Experience'17
Saiba mais em https://eventos.imasters.com.br/jsexperience
From Hello World to the Interactive Web with Three.js: Workshop at FutureJS 2014Verold
The first workshop at the first ever FutureJS conference in Barcelona. From Three.js Hello World to building your first interactive 3D app, to connecting your web app with the Internet of Things.
OpenGL Fixed Function to Shaders - Porting a fixed function application to “m...ICS
Watch the video here: http://bit.ly/1TA24fU
OpenGL Fixed Function to Shaders - Porting a fixed function application to “modern” OpenGL - Webinar Mar 2016
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.
State of the content pipeline for WebGL Development. Not perfect but it's going in the right direction with improved COLLADA integration and a new file format, glTF, in the works.
Migrating your Web app to Virtual RealityDenis Radin
HTML/CSS is an ultimate stack for UI development however hyping VR technology still have no way to reuse millions of Web applications already available. This talk is about theory and practice of porting existing HTML/CSS apps into Virtual Reality.
Oculus Rift is bought by Facebook, HTC investing 10 billions in VR apps developers, Sony got VR for PlayStation, Nintendo is going VR. Virtual Reality is booming and number of households having VR doubles every month. The same do number of VR applications. However it is still not possible to bring best UI development practices into Virtual Reality using UI development unicorn - Web platform.
This talk gives insights on ways possible for displaying HTML/CSS content in Virtual Reality. Should we go CSS way or WebGL? What are possible solutions and most expected pitfalls? Why HTML is still a good choice to develop interfaces for VR? How Web developers can contribute to VR industry? These are questions answered.
Similar to Developing Web Graphics with WebGL (20)
Face the Future: Computing in an Augmented WorldTony Parisi
My Keynote Talk from AWE 2017. http://www.augmentedworldexpo.com/
Pairs best with transcript: https://medium.com/@tonyparisi/face-the-future-58ed3b63d91
Slides for my talk on The Future of Virtual Reality at the Tech In Motion Silicon Valley Meetup on August 20th, 2014. http://www.meetup.com/TechinMotionSiliconValley/events/195316252/
The Browser As Console - HTML5 and WebGL for Game DevelopmentTony Parisi
Slides from my talk at April 24, 2014 Tales of JavaScript Meetup: HTML5 & WebGL Game Evolution and Development http://www.meetup.com/talesofjavascript/events/177380702/
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...Neo4j
Leonard Jayamohan, Partner & Generative AI Lead, Deloitte
This keynote will reveal how Deloitte leverages Neo4j’s graph power for groundbreaking digital twin solutions, achieving a staggering 100x performance boost. Discover the essential role knowledge graphs play in successful generative AI implementations. Plus, get an exclusive look at an innovative Neo4j + Generative AI solution Deloitte is developing in-house.
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...SOFTTECHHUB
The choice of an operating system plays a pivotal role in shaping our computing experience. For decades, Microsoft's Windows has dominated the market, offering a familiar and widely adopted platform for personal and professional use. However, as technological advancements continue to push the boundaries of innovation, alternative operating systems have emerged, challenging the status quo and offering users a fresh perspective on computing.
One such alternative that has garnered significant attention and acclaim is Nitrux Linux 3.5.0, a sleek, powerful, and user-friendly Linux distribution that promises to redefine the way we interact with our devices. With its focus on performance, security, and customization, Nitrux Linux presents a compelling case for those seeking to break free from the constraints of proprietary software and embrace the freedom and flexibility of open-source computing.
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Pushing the limits of ePRTC: 100ns holdover for 100 daysAdtran
At WSTS 2024, Alon Stern explored the topic of parametric holdover and explained how recent research findings can be implemented in real-world PNT networks to achieve 100 nanoseconds of accuracy for up to 100 days.
2. about me
serial entrepreneur
founder, stealth startup
consulting architect and CTO
co-creator, VRML and X3D web standards
co-designer, glTF
author, speaker instructor
contact information
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe
p://www.tonyparisi.com/
http://www.learningwebgl.com/
book source code
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
htt
get the books!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-ApplicationsHTML5-WebGL-Visualization/dp/1449362966
http://www.tonyparisi.com
10/22/2
013
5. WebGL:
real-time 3D rendering
the 3D API standard
OpenGL ES™ in a browser
JavaScript API bindings
supported in all modern browsers
shipped since early 2011
supported in
•
•
•
•
•
desktop Safari, Firefox, Chrome, Opera
Internet Explorer (late 2013)
iOS mobile Safari – iAds only
Android – mobile Chrome, mobile Firefox
Blackberry, Tizen, Firefox OS
•
Surface (Windows 8.1)
•
•
Kindle Fire HDX
500M+ seats -> 1B
http://www.tonyparisi.com
10/22/2
013
6. science and education
100,000 Stars Google Experiment
http://workshop.chromeexperiments.com/stars/
http://www.tonyparisi.com
10/22/2
013
7. advertising and media
collaboration with Rei Inamoto and AKQA
http://makeourmark.levi.com/project-overview-whatmovesyou.html
developed by Tony Parisi and Simo Santavirta
http://www.simppa.fi/
http://www.tonyparisi.com
10/22/2
013
12. how WebGL works
it’s a JavaScript drawing API
draw to a canvas element using a special context (“webgl”)
low-level drawing – buffers, primitives, textures and shaders
accelerated by graphics hardware (GPU)
can draw 2D as well as 3D graphics
integrates seamlessly with other page content
there is no file format; no markup language; no DOM.
libraries and frameworks are key to fast ramp up and
productive development
http://www.tonyparisi.com
10/22/2
013
13. a simple WebGL program
1. create a <canvas> element
2. obtain a drawing context
3. initialize the viewport
4. create one or more buffers
5. create one or more matrices
6. create one or more shaders
7. initialize the shaders
8. draw one or more primitives
http://www.tonyparisi.com
10/22/2
013
14. create the canvas, context and
viewport
function initWebGL(canvas) {
var gl = null;
var msg = "Your browser does not support WebGL, " +
"or it is not enabled by default.";
try
{
gl = canvas.getContext(“webgl");
}
catch (e)
{
msg = "Error creating WebGL Context!: " + e.toString();
}
detect WebGL
if (!gl)
{
alert(msg);
throw new Error(msg);
}
return gl;
}
function initViewport(gl, canvas)
{
gl.viewport(0, 0, canvas.width, canvas.height);
}
set WebGL drawing
region
http://www.tonyparisi.com
10/22/2
013
15. buffers and typed arrays
var vertexBuffer;
vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
var verts = [
// Front face
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, 1.0, 1.0,
// Back face
-1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
1.0, -1.0, -1.0,
…
WebGL drawing functions
use buffers of data
new low-level data type
stores arrays of floats
and ints compactly
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);
http://www.tonyparisi.com
10/22/2
013
16. shaders
var vertexShaderSource =
"
"
"
"
"
"
"
"
"
"
"
"
the vertex shader
attribute vec3 vertexPos;n" +
attribute vec2 texCoord;n" +
transforms model-space
uniform mat4 modelViewMatrix;n" +
positions into screen
uniform mat4 projectionMatrix;n" +
space
varying vec2 vTexCoord;n" +
void main(void) {n" +
// Return the transformed and projected vertex valuen" +
gl_Position = projectionMatrix * modelViewMatrix * n" +
vec4(vertexPos, 1.0);n" +
// Output the texture coordinate in vTexCoordn" +
vTexCoord = texCoord;n" +
}n";
the fragment shader
var fragmentShaderSource =
" precision mediump float;n" +
outputs a color value
" varying vec2 vTexCoord;n" +
for each pixel
" uniform sampler2D uSampler;n" +
" void main(void) {n" +
" // Return the pixel color: always output whiten" +
" gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));n" +
"}n";
http://www.tonyparisi.com
10/22/2
013
17. drawing
function draw(gl, obj) {
// clear the background (with black)
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
clear the canvas
// set the shader to use
gl.useProgram(shaderProgram);
set the shader
// connect up the shader parameters: vertex position, texture coordinate,
// projection/model matrices and texture
// set up the buffers
gl.bindBuffer(gl.ARRAY_BUFFER, obj.buffer);
gl.vertexAttribPointer(shaderVertexPositionAttribute, obj.vertSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, obj.texCoordBuffer);
gl.vertexAttribPointer(shaderTexCoordAttribute, obj.texCoordSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indices);
gl.uniformMatrix4fv(shaderProjectionMatrixUniform, false, projectionMatrix);
gl.uniformMatrix4fv(shaderModelViewMatrixUniform, false, modelViewMatrix);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, webGLTexture);
gl.uniform1i(shaderSamplerUniform, 0);
// draw the object
gl.drawElements(obj.primtype, obj.nIndices, gl.UNSIGNED_SHORT, 0);
}
set up buffers for
vertices and
texture
coordinates
pass transform
and projection
matrices
to the shader
set the texture and pass to
the shader
draw the object
http://www.tonyparisi.com
10/22/2
013
18. a WebGL client-side stack
rendering – Three.js library
animation – Three.js, Tween.js libraries
application functionality – Vizi framework
setup/teardown
interaction – picking, rollovers, rotating models
behaviors
run loop and event dispatching
content creation pipeline
3D tools e.g. Autodesk Maya
COLLADA2GLTF converter
Vizi web-based previewer
http://www.tonyparisi.com
10/22/2
013
19. three.js:
a JavaScript 3D engine
https://github.com/mrdoob/three.js/
the most popular WebGL library
renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 45, canvas.width /
canvas.height, 1, 4000 );
scene.add(camera);
var light = new THREE.DirectionalLight( 0xffffff, 1.5);
scene.add( light );
var mapUrl ="../images/webgl-logo-256.jpg“;
var map = THREE.ImageUtils.loadTexture(mapUrl );
var material = new THREE.MeshPhongMaterial({ map: map });
var geometry = new THREE.CubeGeometry(2, 2, 2);
cube = new THREE.Mesh(geometry, material);
scene.add( cube );
can render to
WebGL,
2D canvas, SVG
and CSS3
represents
WebGL at a
high level using
standard
3D graphics
concepts
http://www.tonyparisi.com
10/22/2
013
20. 3D animation
requestAnimationFrame()
http://www.paulirish.com/2011/requestanimationframe-forsmart-animating/
with JavaScript we can animate anything: materials,
lights, textures…. Shaders
Three.js has support for key frames, morphs and skins
Tween.js – simple tweening library
https://github.com/sole/tween.js/
var tween = new TWEEN.Tween( { x: 50, y: 0 } )
.to( { x: 400 }, 2000 )
.easing( TWEEN.Easing.Elastic.InOut )
.start();
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
}
create and
run tween
call TWEEN.update()
each frame to update
values
http://www.tonyparisi.com
10/22/2
013
21. creating the car (site) of the future
http://www.tonyparisi.com
10/22/2
013
22. the concept
design: TC Chang (http://www.tcchang.com/)
http://www.tonyparisi.com
10/22/2
013
24. the content pipeline - today
still pretty crude – tools and converters under development
sample work flows
A.
OBJ (single model)
1.
2.
3.
create 3D model or import into Blender
export to Three.js JSON format
load into Three.js application; hand-layout, hand-light, hand-animate
B. OBJ (single model)
1.
2.
convert to Three.js JSON using Python command-line tool
load into Three.js application; hand-layout, hand-light, hand-animate
C. MD2/MD5 (Quake single model with animation)
1.
2.
convert to Three.js JSON with online tool
load into Three.js application; hand-layout, hand-light
D. COLLADA (full scene)
1.
2.
3.
4.
export to COLLADA from Maya, 3ds Max, Blender, Sketchup
files contain scene layout, cameras, lights and animations – no need to do it by
hand
import into Three.js application and use
but COLLADA files are big to download and slow to parse
http://www.tonyparisi.com
10/22/2
013
25. the content pipeline - coming
soon: glTF
a “JPEG for 3D”
bridges the gap between existing 3D formats/tools and today’s GL based APIs
compact, efficient to load representation
balanced, pragmatic feature set
GL native data types require no additional processing
also includes common 3D constructs (hierarchy, cameras, lights, common
materials, animation )
reduces duplicated effort in content pipeline
a common publishing format for content tools
open specification; open process
Khronos Group initiative within the COLLADA working group
F. Robinet (lead), R. Arnaud, P. Cozzi, T. Parisi
http://gltf.gl/
http://www.tonyparisi.com
10/22/2
013
26. exporting and previewing
content
tree view of 3D scene graph
property sheets show detail
scene/render stats
cameras, lights and animations
http://www.tonyparisi.com
10/22/2
013
27. Vizi: a framework for 3D
applications
component-based framework a la Unity3D
Futurgo.prototype.go = function() {
this.viewer = new Vizi.Viewer({ container : this.container, showGrid : true,
allowPan: false, oneButton: true });
this.loadURL(Futurgo.URL);
built-in Viewer object for
this.viewer.run();
viewing models – handles
}
Futurgo.prototype.loadURL = function(url) {
var that = this;
var loader = new Vizi.Loader;
loader.addEventListener("loaded", function(data)
{ that.onLoadComplete(data, loadStartTime); });
var loadStartTime = Date.now();
loader.loadScene(url);
}
Futurgo.prototype.onLoadComplete = function(data, loadStartTime)
{
var scene = data.scene;
this.viewer.replaceScene(data);
…
Three.js setup, page events
(e.g. resize), mouse
events, run loop
built-in Loader
object loads models
in Three.js JSON
format, COLLADA,
glTF
add newly loaded model to
scene
http://www.tonyparisi.com
10/22/2
013
28. interaction and behaviors
API methods use regular
expression or
object type to
iterate over scene
graph
// Add entry fade behavior to the windows
var that = this;
scene.map(/windows_front|windows_rear/, function(o) {
var fader = new Vizi.FadeBehavior({duration:2, opacity:.8});
o.addComponent(fader);
setTimeout(function() {
component model fader.start();
drop behaviors onto
}, 2000);
any object
var picker = new Vizi.Picker;
picker.addEventListener("mouseover", function(event) {
that.onMouseOver("glass", event); });
picker.addEventListener("mouseout", function(event) {
that.onMouseOut("glass", event); });
picker.addEventListener("touchstart", function(event) {
that.onTouchStart("glass", event); });
picker.addEventListener("touchend", function(event) {
pickers - dispatch mouse and
that.onTouchEnd("glass", event); });
touch events to application
o.addComponent(picker);
10/22/2
});
http://www.tonyparisi.com
013
29. animations
Vizi Viewer object
maintains list of
named
animations
Futurgo.prototype.playAnimation = function(name, loop, reverse) {
var animationNames = this.viewer.keyFrameAnimatorNames; loaded from
var index = animationNames.indexOf(name);
content file (e.g.
if (index >= 0)
COLLADA, glTF)
{
this.viewer.playAnimation(index, loop, reverse);
}
}
Futurgo.prototype.playOpenAnimations = function() {
this.playAnimation("animation_window_rear_open");
this.playAnimation("animation_window_front_open");
}
play animations
looped or
unlooped, forward
or reverse
Futurgo.prototype.playCloseAnimations = function() {
this.playAnimation("animation_window_rear_open", false, true);
this.playAnimation("animation_window_front_open", false, true);
}
http://www.tonyparisi.com
10/22/2
013
30. integrating 2D and 3D
3D rollovers trigger
2D overlay display
2D page elements
control 3D scene content
http://www.tonyparisi.com
10/22/2
013
32. stay in touch…
enjoy the show!
http://html5devconf.com/
contact information
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe
p://www.tonyparisi.com/
http://www.learningwebgl.com/
book source code
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
htt
get the books!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-ApplicationsHTML5-WebGL-Visualization/dp/1449362966
http://www.tonyparisi.com
10/22/2
013