Since our previous post, we've made good progress on 2D graphics performance: 2D canvas acceleration is now available in trunk and the canary build by using the --enable-accelerated-2d-canvas command-line switch (coming to the developer channel shortly). We’ve also been hard at work improving our 3D graphics stack. Today, we’re excited to release a set of WebGL demos to help highlight what you can do with the API.

Chromium’s 2D canvas acceleration uses the same GPU process infrastructure as the compositor, which is designed to maintain the same stability and security Chromium has always had. In addition, this system picks the best graphics API to use on each OS that Chromium supports: Windows XP/Vista/7, Mac OS and Linux. We haven’t finished implementing accelerated 2D canvas support – there’s no Mac support and some functions are not accelerated yet – but Chromium already achieves some impressive gains on the recent IE9 Platform Preview Test Drive 2D canvas demos:

These early numbers show up to 60x speed improvement over the current version of Google Chrome. With Google Chrome’s fast release cycles, we expect to be able to get these enhancements to users quickly and add new performance improvements over time.

We’re excited to give developers fast 2D graphics, but we think truly hardware accelerating graphics on the web means giving developers access to a programmable 3D graphics pipeline with WebGL. Even with accelerated 2D canvas and SVG, it’s still not possible to achieve many graphics effects with these APIs. (To read more about the progression from dynamic 2D to CSS Transforms and WebGL, check out our recent blog post). With WebGL and 3D CSS, developers can create modern games, impressive photo galleries, 3D data visualizations, virtual environments, and whatever else they can dream up.

To give you a taste for what WebGL can do, we’ve worked with a number of talented artists and developers to create the first round of a series of demos, ranging from a realistic aquarium to a 3D wall of photos. We hope these demos help demonstrate even more immersive experiences made possible with these APIs. So check out our demo gallery with an up-to-date canary build or Chromium build and have some fun with using your GPU in the browser! For a quick peek at some of these demos, you can watch our playlist of preview videos:

Demo Preview: Collectibles Painter by Human Engines
Technology: JavaScript, WebGL, 2D Canvas Link: webglsamples.googlecode.com What is it? Collectibles Painter is a WebGL based collectible figure designer that allows you to create your own personal toy collectible with paint, decals, and materials then share your favorite creation with your friends. Choose from 10 different skin tones, faces, hair styles, clothing tops, clothing bottoms, and stickers. Graphics effects include: Environment-based lighting, a single-pass shader effects, soft shadows using PCF filtering and texture based projection for stickers.

From: googlechrome
Views: 1

Demo Preview: Field by Gregg Tavares
Technology: JavaScript, WebGL Link: webglsamples.googlecode.com What is it? Watch the wind sweep across 1000s of blades of grass on rolling hills. This demo uses pixel shaders to create a realistic wind and depth-of-field effects across many procedurally drawn patches of grass. Use the control panel on the left to set the amount of grass and press the asterisk to adjust advanced controls like depth-of-field and sway parameters.

From: googlechrome
Views: 1

Demo Preview: Wall of Photos by Cooliris
Technology: JavaScript, WebGL, Google Image Search API Link: cooliris-wall.appspot.com What is it? By leveraging WebGL, Cooliris has brought its immersive 3D image browsing experience to HTML5. Cooliris also took advantage of the pixel shaders available in WebGL to add per pixel, glossy highlights as users scroll through images. Enter a search query to view Google Images results in the revolutionary interface. Navigate left and right by using your mouse to navigate horizontally along the wall. If you have a track pad on Mac, be sure to check out two-finger scrolling. Simply click on an item to view it in a beautiful, high-resolution display.

From: googlechrome

Demo Preview: Aquarium by Human Engines and Gregg Tavares
Technology: JavaScript, WebGL Link: webglsamples.googlecode.com What is it? Immerse yourself in a beautiful aquarium full of fish, sharks and coral. This demo features 3D models with high-quality textures, scene animation, pixel shader animation, reflections, refraction and caustics. Use the control panel on the left to set the number of fish and change camera views.

