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

CopperLicht - JavaScript 3D Engine using WebGL Commercial grade WebGL 3D engine with editor CopperLicht is a WebGL library and JavaScript 3D engine for creating games and 3d applications in the webbrowser. It uses the WebGL canvas supported by modern browsers and is able to render hardware accelerated 3d graphics without any plugins. 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

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.

Tutorial - WebGL Public Wiki Introduction: Creating a Spinning Box This example creates the spinning textured box shown below. It uses several JavaScript utilities for common WebGL tasks: webgl-utils3d.js which contains some basic WebGL helpers, J3DI.js which contains general utilities, and J3DIMath.js, which provides matrix functions.

Tutorials - Phong Lighting with GLSL - OpenGL Shading Language - Point Light - Spot Light - Attenuation Spot light radiates its rays in a cone. Shaders codes are the same as for point light but in the pixel shader there is a little change. We add a test in order to check whether or not the light ray direction is located in the cone. To perform this test, we're going to use two GLSL variables: gl_LightSource[0].spotDirection and gl_LightSource[0].spotCosCutoff. Fig.2 - Spot Light Configuration. In order to know if the ray of light is located in cone of the light, we're going to compare the angles a and b. WebGL - OpenGL ES 2.0 for the Web The Khronos Group - Connecting Software to Silicon The Khronos Group is a not for profit industry consortium creating open standards for the authoring and acceleration of parallel computing, graphics, dynamic media, computer vision and sensor processing on a wide variety of platforms and devices. All Khronos members are able to contribute to the development of Khronos API specifications, are empowered to vote at various stages before public deployment, and are able to accelerate the delivery of their cutting-edge 3D platforms and applications through early access to specification drafts and conformance tests. OpenGL - The Industry Standard for High Performance Graphics OpenGL® is the most widely adopted 2D and 3D graphics API in the industry, bringing thousands of applications to a wide variety of computer platforms. It is window-system and operating-system independent as well as network-transparent.

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 Essentials: Part I WebGL is an in-browser 3D renderer based on OpenGL, which lets you display your 3D content directly into an HTML5 page. In this tutorial I will cover all the essentials you need to get started using this framework. Introduction There are a couple things you should know before we get started. WebGL is a JavaScript API that renders 3D content to an HTML5 canvas. It does this by using two scripts that are known in the "3D world" as Shaders.

Related:  Javascript