background preloader

WebGL playground [beta]

Related:  HTML5 & WebGLwebGLWebGL

WebGL Water Loading... Made by Evan Wallace This demo requires a decent graphics card and up-to-date drivers. Interactions: Draw on the water to make ripples Drag the background to rotate the camera Press SPACEBAR to pause and unpause Drag the sphere to move it around Press the L key to set the light direction Press the G key to toggle gravity Features: Raytraced reflections and refractions Analytic ambient occlusion Heightfield water simulation * Soft shadows Caustics (see this for details) ** * requires the OES_texture_float extension** requires the OES_standard_derivatives extension Tile texture from zooboing on Flickr

X3D X3D should not be confused with 3DXML, which is a proprietary 3D file format. X3D is a royalty-free ISO standard XML-based file format for representing 3D computer graphics. It is successor to the Virtual Reality Modeling Language (VRML).[1] X3D features extensions to VRML (e.g. CAD, Geospatial, Humanoid animation, NURBS etc.), the ability to encode the scene using an XML syntax as well as the Open Inventor-like syntax of VRML97, or binary formatting, and enhanced application programming interfaces (APIs). X3D extension supports multi-stage and multi-texture render, it also supports shader with lightmap and normalmap. In 2010 X3D supports deferred rendering architecture. X3D can work with other open source standards like XML, DOM and XPath. Standardization X3D defines several profiles (sets of components) for various levels of capability including X3D Core, X3D Interchange, X3D Interactive, X3D CADInterchange, X3D Immersive, and X3D Full. Applications Example Alternatives See also References

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

HTML5 Please - Use the new and shiny responsibly Get started with WebGL Use WebGL to create incredibly fast graphics. WebGL basics Using the WebGL API you can create high performance 2D and 3D graphics by directly programming and controlling the computer's graphics processing unit (GPU). WebGL renders on a canvas element as a drawing context much like the 2D context, but provides very low-level access to your computer's GPU. WebGL is a little different than traditional web programming, as you're using two languages to write every app. The example we're using doesn't contain any WebGL libraries. The Warp example The example we dig into is called Warp. Warp introduces you to: Basic WebGL setup in an app.How to create an array of vector points representing triangles and lines, and applying a color or a photo to the surface.How to use mouse events and a little trigonometry to achieve a cool effect when stretching or squeezing the photo. WebGL describes shapes by arrays of vertices or coordinates that represent the object broken down into a set of triangles. Up next

X3DOM Examples 40 Beautiful Free HTML5 & CSS3 Templates Dec 01 2011 Over the last few years there has been great collections of quality free HTML & CSS templates published on Noupe such as 50 Free High-Quality and “New” (X)HTML/CSS Templates (2009) and 40+ Elegant Free CSS/(X)HTML Templates (2010). There have been some great free templates released over the last year so we thought it would be appropriate to share some of these great new designs with you all. The Templates 1. A minimal looking grey and pink design that comes packaged with an Ajax powered PHP contact form. Info & Download | Demo A beautiful clean two column design that would be perfect for a blog. Info & Download 3. A grunge styled website that is suitable for a portfolio or a blog. Info & Download | Demo 4. A great looking clean blog template that has been also ported to WordPress. Info & Download | Demo 5. A clean HTML5 powered template that could be used for a portfolio or blog. Info & Download | Demo 6. Info & Download | Demo 7. Info & Download 8. Info & Download | Demo 9. 10. 11. 12.

Tutorials about webgl WebGL With Three.js – Lesson 6 Today we continue our webgl lessons for those who study it and who wants to enhance his knowledge. In today’s lesson we will look at the load process of ready three-dimensional objects. There are many websites where you can download these models, and moreover, if you have an editor of three-dimensional objects (like 3D Max, Maya, or even Blender), you can create your own models. There are also many file formats of three-dimensional objects, such as obj, collada (dae), obj, mtl, stl, vrml and so on. Most of them can be loaded into your three.js scenes using special loaders. WebGL With Three.js – Lesson 5 Today we continue our webgl lessons for those who study this language, and today we will show you how to create a beautiful environment (sky box) for your scenes in three different ways: cubic skybox (with 6 textures for all sides), spherical skybox (with single surrounding texture) and spherical shader skybox (without textures). What is WebGL?

Programming 3D Applications with HTML5 and WebGL In its roughly twenty years of existence, 3D on the web has taken a tortuous journey. In 1994 it was a Next Big Thing called VRML that grabbed industry attention, only to ultimately become a bastard stepchild of mainstream web development during the first Internet boom. Around 2000, a new Next Big Thing called Shockwave 3D promised to democratize game development; by 2004, that offspring was also shipped off to the orphanage. Good ideas may take a long time, but they never truly die. 3D on the web is one such idea. This book is intended to provide you with the information you need to create production-quality 3D applications for desktop and mobile browsers using 3D technologies available in modern browsers: WebGL, Canvas, and CSS. You are holding in your hands the Early Release of my new book. Readers of my first book, WebGL: Up and Running, will see a fair amount of overlap between that book and the early chapters of this one. How This Book Is Organized Conventions Used in This Book

Echo Test Echo Test The first section of this page will let you do an HTML5 WebSocket test against the echo server. The second section walks you through creating a WebSocket application yourself. You can also inspect WebSocket messages using your browser. Try it out! This browser supports WebSocket. Does your browsersupport WebSocket? Firefox 17 Linux Uh-oh, the browser you're using doesn't have native support for WebSocket. The following link lists the browsers that support WebSocket: Location:Use secure WebSocket (TLS) Message: Instructions Press the Connect button. Creating your own test Using a text editor, copy the following code and save it as websocket.html somewhere on your hard drive.