From: googlechrome
Views: 1

I've received almost 4,000 emails from Twitter, and I only know that because Graph Your Inbox told me so. Graph Your Inbox is a Google Chrome extension that reveals the stats about your Gmail account in graph form, based on any search you want, without even asking for your username and password.

Just fire up this Chrome extension, enter some search terms (boolean searches and Gmail advanced searches work, too), and away you go. Figuring out how many Twitter followers or Facebook emails you've received over time is just one possibility. You could search for a friend's email address and get an instant graph of your relationship (your email relationship, anyway), or you could see if you've been getting more emails from work lately.

Graph Your Inbox is a powerful tool that gives you a new way of looking at your Gmail account, and it's a lot of fun. It's a bummer that it only works with Chrome right now, though.

Chrome: If you'd prefer to keep both hands on the keyboard as much as possible, Google Search Result Navigation enables shortcut-based navigation within your Google search results using a simple combination of CTRL + the arrow keys. More »

Chrome: Graph Your Inbox is a fascinating Chrome extension that takes Gmail search queries and returns a graph displaying email frequency over time. It may not sound sexy, but it can expose all sorts of interesting things about your communication. More »

It's not quite the same as the results-as-you-type-every-letter Google Instant, but Chrome's Dev channel and Canary builds offer a switch that turns on a kind of instant search for Chrome's Omnibar, which you may find really helpful or kind of distracting. More »

With all the talk about Google‘s new “instant search” functionality it was only a matter of time until it was made available in the Chrome browser. Recent versions of the developer version of Google Chrome, and the Chrome Canary builds, are already compatible with Google Instant Search.

And with compatible we do not mean that users can open a Google Search page and search there. No, the instant search functionality has been integrated into the browser’s omnibar.

It is however not activated by default, and users need to start Chrome with the parameter --enable-match-preview to enable Instant Search in the Omnibar.

Once started with the parameter, the browser will automatically display search results for characters that are entered into the address bar of the browser. The behavior is different from that on Google’s search page though, as results can be divided into two groups.

google chrome instant search

The first result group is the typical Google search result listing, the second a matching page for the search term. Entering gh for instance in the address bar will load ghacks directly, while g will load the Google homepage. This may be linked to bookmarks in the browser.

There is obviously a problem with that, especially for users who type moderately. It could mean that they accidentally open a lot of pages while typing.

The search page looks different though, as the developers have decided to add the blank tab page information on top of the search results. A click with the mouse on the page that has been loaded removes those information immediately, while pressing return loads the page again without the information on top.

The developers should consider adding configuration options to the new search option, for instance an option to increase the time it takes before search results are displayed.

Just announced on Tuesday, Google Instant has already been integrated into Google Chrome's Omnibar (though only in the Canary build for now). When I saw various people tweeting about wanting the feature integrated over the past few days I wasn't certain Instant would be a good fit. After all, the Omnibar already offers a certain amount of "instant" functionality.

Now that I've used it, I'm still not sure. As you can see in the header image, Google sometimes misinterprets the Omnibar requests. By sometimes, I mean more often than not in my own testing. When Instant integration does work, you'll see the Google results appear atop the page you're currently browsing -- check my brief video after the break to see Chrome Instant in action. This is, of course, only the very first cut and Google does like to "release early, iterate often." Once the feature has been shined up a bit, I'll certainly give it another try.

I also find it interesting that Google Instant wasn't added to the about:labs page in Chrome. In the Canary build, we're still left with side tabs as the only feature which can be activated there. Adding command line switches is easy enough on Windows, though, and since that's the only OS on which you can run Canary right now just right click your shortcut and add --enable-match-preview to your target (after chrome.exe).

After you give it a shot, share your thoughts in the comments. I don't think I'd want Instant enabled by default -- I'm quite happy with the Omnibar the way it is.

[via Google OS]

