background preloader

Learning WebGL

Learning WebGL
A year ago, at a biggest-ever, record-breaking HTML5 Meetup in San Francisco all about WebGL, I predicted we were a tipping point; I think I was right. Let’s take a look at 2014, a banner year for 3D on the web! A Year of Great Content John Cale and Liam Young’s City of Drones brought together experiments in music and architecture; Isaac Cohen continued to blow minds with visualizations like Weird Kids and Webby; Google’s A Spacecraft for All chronicled the 36-year journey of the ISEE-3 space probe; and SKAZKA showed us an alternate world created by The Mill and powered by Goo. A Year of Killer Apps In 2014, WebGL made its mark– an indelible impression– on advertising, e-commerce, music, news and engineering. A Year of Pro Tools Goo, Verold, Turbulenz and PlayCanvas all made great strides with their WebGL engines and development environments. A Year of Gaming WebGL is definitely up to the challenge of creating high-quality MMOs. A Year of Virtual Reality A Year of Ubiquity

An introduction to WebGL By Luz Caballero Introduction This is the first in our series of articles about WebGL. The objective of this series is to provide the information and resources you'll need to get started learning WebGL. In this piece, we will discuss how WebGL works, what you need to create WebGL applications, and what a simple example looks like.

50 Javascript Tools & Resources from 2013 Just as we focused on CSS a few days back, today we take a look at 50 of our favorite Javascript tools and resources from 2013. You will notice that this article does not include any jQuery resources as we have already published a dedicated jQuery round-up post last week, you can check that out here.But if you are looking for a standalone Javascript framework or library, then this is the place for you! So, here we go, our 50 favorite Javascript tools and resources from 2013:

WebGL Path Tracing Path tracing is a realistic lighting algorithm that simulates light bouncing around a scene. This path tracer uses WebGL for realtime performance and supports diffuse, mirrored, and glossy surfaces. The path tracer is continually rendering, so the scene will start off grainy and become smoother over time. Here's how to interact with it: Add an object using the "Add Sphere" or "Add Cube" buttons Select an object by clicking on it Move the selection along the face of its selection box by dragging around on that face Delete the selection using the backspace key Rotate the camera by dragging the background Material: with glossiness factor: 0 < < 1 Environment:

50 Most Useful jQuery Plugins from 2013 Today, just as we have published each of the past three years, we have the 2013 edition of our top 50 jQuery plugins that we feel are the most useful and most innovative from this year. 2013 has been quite possibly the best year ever! All of the time-saving plugins below will in one way or another deliver a specific solution to many of the design and development issues you may have. And just to help you find exactly what you are looking for we have split the plugins into the following categories: Layouts, Navigation, Social & Sharing, Sliders & Carousels, Image Management, Forms, Typography & Text, and finally a selection of plugins that don’t quite fit into a particular category but are useful enough to stand alone.

WebGL Cheat Sheet Buffers Object createBuffer void void deleteBuffer Object buffer void bindBuffer ulong target, Object buffer void bufferData ulong target, Object dta, ulong usage void bufferData ulong target, long size, ulong usage void bufferSubData ulong target, ulong offset, Object data any getBufferParameter ulong target, ulong value bool isBuffer Object buffer any getParameter ulong pname Renderbuffers Object createRenderbuffer void void deleteRenderbuffer Object buffer void bindRenderbuffer ulong target, Object buffer any getRenderbufferParameter ulong target, ulong pname void renderbufferStorage ulong target, ulong format, ulong width, ulong height bool isRenderbuffer Object buffer any getParameter ulong pname

Ajax – Six Revisions 20 Excellent Websites for Learning Ajax Ajax (asynchronous JavaScript and XML) is a technology that allows for for highly-interactive and responsive browser-based applications. By leveraging the XMLHttpRequest object, seamless communication with the server can be achieved for a smooth and dynamic user experience. If you’ve ever wanted to learn about Ajax, there are many sites out there that’ll help you "grok" Ajax and the various technologies surrounding it. Here are 20 top-notch websites that cover the subject of Ajax. Introduction to Three.js Ilmari Heikkinen Who am I? Ilmari Heikkinen @ilmarihei | | Google Chrome Developer Programs Engineer I write demos, do presentations, write articles

WebGL: Frequently Asked Questions - The WebGL Cookbook This is a list of frequently-asked questions about WebGL. It is not a tutorial -- if that's what you want, you can check out the Learning WebGL lessons. It's also not a set of WebGL how-to "recipes" -- take a look at the Main Page of this Wiki to see some of them. What is WebGL? WebGL is a low-level JavaScript API giving you access to the power of a computer's graphics hardware from within scripts on web pages. It makes it possible to create 3D graphics that update in realtime, running in the browser.