James Williams's talk from Future Insights Live 2014 in Las Vegas: "There was once a time where gaming in the browser meant Flash. That time is no more. In this session, you’ll learn the basics of game programming, WebGL, and how to use Three.js to create WebGL applications."
Miss his talk? Join us at a future show: www.futureofwebapps.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference.
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.
These are the slides of my talk about HexGL at the Adobe User Group meetup in the Netherlands.
More info: http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html
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.
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.
These are the slides of my talk about HexGL at the Adobe User Group meetup in the Netherlands.
More info: http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html
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.
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 17:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2478.html
Виртуальная реальность - мощный тренд, который до текущего момента обходил стороной веб-разработчиков. Данный доклад о том, как интегрировать существующие Web-приложения в миры виртуальной реальности, предоставляя вашим пользователям новые возможности и UX, а себе дозу фана.
Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?
2014 yılının sonunda sonlandırılması beklenen HTML standardının 5. sürümü çoktandır tarayıcılar tarafından destekleniyor. HTML5 ile gelen Canvas, Websockets ve diğer özelliklerle nasıl daha canlı, daha Flash uygulamalarına benzer, web uygulamaları geliştirebileceğimizi inceledik.
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
Two years ago I inherited jsdom, a project of breathtaking scope. In essence, it aims to simulate a browser in JavaScript, by implementing JavaScript versions of a wide variety of web standards (much more than just the DOM). While maintaining jsdom for the last two years, and eventually bringing it to a 1.0 release, I learned an incredible amount about the web. I want to share with you what I’ve learned: the history of the standards and implementations of them that make up the web; the interaction between seemingly-disparate parts of the platform; and all about the strange APIs we’ve come to know and love. You should walk away from this talk with a new appreciation for how browsers work—and how, through the ongoing effort of a community of contributors and package maintainers, we’ve been able to recreate one in pure JavaScript.
HTML version: http://www.jure.it/demo/html5videofilters
Is 2014 too early for using HTML5 video filters? Let's do some experiments and exploring how to improve your javascript scripts' performances!
Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate…
JavaScript has grown up. Now it's time to see how far it can go.
This is an updated version of my "Add more fun to your functional programming with RXJS". It includes a bit more background information on Reactive programming.
KSS, the new Ajax framework for Plone 3 comes with great components by default. But what if you need to integrate it with legacy Javascript? Or maybe you want to integrate that nice library/widget you found on the web. During this talk I will show you where you can extend KSS and how to do it. You can watch me create both the server side and client side code needed to integrate an existing piece of Javascript. After this talk KSS should have no limits for you.
Каждый день появляется по новому JavaScript фрeймворку или новой технологии. И каждый день мы задаемся вопросом, как за всем этим успеть? Константин даст Вам серебряную пулю. Вы будете знать, как быстро разобраться в React, PostCss, RxJS, Redux, CycleJs, Angular и даже в неизвестном супер фреймворке. Увидим, что стоит за трендами технологий 2016.
Подробнее: https://mavrin.github.io/pres-be-first/#1
Портируем существующее Web-приложение в виртуальную реальность / Денис Радин ...Ontico
РИТ++ 2017, Frontend Сonf
Зал Мумбаи, 5 июня, 17:00
Тезисы:
http://frontendconf.ru/2017/abstracts/2478.html
Виртуальная реальность - мощный тренд, который до текущего момента обходил стороной веб-разработчиков. Данный доклад о том, как интегрировать существующие Web-приложения в миры виртуальной реальности, предоставляя вашим пользователям новые возможности и UX, а себе дозу фана.
Должны ли мы использовать CSS или WebGL для проброса приложения в VR?
Какие решения доступны на текущий момент, и каких ошибок стоит остерегаться?
Почему HTML так же хорош для разработки VR-интерфейсов, как и для обычного, плоского Web?
Как веб-разработчик может быть частью VR-революции?
2014 yılının sonunda sonlandırılması beklenen HTML standardının 5. sürümü çoktandır tarayıcılar tarafından destekleniyor. HTML5 ile gelen Canvas, Websockets ve diğer özelliklerle nasıl daha canlı, daha Flash uygulamalarına benzer, web uygulamaları geliştirebileceğimizi inceledik.
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
Two years ago I inherited jsdom, a project of breathtaking scope. In essence, it aims to simulate a browser in JavaScript, by implementing JavaScript versions of a wide variety of web standards (much more than just the DOM). While maintaining jsdom for the last two years, and eventually bringing it to a 1.0 release, I learned an incredible amount about the web. I want to share with you what I’ve learned: the history of the standards and implementations of them that make up the web; the interaction between seemingly-disparate parts of the platform; and all about the strange APIs we’ve come to know and love. You should walk away from this talk with a new appreciation for how browsers work—and how, through the ongoing effort of a community of contributors and package maintainers, we’ve been able to recreate one in pure JavaScript.
HTML version: http://www.jure.it/demo/html5videofilters
Is 2014 too early for using HTML5 video filters? Let's do some experiments and exploring how to improve your javascript scripts' performances!
Our favorite language is now powering everything from event-driven servers to robots to Git clients to 3D games. The JavaScript package ecosystem has quickly outpaced past that of most other languages, allowing our vibrant community to showcase their talent. The front-end framework war has been taken to the next level, with heavy-hitters like Ember and Angular ushering in the new generation of long-lived, component-based web apps. The extensible web movement, spearheaded by the newly-reformed W3C Technical Architecture Group, has promised to place JavaScript squarely at the foundation of the web platform. Now, the language improvements of ES6 are slowly but surely making their way into the mainstream— witness the recent interest in using generators for async programming. And all the while, whispers of ES7 features are starting to circulate…
JavaScript has grown up. Now it's time to see how far it can go.
This is an updated version of my "Add more fun to your functional programming with RXJS". It includes a bit more background information on Reactive programming.
KSS, the new Ajax framework for Plone 3 comes with great components by default. But what if you need to integrate it with legacy Javascript? Or maybe you want to integrate that nice library/widget you found on the web. During this talk I will show you where you can extend KSS and how to do it. You can watch me create both the server side and client side code needed to integrate an existing piece of Javascript. After this talk KSS should have no limits for you.
Каждый день появляется по новому JavaScript фрeймворку или новой технологии. И каждый день мы задаемся вопросом, как за всем этим успеть? Константин даст Вам серебряную пулю. Вы будете знать, как быстро разобраться в React, PostCss, RxJS, Redux, CycleJs, Angular и даже в неизвестном супер фреймворке. Увидим, что стоит за трендами технологий 2016.
Подробнее: https://mavrin.github.io/pres-be-first/#1
case3h231/diamond.gif
case3h231/energy.jpg
case3h231/modernizr-2.js
/*!
* Modernizr v2.0.6
* http://www.modernizr.com
*
* Copyright (c) 2009-2011 Faruk Ates, Paul Irish, Alex Sexton
* Dual-licensed under the BSD or MIT licenses: www.modernizr.com/license/
*/
/*
* Modernizr tests which native CSS3 and HTML5 features are available in
* the current UA and makes the results available to you in two ways:
* as properties on a global Modernizr object, and as classes on the
* <html> element. This information allows you to progressively enhance
* your pages with a granular level of control over the experience.
*
* Modernizr has an optional (not included) conditional resource loader
* called Modernizr.load(), based on Yepnope.js (yepnopejs.com).
* To get a build that includes Modernizr.load(), as well as choosing
* which tests to include, go to www.modernizr.com/download/
*
* Authors Faruk Ates, Paul Irish, Alex Sexton,
* Contributors Ryan Seddon, Ben Alman
*/
window.Modernizr = (function( window, document, undefined ) {
var version = '2.0.6',
Modernizr = {},
// option for enabling the HTML classes to be added
enableClasses = true,
docElement = document.documentElement,
docHead = document.head || document.getElementsByTagName('head')[0],
/**
* Create our "modernizr" element that we do most feature tests on.
*/
mod = 'modernizr',
modElem = document.createElement(mod),
mStyle = modElem.style,
/**
* Create the input element for various Web Forms feature tests.
*/
inputElem = document.createElement('input'),
smile = ':)',
toString = Object.prototype.toString,
// List of property values to set for css tests. See ticket #21
prefixes = ' -webkit- -moz- -o- -ms- -khtml- '.split(' '),
// Following spec is to expose vendor-specific style properties as:
// elem.style.WebkitBorderRadius
// and the following would be incorrect:
// elem.style.webkitBorderRadius
// Webkit ghosts their properties in lowercase but Opera & Moz do not.
// Microsoft foregoes prefixes entirely <= IE8, but appears to
// use a lowercase `ms` instead of the correct `Ms` in IE9
// More here: http://github.com/Modernizr/Modernizr/issues/issue/21
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
ns = {'svg': 'http://www.w3.org/2000/svg'},
tests = {},
inputs = {},
attrs = {},
classes = [],
featureName, // used in testing loop
// Inject element with style element and some CSS rules
injectElementWithStyles = function( rule, callback, nodes, testnames ) {
var style, ret, node,
div = document.createElement('div');
if ( parseInt(nodes, 10) ) {
// In order not to give false positives we create a node for each test
// This also allows the method to scale for unspecified uses
while ( nodes-- ) {
node = document.createElement(' ...
Zero-config JavaScript apps with RaveJS -- SVCC fall 2014John Hann
Rave eliminates configuration, machinery, and complexity. Stop configuring and tweaking file watchers, minifiers, and transpilers just to get to a runnable app. Instead, go from zero to "hello world" in 30 seconds. In the next 30 seconds, easily add capabilities and frameworks to your application simply by installing *Rave Extensions* and *Rave Starter* packages from npm and Bower, the leading JavaScript package managers. Finally, install additional *Rave Extension* packages to apply your favorite build, deploy, and testing patterns.
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/
How Google AppEngine deals with digital art? how about music? a few case studies developed by Stinkdigital with Google Creative Lab and how App Engine dealt with a considerable amount of visits
Sequelize is a promise-based Node.js ORM for Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server. It features solid transaction support, relations, eager and lazy loading, read replication and more.
Comparing Hot JavaScript Frameworks: AngularJS, Ember.js and React.js - Sprin...Matt Raible
JavaScript MVC Frameworks are all the rage these days. They’ve taken the web development world by storm. This session explores the various features of the three hottest JavaScript MVC frameworks: AngularJS, Ember.js and React.js. It also compares client-side templating vs. server-side templating and how well each framework supports Isomorphic JavaScript (code that can run both client-side and server-side). Finally, it ranks each framework on 10 different criteria using Yevgeniy Brikman’s framework scorecard.
Video on InfoQ: https://www.infoq.com/presentations/comparing-angular-ember-react
A Universal Theory of Everything, Christopher MurphyFuture Insights
Taken from the Future of Web Design, New York 2015 Conference. https://futureofwebdesign.com/nyc-2015/
Drawing on over two decades of experience designing and developing digital products, Christopher will walk you through everything he's learned along the way. He'll break apart the creative process, exploring how an understanding of that process, leads you to become a better designer. In this session, he'll explore how the best designers: firstly 'prime the brain' by ensuring it is constantly nourished with new material; then explore that material from multiple perspectives to gain a deep understanding of it; before, finally, putting those pieces back together again to create exciting new ideas that stand the test of time. In short, he'll ensure you leave the session fully creativity-hardened and never short of ideas again.
Horizon Interactive Awards, Mike Sauce & Jeff JahnFuture Insights
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
Mike Sauce, Founder and President of the Horizon Interactive Awards will present an award to the Most Awarded Developer in the 13th annual competition to DynamiX Web Design. Jeff Jahn, owner and founder of DynamiX, will discuss design trends, processes and technologies that led his company to achieve such a high honor in the Horizon Interactive Awards competition.
Reading Your Users’ Minds: Empiricism, Design, and Human Behavior, Shane F. B...Future Insights
Taken from the Future of Web Design, New York 2015 Conference. https://futureofwebdesign.com/nyc-2015/
How do you decide what your users really need? The difficult truth is that the best web design comes from finding out for yourself. Luckily for anyone passionate about improving web-based human interaction, the field of psychology can shed light on common motivations, needs, and biases that are powerful influences on human behavior. In this session, you’ll learn about how these psychological forces—such as prospect theory, metacognitive fluency, and the introspection illusion—can shed light on UX, design, and conversion.
Structuring Data from Unstructured Things. Sean LorenzFuture Insights
From FOWA Boston 2015
Structuring Data from Unstructured Things. Sean Lorenz
Data coming from Internet of Things (IoT) product sensors can be hard to manage or know what to do with. In this talk Sean will discuss ways to tame IoT data sources by organizing and pruning that information effectively. He will also discuss the importance of time series when culminating sensor, metadata and other data sources together, making it vastly easier to query or perform analytics on your newly structured data.
Taken from the Future of Web Design, New York 2015 Conference. https://futureofwebdesign.com/nyc-2015/
The process behind making a blockbuster film is similar to creating a meaningful website or app. Through the lens of cinema, we’ll walk through practical ways that UX design teams can work together to deliver an award-winning final product. Whether you’re making a low-budget indie for a non-profit or the next summer smash for a Fortune 500, we can learn a thing or two from film.
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
In the last few years, we’ve seen an emergence of a modular way of thinking about code and design. We’ve seen the rise of SMACSS, BEM, and Atomic Design. This talk will look at those modular concepts and how they can streamline development for large and long-running projects. We’ll also look at how these approaches can ease responsive design and development. Lastly, we will look at where the modular approach is going in the future as Web Components slowly make their way into browsers and application frameworks.
Designing an Enterprise CSS Framework is Hard, Stephanie RewisFuture Insights
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
It seems that not a week goes by without a shiny new framework of some type — be it CSS or JS. But no matter how awesome they are, each have shortcomings and idiosyncrasies that invariably make you ask, 'Why?' Now imagine someone gave you the ability to start from scratch to create your own framework. No strings. No preconceptions — well, except that it has to be enterprise scale, platform agnostic, and work in a whole host of disparate situations. In this session, Stephanie will talk about some of the challenges, hurdles, tradeoffs, and unique decisions Salesforce UX made on the way to building an enterprise framework.
Accessibility Is More Than What Lies In The Code, Jennison AsuncionFuture Insights
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
Many associate making a digital product accessible with the guidelines and specifications that address themselves at the code-level. In short, the developers/engineers will take care of it. While the thoughtful implementation of accessible code during the development phase is unquestionable, the truth is accessibility depends heavily on choices made by designers and others involved in determining the user experience, and typically before development begins. Join Jennison as he illustrates this by identifying some of the user interactions and design-related decisions that can pose accessibility challenges. He will also share practical advice for those seeking to scale accessibility and make it a shared responsibility.
Sunny with a Chance of Innovation: A How-To for Product Managers and Designer...Future Insights
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
Growth stage companies need to continue to be as innovative as they were as smaller startups - but how do you actually do it? How can product leaders and designers de-risk valuable new ideas and get the support required to actually execute? From the perspective of a product owner and a designer respectively, Audrey and Alexa will walk through how they ran an innovation team on a recent project. They'll discuss how they rallied a broader group of stakeholders around big and risky ideas, testing the limits of experimentation, and turning small-scale experimental code into real life features. Thinking big and executing in layers is the future of innovation. You will walk away with some easy methods to start launching experiments at your company, regardless of whether you come from a three-person startup or a huge corporation.
Taken from the Future of Web Design, New York 2015 Conference. https://futureofwebdesign.com/nyc-2015/
The future must be universally approachable. In this talk, Andrew looks at designing for dyslexic users. Learn how to create designs that are more universal; designs that not only better fit dyslexics, but are a better fit for everyone regardless of race, religion, national origin, language or ability.
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
Site analytics. The quantified self. Big data. Human activity is creating more and more measurable data. But is more data really helping designers make better decisions? Human problems often require illogical approaches. In order to meet real human needs, we need to approach the data we collect with empathy and find the story in the facts.
Taken from the Future of Web Design, San Francisco 2015 Conference. https://futureofwebdesign.com/san-francisco-2015/
We need to create processes that get us away from nice looking design files to actually shipping our projects into the real world.
FOWA London 2015
In recent years there have been incredible advances in artificial intelligence and deep learning. As a result, powerful technology which used to be rare and expensive has very quickly become easily available and cheap. This will have both positive and negative consequences for web developers. In this talk I will look at how AI will change the development field, and provide techniques that will help designers and developers to work with AI to improve their skills and make better sites and applications for end users.
Digital Manuscripts Toolkit, using IIIF and JavaScript. Monica Messaggi KayaFuture Insights
FOWA London 2015
Monica is part of the DMT project at the Bodleian Libraries (University of Oxford) that aims to create a toolkit using IIIF standard (http://iiif.io) for images, a server solution (to store images of manuscripts and metadata), and a client solution using JavaScript to build an authoring tool that allows editing the manuscript manifest and its metadata. Working specifically on the authoring tool, and on the challenges that different types of manifests presents for the developer. You will have a glimpse of the whole picture and then she taps into the libraries used, choices made, collaboration experiences and lessons learned so far.
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
Bridging the Digital Gap Brad Spiegel Macon, GA Initiative.pptxBrad Spiegel Macon GA
Brad Spiegel Macon GA’s journey exemplifies the profound impact that one individual can have on their community. Through his unwavering dedication to digital inclusion, he’s not only bridging the gap in Macon but also setting an example for others to follow.
2.Cellular Networks_The final stage of connectivity is achieved by segmenting...JeyaPerumal1
A cellular network, frequently referred to as a mobile network, is a type of communication system that enables wireless communication between mobile devices. The final stage of connectivity is achieved by segmenting the comprehensive service area into several compact zones, each called a cell.
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
1. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 1/38
Creating Applications with WebGL and Three.js
+James Williams @ecspike
2. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 2/38
About Me
Author of Learning HTML5 Game Programming
Writing a new book on Three.js
3. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 3/38
Learning HTML5 Game Programming
4. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 4/38
Agenda
What is WebGL/Three.js?
Creating Meshes
Lighting and Shading
Working with Physics Engines
Demos
5. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 5/38
What is WebGL?
Low-level 3D graphics context
Uses canvas tag
Hardware-accelerated
Syntax based on OpenGL ES 2.0
6. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 6/38
Why aren't we using raw WebGL?
Higher barrier to entry
Lots of code
Requires directly managing data structures
7. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 7/38
What is Three.js?
3D scenegraph library
Abstracts the nastiness away from WebGL
Renders to Canvas 2D, WebGL, SVG
Can animate HTML elements using CSS3
Can import models from popular 3D modeling apps
8. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 8/38
Creating a basic app
Scene
Camera
Renderer
Lighting (optional)
9. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 9/38
Camera
Eye Point
Field of Vision
Near/Far Planes
Target (LookAt) Point
Up Vector
camera = new THREE.PerspectiveCamera(FOV, ASPECT, NEAR, FAR, [target]);
10. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 10/38
A Basic Scene
@renderer = new THREE.WebGLRenderer({autoClear:true})
@renderer.setClearColor(new THREE.Color(0x000000))
@renderer.setSize(width, height)
@camera = new THREE.PerspectiveCamera(fov, aspect, near, far)
@camera.position.z = 100
@scene = new THREE.Scene()
$('#container').empty()
$("#container").get(0).appendChild(@renderer.domElement)
@scene.add(@camera)
# truncated
@renderer.render(@scene, @camera)
11. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 11/38
Creating Meshes
new THREE.Mesh(new CubeGeometry(100,1,100),
new THREE.MeshBasicMaterial({color: 0xFF0000}))
Built-in Geometries
SphereGeometry
PlaneGeometry
CylinderGeometry
CubeGeometry
TextGeometry
and several others
12. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 12/38
Materials
# Basic Material
new THREE.MeshBasicMaterial({color: 0xFFFFFF})
# Per-vertex coloring
f = triGeometry.faces[0]
f.vertexColors[0] = vColors[0]
f.vertexColors[1] = vColors[1]
f.vertexColors[2] = vColors[2]
triMaterial = new THREE.MeshBasicMaterial(
{color: 0xFFFFFF, vertexColors:THREE.VertexColors}
)
# Phong, Lambert, Face, Line, etc
13. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 13/38
Demo
14. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 14/38
Loading Models
Blender
Collada
OBJ
MAX
Maya
15. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 15/38
Loading A Model
@models = {}
loader = new THREE.JSONLoader()
loader.load('/models/hero.js', @heroCallback)
heroCallback: (g, m) ->
obj = new THREE.Mesh(g, new THREE.MeshFaceMaterial(m))
obj.rotation.x = -1.57
obj.position.y = 100
obj.scale.set(6,6,6)
app.hero = obj
app.scene.add(app.hero)
16. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 16/38
Loading A Scene
loader = new THREE.SceneLoader()
loader.callbackProgress = @callbackProgress
loader.load( "scripts/scenes/falling-ball.js", self.callbackFinished)
# Receives updates from loader
callbackProgress: (progress, result) ->
console.log result
console.log progress
# Called when finished loading
callbackFinished: (result) ->
app.scene = result.scene
app.camera = result.cameras.Camera
app.camera.lookAt(new THREE.Vector3(0,0,0))
17. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 17/38
Three.js Editor
Create primitive objects
Add materials
Export objects or scenes
http://threejs.org/editor
18. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 18/38
Demo
19. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 19/38
What is GLSL?
Targets the GPU and graphics pipeline
High level language with C-like syntax
Passed around as strings
Can be generated and compiled at run-time
Referred to as programs (the combination of a vertex and fragment shader)
20. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 20/38
Vertex Shaders
Run once per vertex in a mesh
Can alter color, position, or texture coordinates
21. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 21/38
Example vertex shader
<script id="shader-vs" type="x-shader/x-vertex">
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,
1.0);
}
</script>
22. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 22/38
Frament(Pixel) Shaders
Run on every pixel in a mesh
Can produce effects such as bump mapping and shadowing
Only knows* about the pixel it is working on
23. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 23/38
Example fragment shader
<script id="shader-vs" type="x-shader/x-vertex">
#ifdef GL_ES
precision highp float;
#endif
void main(void) {
gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
}
</script>
25. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 25/38
Shader Toy
Website enabling you to play around with GLSL shaders
http://www.iquilezles.org/apps/shadertoy/
26. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 26/38
Demo
27. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 27/38
Collision Detection
Bounding Box
Bounding Sphere
Rays
28. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 28/38
Physics using Physijs
Integrates deeply with Three.js
Built upon ammo.js
https://github.com/chandlerprall/Physijs
29. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 29/38
Sample Physijs Scene
# setup Physi
Physijs.scripts.worker = 'scripts/vendor/physijs/physijs_worker.js'
Physijs.scripts.ammo = 'ammo.js'
@scene = new Physijs.Scene()
@scene.setGravity new THREE.Vector3( 0, -30, 0 )
obj = new Physijs.Mesh(rawMesh.geometry, material, mass)
render: () ->
@scene.simulate()
@renderer.render(@scene, @camera)
30. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 30/38
Demo
31. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 31/38
Creating A Simple Game
32. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 32/38
My First Computer
33. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 33/38
My First Computer Game
34. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 34/38
Demos
35. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 35/38
WebGL Inspector
Allows you to incrementally step through rendering
View texture assets and GLSL programs
Permits capturing individual frames
Can be embedded or installed as a Chrome/Webkit extension
Github: http://benvanik.github.com/WebGL-Inspector/
36. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 36/38
Questions ?
37. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 37/38
Links and Sources
Adam II photo: http://www.digibarn.com/collections/systems/coleco-
adam/CIMG3282.JPG
Buck Rogers photo: http://telebunny.net/toastyblog/wp-
content/uploads/2012/08/gsj12-buckrogers2.gif
38. 6/17/2014 Getting started with WebGL and Three.js
file:///Users/james/Downloads/3js-2013/index.html#1 38/38