Recently, we posted about the work we’re doing to re-architect Chromium’s graphics stack and use the GPU to accelerate rendering. As we mentioned last time, this work will help ensure that developers can take full advantage of emerging graphics standards like 3D CSS and WebGL in Chromium. To get more feedback about these cool new features, we’re enabling hardware compositing along with 3D CSS transforms and WebGL on the trunk (coming soon to the dev channel). These new capabilities are major additions to the web platform, so we wanted to take the time to provide some background information and explain how these new capabilities fit into the web.

SVG and canvas: dynamic 2D

Until recently, it wasn’t possible to create any dynamic (i.e. non-image) graphics on the web without a plug-in. Starting in 2005, this began to change as browsers began to add Scalable Vector Graphics (SVG) and HTML 2D canvas element support. Both SVG and 2D canvas allow you to compose a 2D image at run time and manipulate it to achieve animation effects, but they vary greatly in their approach to specifying how you draw an image.

<?xml version="1.0"?>
"-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

d="M363.73 85.73 C359.27 86.29 355.23 86.73..."/>

*note: ellipses replace many more points

d = document.getElementById("c");
c = d.getContext("2d");
...
i = 25;
while (i--) {
c.beginPath();
...
q = (R / r - 1) * t;
// create hypotrochoid from current mouse position, and setup variables (see: http://en.wikipedia.org/wiki/Hypotrochoid)
x = (R - r) * C(t) + D * C(q) + ...
y = (R - r) * S(t) - D * S(q) + ...
if (a) {
// draw once two points are set
c.moveTo(a, b);
c.lineTo(x, y)
}
c.strokeStyle = "hsla(" + (U % 360) + ",100%,50%,0.75)";
// draw rainbow hypotrochoid
c.stroke();
...
} *note: ellipses replace code

The images above were created with SVG and canvas, but as you can see from the code, they approach graphics in a very different way: SVG allows you to provide markup that describes an image, whereas canvas allows you to describe a set of sequential steps that draw an image in JavaScript. These approaches mean that a developer changes an image that’s already been drawn, such as when animating an image, in different ways. Because the browser keeps a full representation of an SVG image, changing just a parameter in the image is enough to cause the browser to redraw the image correctly. With canvas, on the other hand, the developer must clear the image and specify all the steps to draw it again with the desired changes.

Today, modern browsers, including Firefox, Safari, Opera and Google Chrome support creating 2D graphics with these technologies, and Internet Explorer is adding support for them in the upcoming version 9 release.

CSS Transforms: easy to use 2D and 3D effects

Even today, people primarily use apps that don’t strictly require advanced graphics, but eye candy like 3D transforms, transitions and reflections still help improve the experience of everyday tasks. While canvas could be used to create many of these effects, it can’t render them efficiently, and it would be hard to integrate with the other content on the page.

CSS transforms and animations, which first appeared in WebKit in 2007, allow developers to achieve commonly used effects easily by specifying parameters in CSS that are applied to content in the DOM. In 2009, WebKit began adding 3D CSS transforms and effects, which takes flat content on the page and makes it appear as if it were in 3D space.

/* CUBE */
#transitions #cube {
-webkit-transform-style: preserve-3d;
width: 600px;
height: 400px;
position: absolute;
}
#transitions #cube.active {
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-name: cubedemo;
-webkit-transform: rotateX(-90deg);
}
#transitions #cube .face {
position: absolute;
width: 600px;
height: 400px;
display: block;
overflow: hidden;
}
#transitions #cube .front {
-webkit-transform: scale3d(.835,.835,.835) translateZ(200px);
}
#transitions #cube .back {
-webkit-transform: scale3d(.835,.835,.835) rotateY(180deg) translateZ(200px);
}
#transitions #cube .top {
-webkit-transform: scale3d(.835,.835,.835) rotateX(90deg) translateZ(200px);
}

