A dash of speed, 3D and apps
Thursday, February 3, 2011, Today, we’re excited to bring several new features from Chrome’s beta channel to the stable build, including WebGL, Chrome Instant, and the Chrome Web Store.
WebGL is a new technology which brings hardware-accelerated 3D graphics to the browser. With WebGL in Chrome, you can experience rich 3D experiences right inside the browser with no need for additional software. Curious about the three-dimensional possibilities? Try out these demos to experience the power of WebGL in the latest stable version of Chrome.
With Chrome Instant (à la Google Instant), web pages that you frequently visit will begin loading as soon as you start typing the URL. (“Look, Mom – no enter key!”). If supported by your default search engine, search results appear instantly as you type queries in the omnibox. To try out Instant, you’ll need to enable it in the Basics tab of Chrome’s options.
Lastly, the Chrome Web Store is now open to all Chrome users in the United States. As part of this, we’ve now added a link to the Chrome Web Store on the New Tab page, along with two sample apps. (If you don’t use these sample apps, they will automatically disappear after some time).
Some of the newest additions in the Chrome Web Store include BBC GoodFood, Autodesk,Sesame Street, nine King.com Games and Marvel Comics. There are also many apps that take advantage of the latest web technologies to deliver an immersive experience, such as Tweetdeckand The New York Times. While the store is currently only available for Chrome users in the U.S., we’re working hard to expand availability to users around the world soon, so stay tuned!
3D Github badge with pure CSS3
From Hagenburger
You may have noticed my “Fork me on Github!” badge in the upper left corner. Are you using Safari? Great. Try to hover over it with your mouse. The badge will turn around and switch to its backside. For Chrome and Firefox 4.0 users, there’s a fading between both sides. All other browsers will see just a switch without any transition.
The HTML code
<a id="github" href="https://github.com/hagenburger"> <span>Fork me on GitHub!</span> <span>Get free lemonade!</span> </a>
The first span will be visible, the second on is the backside. Btw don’t forget to use https: to avoid a slow redirect, as Github is using SSL protection by default since November 2010.
Sass/SCSS/Compass/CSS3 implementation for modern Browsers
@import"compass"; #github { left: -65px; height: 30px; top: 40px; position: absolute; text-decoration: none; width: 250px; @include rotate(-45deg); span { background: black; color: white; font-size: 14px; left: 0; padding: 5px 0; position: absolute; text-align: center; width: 250px; @include box-shadow(rgba(black, 0.2) 1px 1px 10px); // If you’re using Compass < 0.11 use this: // @include box-shadow(rgba(black, 0.2), 1px, 1px, 10px); @include transition(opacity, 1s); &:last-child { /* this is the backside */ background: red; opacity: 0; } } :hover span { &:first-child { opacity: 0; } &:last-child { opacity: 1; } } }
3d implementation for Safari and future Chrome versions
By this @media rule the following code will be ignored unless 3d is activated in the browser (Safari in a virtual machine may have it turned off).
How to Create an HTML5 3D Engine
From Sixrevisons
You’re probably aware by now that HTML5 is game-changing. In particular, with the HTML5 canvas, there’s been an outpouring of HTML5 3D JavaScript engines such as three.js released to enhance the rudimentary 2D HTML5 API. After all, 3D graphics is a lot cooler than 2D graphics, right?
It’s probably fair to say that if you were to create a full-blown 3D engine–complete with three dimensional matrix transformations, point objects, plane objects, shading, ray tracing, and other spatial computations–it would be quite difficult.
But what if we wanted to create an optimized, barebones 3D JavaScript engine that supports translations and rotations? How hard would it be?
What if I tell you that we can create our own simple 3D JavaScript engine with just 40 lines of code?
This guide will provide a simple and straightforward JavaScript engine that enables HTML5 3D renderings that can be used in web animation, games, and so forth.
Understanding 3D Projections
Before creating our own 3D engine, we should first understand how the illusion of 3D space is created on a 2D screen. These illusions are called 3D projections. 3D projections map points onto a two-dimensional plane. In our case, the three-dimensional points define an object we wish to render, and the two-dimensional plane is the computer screen.
As you can see in the following image, we can create a three-dimensional projection of a cube on a two-dimensional plane by drawing three irregular quadrilaterals – the top, left, and front quadrilaterals.
Read more …
Good HTML 3D 2010 A Space Odyssey
It is a 3D engine under 10K used to create a simulation where you can fly a spacecraft. I only noticed this contest very late, thats why this app was code in 1 and a half day.
[ARROW KEYS] = change direction
[SPACEBAR] = accelerate
I hope you like my work, it was a bit rushed and submited approximately 1 hour before the deadline of the competiton, and it happened to be ready by then. It was really tricky to compress the 3d model data in a way that doesnt distort the model, when it is rendered, too much. Cheers phpboxxx
3D landscape on HTML5 Canvas
From Seb Lee-Delisle
You may have noticed that I’ve been playing with some technologies other than Flash recently, and you know what, I’ve been really enjoying it!
So, just for fun, I thought I’d see if I could make a very simple 3D engine using the HTML5 canvas drawing API. I took code from the 3D lunar lander and hacked it around until it worked in Javascript.
Sadly I didn’t have time to get a Perlin noise function working fast enough but I reckon I could add that later into a pre-calculated array.
Performance seems OK in Safari and Chrome, not so good in Firefox, and of course, non-existent in Explorer.
Although I used to use Javascript extensively (before Flash was any good ) it’s been quite a few years since I touched it, so if you have any performance related tips, I’d appreciate it. In particular, I’d like to know how to draw non anti-aliased lines to improve performance. Setting the line weight to 0 seems to work for Safari but not for Firefox. (Ah how I miss cross browser compatibility issues!)
I should thank F1LT3R, although I didn’t use any of his code in the end, it was a massive inspiration to see that you could render 3D into an HTML5 canvas object.
Simple 3D on HTML5 canvas
From Seb Lee-Delisle
Yesterday I met Renaun Erickson from Adobe, who told me that he took my basic 3D engine, compiled it with the Flash CS5 beta into an iPhone app, and demoed it the very next day at the 360 Flex conference at Adobe!
It gave me a few ideas about how to optimise it so perhaps I’ll try that soon. But first, I wanted to see whether I could port it to javascript and HTML5 canvas. It turns out that I could, but this time it’s more like 11 lines.(I know it’s not 11 lines, OK? And perhaps it’d be more apt to call it a 3D lawnmower engine)
var scale = fov/(fov+z3d); var x2d = (x3d * scale) + HALF_WIDTH; var y2d = (y3d * scale) + HALF_HEIGHT;
By now you’ll recognise this code to convert the 3D x y and z position into 2D x and y, the difference here is that I’m offsetting the coordinate system so that it’s in the middle, which puts the vanishing point in the centre of the screen. (In the Flash version, I just moved the whole container for the particles into the middle.)
particles.sort(compareZPos); function compareZPos(a, b) { return (b.pos.z-a.pos.z) }
This is the bit that sorts the array relative to the z position of each particle, so that when we then go through and draw them all, it starts from the back to the front.
And here’s the bit that draws the image onto the canvas :
c.drawImage(img,x2d-scale, y2d-scale, scale*2, scale*2);
I’m thinking about making all of this stuff into a slightly better explained tutorial, is this something you’d be interested in? In the meantime, check it out and let me know what you think. In particular I’d like to hear from any javascript experts with any optimisation tips.
Or So They Say using the HTML5 canvas
Take an impressive journey through our universe using the HTML5 canvas element thanks to Mr Doob. Starting with a big bang, watch as we journey through galaxies until we find our own habitable rock, the Earth.
It starts with a big bang, Comments from the Author:
Now that three.js was starting to get stable and also thanks to some sequencing code I had done some months ago I had no excuses to get working on it. So, from Friday midnight until Saturday afternoon, I managed to get this.
Your best option for viewing this demo is using Chrome on Windows. Enjoy!
“Or so they say…” by xplsv
fastmade javascript demo
3D Space Craft experiment in the HTML5 canvas
Tsujimoto has created this 3D Space Craft experiment in the HTML5 canvas element.
HTML5 CANVAS DEMO, Flying through the air, Best viewed in Chrome.
The new HTML5 CANVAS element is the JavaScript function to draw an image. So far only handle two-dimensional still images (in the future will be able to use three-dimensional), but do it repeatedly drawn to calculate the coordinates of sorts, drawing looks like a reasonably solid It is possible. So I did.
Frankly, 3D scripting language that requires much computation work like the opposite Temasen. Already so heavy with more than 1000 polygons. What I think of as useless like this, in the first place you’d really only realized 3D gaming as I do use the widget. VRML is not popular because most of it took more than 10 years. Just because it was just a bit advanced, would not that just increase the explosive demand for it. But now studying.
I had never caught on 3DCG. I was not so with the appropriate modeling tools. At first I thought it would be good or something Kasere a simple dice Mimashita to calculate the coordinates in a text paper and pencil and calculator. Something like this to draw lines of adding it gradually getting hooked. Now I hate myself anymore.
Did not know the basic 3D. Why do not you moved to run an ad hoc basis and assembled What should I do about it this way. If I’m doing well for such a plane would be just one more axis. Mon but I was surprisingly able to easily.
This demo does not support the way the CANVAS element FlashCanvas Internet Explorer also has to be able to use the library to view it. Now do it is truly unreasonable, if the display is practical and simple enough. If you use charts and galleries and the user interface much, even today use the CANVAS. That’s okay.
3D Model Viewer uses a combination of JavaScript and canvas
3D Model Viewer by Giuseppe Sicari uses a combination of JavaScript and canvas to display models of three-dimensional objects which are represented by a list of vertices and a set of faces each of which consists of at least three vertices.
The viewer allows you to rotate the object; fill the object with a colour; set transparency and add a motion blur effect.
Day and night that contains 3D Earth model
Peter Nederlof has created this highly detailed model of a 3D rotating Earth complete with cloud eco system.
A Canvas view of the World. Comments from the Author:
This demo shows the earth, using a collada file for the mesh and texture map, and a custom animated texture.
