Giter VIP home page Giter VIP logo

webglbrowser's Introduction

WebGLBrowser - an iOS browser shim with WebGL

This is a simple wrapper around UIWebView, the built-in WebKit-based browser that ships as part of iOS. It adds some bookmarking and other features handy for testing, and enables the WebGL functionality that's in the iOS WebKit available to iAds. You can't ship anything with this, but you can test your code and it runs well enough to start developing touch-enabled 3D web apps. Enjoy!

WTF?

Early last year James Darpinian discovered the hidden property required to get WebGL toggled on in UIWebView on iOS. We hacked together some shims that made it possible to run WebGL pages and although the underlying WebKit implementation of WebGL had some issues it was good enough for testing.

Flash forward to today: I lost the shim I had written and wanted to test some WebGL content on a touch device. I found a great article by Nathan de Vries that goes in depth through the process James did so long ago and it inspired me to whip up something a bit more useful than what I had before.

So, here it is. It's super hacky, unreleasable on the App Store (due to the use of private APIs), and since WebGL is not officially supported on iOS often fails in interesting ways. Unfortunately the performance characteristics of this shim are not indicative of what Mobile Safari would behave as with WebGL content (when/if it's enabled), as Apple has disabled their JIT for apps using UIWebView. GPU-heavy apps should be fairly close to real perf, though, despite some likely inefficient compositing capping the framerate at just under $ass fps.

In theory, one can grab the latest Xcode with iOS SDK, build, and run on their device with no changes. Should work on both iPhone and iPad with iOS5+.

Features

  • Add bookmarks for quickly returning to a URL
  • Fullscreen mode (hit the home button and reopen to return to normal mode)
  • WebGL!
  • AirPlay mirroring works (there's a bit of a lag, but the framerate is good)
  • Remote inspecting when running in the iOS simulator

Inspecting Pages

Using Nathan de Vries' awesome find, you can now run the WebKit Inspector against pages loaded in the app. Unfortunately you can't inspect pages running on device yet, but it's a full featured inspector (debugging/networking/sampling/etc) and it should match device features.

To use, launch the app in either the iPhone or iPad simulator, navigate to a page, and then open http://localhost:9999 in Safari (no other browser works).

Notes

  • Q3BSP runs at 60FPS on my iPhone 4S and iPad 2 - nice!
  • WebGL Aquarium is slow (20-25FPS) - likely due to some scaling tricks used
    • Avoid scaling your canvas with CSS or doing canvas->canvas draws
  • Some demos don't work because people are using platform detection
    • Use feature detection!
  • JSON parsing in mobile WebKit is slow - demos that parse large JSON blobs for models/etc will take awhile to load

WebGL Conformance Tests

I ran a few of the conformance test suites. Unfortunately the test runner hides the output at the end, so I can't see all of the results. Some things the tests highlight that one should watch out for when testing their own code:

  • 1.0.0: 5626 of 5649 passed, 1 timed out
    • The video test timed out
  • 1.0.1:
    • drawingBufferWidth/Height are undefined
    • Many programs fail to link, causing many test errors
    • Looks like there are some deletion errors (not properly clearing state/cleaning bindings)
    • Long variable name handling in shaders ir broken
    • gl.getParameter(gl.COMPRESSED_TEXTURE_FORMATS) == null
    • gl.getProgramParameter(gl.LINK_STATUS) == true | null (not false!) - likely the same for shaders
    • CORS handling is broken (looks like it doesn't check at all)
    • pixelStorei has issues (likely being ignored)
    • NPOT cubemaps broken
    • Uploading custom mip levels is brokenish
    • TypedArrays has a few errors with wrapping ArrayBuffer in ArrayBufferView (and no Float64Array)
      • conformance/typedarrays/array-unit-tests.html
    • copyTexImage2D has issues
  • 1.0.2: Crash!

webglbrowser's People

Contributors

benvanik avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.