@-webkit-keyframes cubedemo {
0% {-webkit-transform: rotateX(0); -webkit-animation-timing-function: linear; }
50% {-webkit-transform: rotateX(-92deg);-webkit-animation-timing-function: ease-in; }
70% {-webkit-transform: rotateX(-84deg); -webkit-animation-timing-function: ease-in; }
80% {-webkit-transform: rotateX(-90deg); -webkit-animation-timing-function: ease-in; }
95% {-webkit-transform: rotateX(-88deg); -webkit-animation-timing-function: ease-in; }
100% { -webkit-transform: rotateX(-90deg); }
}

As you can see from this example, 3D CSS transforms and animations make it easy to add polished 3D effects to your app. Now that we support hardware compositing in Chromium, it’s easy to perform these transforms on the GPU and display it quickly on screen, so we’ve enabled them along with the compositor. Currently, this functionality is only available in Safari and Google Chrome but Firefox is working on an implementation as well, making it a great option to add impressive effects to your app in the future.

WebGL: Low-level dynamic 3D

While 3D CSS makes it easy to display 2D content so that it looks like it’s in a 3D space, it’s not designed for writing true 3D applications like CAD software or modern games. WebGL, on the other hand, provides access to all the functionality of OpenGL ES 2.0 from JavaScript, and is designed with exactly these types of applications in mind.

It’s back-to-school season in many parts of the world, so we thought we’d kick off a series of blog posts about cool Chrome extensions that can make life easier for students. These include extensions that helps students keep in touch with friends and family, research and write papers, and be more productive during the school year. Check out the Official Google for Student blog to read about today’s extensions that help students stay connected with friends at school and those back home.

There are a ton of add-ons that dim the screen while you're watching a video or playing a Flash game. Heck, some Web sites even have this functionality built right in, no add-on required.

Reading Glasses for Chrome does the same, but for text. As you can see in the screenshot, with Reading Glasses, only the post text is dark, while all other page elements are grayed out. This is accomplished by highlighting some of the text of the post, and clicking the "glasses" icon which appears next to the address bar once the add-on is installed.

I wish the add-on could make the page background dark and the text light. Also, it would be nice if it could make the text a tad larger. Then again - this is what Readability is for. Then again, Reading Glasses is a bit more lightweight and it doesn't impact the site's look-and-feel at all, except for fading it out a bit.

If you’re using the Google Chrome Extensions Gallery to publish your extensions, we just added support for Google Analytics, which can help you better understand how many people visit your extension pages, where they’re coming from and more.

Starting today, you can specify a Google Analytics profile for each of your extensions. This will start tracking the extension’s page in your Google Analytics account as if that page was part of your own site. See these instructions for more information on how to set this up.

You can also use Google Analytics to track the usage of your extension once it’s installed. Check out this tutorial that explains how to integrate Google Analytics such that you can analyze how users interact with the features of your extensions.

For questions about this new feature, we encourage you to visit our developer discussion group and share your feedback with us.

Google Chrome's dev channel has been bumped from 7.0.503.0 to 7.0.517.0. The update wasn't silky-smooth for me this time -- more on that later in this post. So what's new in Chrome dev?

For starters, there's been a lot of code cleanup, and there have also been some minor UI tweaks as well -- a few pixels rounded here and there on Mac, but nothing too noticeable. Google Chrome's remoting code has seen numerous updates and it looks as though the feature is just about ready for us to test. Right now, however, all you can see is a login window -- but you won't be able to login. My guess is that only Google's internal accounts will work at the moment.

The Dev channel has been updated to 7.0.517.0 for Windows, Linux, and ChromeFrame.

All

• about:labs (Issue: 53399)
• Fewer wstrings in the bookmark code!
• Problems visiting http://localhost in various network configurations should be resolved (Issues: 42058, 49024, 32522).

Windows

• See All

Linux

• [r58011] [phajdan.jr@chromium.org] [OS-LINUX] Issue 29333 - use_system_xml causes many sites to fail to load
• Remove libxml hack that is not needed after we rolled in the WebKit fix (Issue: 29333)
• [r58449] Fix default browser selection on KDE 4 on many RPM-based distributions. (Issue 33842)

Known Issues