Thursday, January 10, 2013

Get WebGL working on the Android Chrome Beta

[UPDATE: This whole process just got a lot easier! With the newest update you can now visit about:flags (or chrome://flags, take your pick) and click the link that says "Enable WebGL". Then restart the browser and you're done! Best of all? No root required!]

Today a new Chrome Beta was released to the Google Play store. While the current stable Chrome release is based on the relatively old and crusty Chrome 18, the beta is based on the Chrome 25 code base. It's a big step forward in a lot of aspects, but there's one very specific capability that was added that's of interest to readers of this blog: WebGL support!

Now don't get too excited, because it's not turned on out of the box and not everyone will be able to enable it, but if you're interested in doing some early testing of your WebGL app(s) it's now possible with a little bit of tinkering.

Here's what you'll need:
  • A rooted Android device running Jellybean or Ice Cream Sandwich. This will be the biggest hurdle for many people, as rooting can be complicated depending on your device. I'm not going to go into how to root your device here, that's what Google is for.
  • A Windows, Mac, or Linux computer
  • The Android SDK for your OS of choice. Make sure you've installed the Platform Tools, we need adb.
Once you've got all of that actual process of enabling WebGL is pretty simple. Plug your Android device in to the computer with a USB cable, then open up a console/terminal instance and enter this:

adb shell 'echo "chrome --enable-webgl" > /data/local/chrome-command-line'


Now when you launch the Chrome Beta, WebGL will be enabled! Go give it a try with your favorite demos. Please keep in mind that there's a reason it's not enabled by default, this IS a beta release, after all!z Don't be surprised if the browser crashes while you get your WebGL on. It's stable enough to do testing and development, though, and if you DO encounter issues bug reports are appreciated!

Update: Added a video about the process and showing a couple of quick demos



Update #2: So a lot of people have (justifiably) been annoyed at the requirement for root to enable this and are wondering why we can't just have an about:flags page like the desktop. A couple of comments regarding that:
  • Obviously this method isn't terribly user friendly. It's not intended to be a final solution. I've heard from our Developer Relations people that a more robust, accesible solution is on the way but I don't have any timeline for that. The information in this post is intended to be a way for developers to get early access to the feature for testing.
  • If the file in question was not in a protected directory it would be very easy for malicious Android apps to hijack your browser and force it to do undesirable things. The root requirement is to protect the user in this case. Annoying, but necessary.
Please don't think anybody on the Chrome for Android team things that mucking about in adb is an acceptable user experience. "User Friendly" takes time, though, and there's a certain class of enthusiasts (like myself) who are willing to endure a bit of awkwardness to get features as early as possible. That's who this post was intended for.

21 comments:

  1. Any similar flags for WebAudio or WebRTC?

    ReplyDelete
    Replies
    1. Not that I'm familiar with off the top of my head, sorry. I can look into it, though.

      Delete
    2. According to http://peter.sh/experiments/chromium-command-line-switches/ "--enable-webaudio" is available, but it doesn't seem to actually work yet.

      Delete
  2. This didn't work for me (Rooted Nexus 7). I used a terminal emulator to type the command in (as su) > exited, then started chrome beta in a webgl demo. Any ideas?

    ReplyDelete
    Replies
    1. I think Chris is right, if you create the file on the tablet you may need to alter it's permissions to get it to work. Also, make sure that you completely close down the browser (including closing any tabs). I've noticed that leaving a WebGL-enabled tab open when you close the browser down sometimes causes it to cache the page state after restarting, which makes it appear that the change didn't work.

      Delete
  3. I needed to chmod 777 that file when editing on the tablet to get Chrome to pick it up.

    ReplyDelete
  4. Have you guys got any idea whether HDM1.4 3D output will be supported by browser any time?
    I'm interested in developing web apps for training lazy eyes for amblyopic children and adults

    ReplyDelete
  5. Runs great on my nexus 4! :D Thanks!!!

    ReplyDelete
  6. wow, it works great on my nexus7.. it's still not that fast with some demos I just tried, but it's good enough for now!
    Thank you for the tip Brandon!

    ReplyDelete
  7. Why's WebGL in the downloadable Chrome on Android not toggleable with some user flag? Why do we have to root the phone? Wut?

    ReplyDelete
  8. What, excuse me, idiot told them to put Chrome command line into a root-only directory? Anyway, this is great, it's strange that Firefox doesn't run WebGL at high FPS.

    ReplyDelete
    Replies
    1. I've updated the post to explain this a bit better. (The root thing. I claim no knowledge of Firefox's internals. :P)

      Delete
    2. And another year has passed without any significant WebGL out of the box enablement shipped by any major vendor, again. Meanwhile the year of 2012 saw an increase in mobile WebGL use of about 3%, while the desktop saw about 5% gain, unfortunately overall webgl has made -10% in 2012 because mobile use grew by leaps and bounds, hurrah.

      Delete
  9. You can avoid permission issue by modifying slightly APK file.

    At first, pull Chrome beta APK file to your computer using application, such as AppMonster. Next, you need to install apktool(http://code.google.com/p/android-apktool/). Then open up a console/terminal instance and enter this:

    apktool d 1364008.apk
    find 1364008 -name "*.smali" -exec sed -i "" 's/\/data\/local\/chrome-command-line/\/data\/local\/tmp\/chrome-command-line/g' {} \;
    apktool b 1364008 1364008_unaligned.apk
    jarsigner -verbose -storepass android -keystore ~/.android/debug.keystore 1364008_unaligned.apk androiddebugkey
    zipalign -f -v 4 1364008_unaligned.apk 1364008_fixed.apk

    adb shell 'echo "chrome --enable-webgl" > /data/local/tmp/chrome-command-line'
    adb uninstall com.chrome.beta
    adb install 1364008_fixed.apk

    ReplyDelete
    Replies
    1. Could you make an apk that uses /mnt/sdcard instead of /data/local/tmp? I can't access tmp, and I get Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES] if I try to modify it by myself.

      Delete
  10. Should this work in Nexus 4? I tried it using the Terminal emulator as: echo "chrome --enable-webgl" > /data/local/chrome-command-line using the su level. Then I checked in the data/local folder to find the appropriate file (chrome-command-line), changed the permissions to 777, but to no avail. Any idea? Or something's wrong with my step? Thank you.

    ReplyDelete
  11. The about:flags => Enable WebGL is now available... Tested on my Galaxy SII.

    ReplyDelete
  12. Chrome 18 - ASUS TF300T
    No "about:flags - chrome://flags" , is this normal? Anyway I can't enable WebGL so easely.

    ReplyDelete
    Replies
    1. WebGL (and about:flags) is not available in Chrome 18. You'll need to get the beta, which is linked at the beginning of this post.

      Delete
  13. Chrome is not as simple as others, but it only takes a simple mind to get to know Chrome, is fast and free


    make Computer high speed

    ReplyDelete