Next-Generation 3D Graphics on the Web (Google I/O ’19)



This talk will cover the latest updates for adding 3D to your web site. You’ll learn how to use model-viewer and new features for rendering, AR, and interactivity. You’ll also see some phenomenal sites created with three.js. Then you’ll get an overview of the WebGPU API that will provide modern features such as “GPU compute” as well as lower overhead access to GPU hardware and better, more predictable performance. Expect performance gains in Tensorflow.js up to 10x.

Websites featured:
ROME by Google Creative Lab →
Track by Little Workshop →
Plume by Fabien Motte, Patrick Heng, Alexadre Delalleau, Nicolas Mathis and Mohave →
Oat the Goat by Assembly and FCB New Zealand →
WebVR Showroom by Little Workshop →
Hinderer & Wolff by Adelios →
Bertrand Candas →
Tao Tajima by Homunculus →
Robin Mastromarino by Patrick Heng →
React Three Fiber by Paul Henschel →
WebGL Globe by Google Data Arts Team →
Model Viewer by Chrome DevXR →
Model Viewer Layout Test by Chrome DevXR →
NASA Mars Curiosity Rover →

More projects at:

Watch more #io19 here:
Web at Google I/O 2019 Playlist →
Google I/O 2019 All Sessions Playlist →
Learn more on the I/O Website →

Subscribe to the Chrome Developers Channel →
Get started at →

Speaker(s): Corentin Wallez, Ricardo Cabello

T4CDD1

Nguồn: https://aj-watts.com/

Xem thêm bài viết khác: https://aj-watts.com/game/

  • is there a tutorial for beginners?

    ThomasHaberkorn June 25, 2020 3:12 pm Reply
  • When can I run hashcat in the browser?

    superkrabban June 25, 2020 3:12 pm Reply
  • RIP Native Apps

    Aarsh Parashar June 25, 2020 3:12 pm Reply
  • 10 May 2019

    This talk will cover the latest updates for adding 3D to your web site. You'll learn how to use model-viewer and new features for rendering, AR, and interactivity. You'll also see some phenomenal sites created with three.js. Then you'll get an overview of the WebGPU API that will provide modern features such as “GPU compute” as well as lower overhead access to GPU hardware and better, more predictable performance. Expect performance gains in Tensorflow.js up to 10x.

    Websites featured:
    ROME by Google Creative Lab → https://goo.gle/2LIHkpy
    Track by Little Workshop → https://goo.gle/2WESqwQ
    Plume by Fabien Motte, Patrick Heng, Alexadre Delalleau, Nicolas Mathis and Mohave → https://goo.gle/2Viydvr
    Oat the Goat by Assembly and FCB New Zealand → https://goo.gle/2JF4NW3
    WebVR Showroom by Little Workshop → https://goo.gle/2JhK6QD
    Hinderer & Wolff by Adelios → https://goo.gle/30ev3N3
    Bertrand Candas → https://goo.gle/2VzSyBv
    Tao Tajima by Homunculus → https://goo.gle/2Q4Fo9t
    Robin Mastromarino by Patrick Heng → https://goo.gle/2W1xByz
    React Three Fiber by Paul Henschel → https://goo.gle/2VotAjk
    WebGL Globe by Google Data Arts Team → https://goo.gle/2E7doxj
    Model Viewer by Chrome DevXR → https://goo.gle/2HlFqWI
    Model Viewer Layout Test by Chrome DevXR → https://goo.gle/2HhOeOf
    NASA Mars Curiosity Rover → https://goo.gle/2WESFYM

    More projects at:
    https://goo.gle/2Yygwdt
    https://goo.gle/2HlFGFa

    Watch more #io19 here:
    Web at Google I/O 2019 Playlist → https://goo.gle/io19web
    Google I/O 2019 All Sessions Playlist → https://goo.gle/io19allsessions
    Learn more on the I/O Website → https://google.com/io

    Subscribe to the Chrome Developers Channel → https://goo.gle/ChromeDevs
    Get started at → https://www.google.com/chrome/dev/

    Speaker(s): Corentin Wallez, Ricardo Cabello

    T4CDD1

    Rahul Gupta June 25, 2020 3:12 pm Reply
  • A warm and welcoming presentation amongst the cold, desolate YouTube list page.

    Ashley Clarke June 25, 2020 3:12 pm Reply
  • 11:28

    Atul Kumar Agrawal June 25, 2020 3:12 pm Reply
  • Unless I'm missing something, (entirely possible,) I suspect there is an error in the code:
    15:50 The first vertex should be (0.0, 0.5, 0.0) & not (0.25, 0.5, 0.0). Same goes for the WebGPU version. Not a bug, just cosmetic.

    Jianju69 June 25, 2020 3:12 pm Reply
  • Yeah he introduced a concept but the examples were pretty poor to say the least.

    Mr. HeavyDebater June 25, 2020 3:12 pm Reply
  • Guy: We can't do these in CSS
    CSS4: Hold my keyframes….

    cI FER June 25, 2020 3:12 pm Reply
  • Next-Generation? So not for our generation? 🙁

    cI FER June 25, 2020 3:12 pm Reply
  • I tried various search parameters including "consumer 3d graphics 2019 -printers" and still got this video at the top of the list. This had better be good Google…

    David Jackson June 25, 2020 3:12 pm Reply
  • What is a revolution from WebCL?

    Huong Nguyen June 25, 2020 3:12 pm Reply
  • can someone please suggest form where to start webgl by my own ?
    Any beginner resources will be very helpful.

    Subhajit Chatterjee June 25, 2020 3:12 pm Reply
  • About webgpu by simple words: O(n) better than O(n2)

    Cras melius fore June 25, 2020 3:12 pm Reply
  • HOLD THE PHONE. I've been looking how to do AR for the web on mobile for like forever and it seemed to not possible or be a big big pain so now with the model viewer + quicklook we ALL SET. Bless

    Andrew Morrissette June 25, 2020 3:12 pm Reply
  • Hi everyone! I'm a web designer student and I'm considering to make 3D web games. I'm currently learning HTML,CSS and JavaScript and later I'll start to use Babylon.js. Is there any other thing really important I need to learn pls?

    sam mas June 25, 2020 3:12 pm Reply
  • No recognition for Unity :<

    Kalle Jillheden June 25, 2020 3:12 pm Reply
  • I'm amazed by these awesome WebGL demos. But wait for it, they say, we are developing a totally new API called WebGPU. Then I take a look at the GitHub repo, Maybe now it's too early to access. maybe five years later it will be okay.

    Huaixing Su June 25, 2020 3:12 pm Reply
  • The first half was good

    ioanb7 June 25, 2020 3:12 pm Reply
  • Weeeeeeeak! This should've been done 10 yrs ago man

    Kristopher Driver June 25, 2020 3:12 pm Reply
  • Is there an easy way to convert a WebGL canvas into WebGPU?

    viksra June 25, 2020 3:12 pm Reply
  • At minute 30:24 there's a volume peak at your audio record. It almost blown my speaker.

    mig drp June 25, 2020 3:12 pm Reply
  • Dont sign up for any gugle product or service. They will use to scrape your data and profit from your content

    Simply Human June 25, 2020 3:12 pm Reply
  • I didnt understand 1 bit exept something with optimization 😂

    Elena June 25, 2020 3:12 pm Reply
  • "We must find a way to combine WebGL and HTML"? I don't like this kind of unjustified statements… I think it is important to communicate the reasons, if there are any — my suspicion being that there isn't one.

    Daniel Martín June 25, 2020 3:12 pm Reply
  • Those 60fps <3

    Rodrigo Weilg June 25, 2020 3:12 pm Reply
  • Wait… So we'll be able to do compute without shader tricks?

    atrumluminarium June 25, 2020 3:12 pm Reply
  • Very good, in depth, easy to understand explanation of how the GPU works. Thanks.

    Máté Homolya June 25, 2020 3:12 pm Reply
  • 9:35

    Pramod Pendyala June 25, 2020 3:12 pm Reply
  • Lol people complaining about fps of the demos this technology is not ready yet it will get better over time.

    Kevin Miller June 25, 2020 3:12 pm Reply
  • Do I understand correctly that instead of enhancing WebGL performance there will be totally new API for very similar thing?

    David Vass June 25, 2020 3:12 pm Reply
  • Chrome 2010: Consumes 90% of user's RAM and CPU

    Chrome 2019: Hold my beer

    Patrick Andro • June 25, 2020 3:12 pm Reply
  • v exciting but i get a higher fps in the webgl babylon demo than the webgpu one??

    Adrian Meredith June 25, 2020 3:12 pm Reply
  • Looks cool.
    but in the end its just another way to slow a webpage back down again.
    If i wanted to sit and wait for stuff to appear letter by letter or pixel by pixel, I would jump in my time-machine and go back to the days of the modem.
    I'm so sick of kids who didn't have to suffer trough the slow times, who insist on bringing them back.

    mtssvnsn June 25, 2020 3:12 pm Reply
  • YAY MR DOOOOOB

    Mate Steinforth June 25, 2020 3:12 pm Reply
  • I can really relate to the fact that the github repo is named gpuweb but the tech is webgpu

    placid chat June 25, 2020 3:12 pm Reply
  • 19:09 36 fps – 0.04 CPU ms. This looks like 36 frame rate limitation. Is it the case in Browser? Browsers are limited to 60 FPS, not 36. There should be:
    60 fps – 0.04/0.06 CPU ms, otherwise the values were faked

    Leksander S June 25, 2020 3:12 pm Reply
  • Does Google oppose to develop WebGL 2.0 standard?
    https://www.khronos.org/registry/webgl/specs/latest/2.0/

    Андрей Лавров June 25, 2020 3:12 pm Reply
  • WebGPU looks much much more pleasant to write than Vulkan. Not having to fill out dozens of structs before you even get to write the first shader is nice.

    Pesthuf June 25, 2020 3:12 pm Reply
  • This is a great overview and I learned a lot. It seems like the new Web GPU is going to have some really great features that will be worth learning about. That said, this is a great juncture to ask: Are there any plans to support upcoming technology like ray tracing? Also, will the new compute shaders support dedicated hardware, like tensor cores?

    DanteAffinity83 June 25, 2020 3:12 pm Reply
  • Happy shock and tons of awe coming out from this video. Some links to help you find out more:

    https://webgpu.io
    https://en.wikipedia.org/wiki/WebGPU
    https://www.w3.org/community/gpu/
    https://twitter.com/hashtag/webgpu

    Theo Armour June 25, 2020 3:12 pm Reply
  • Richardo is legend

    George Hatoutsidis June 25, 2020 3:12 pm Reply
  • A brilliant overview. Admire Ricardo and Corentin's perspectives. Memory transfer and top level computations have always been GPU bottlenecks and I was impressed with how well shared memory with WebGPU was illustrated.

    Tom Flaherty June 25, 2020 3:12 pm Reply
  • Chrome support for webGPU – love it! In Canary w/flags, the demos work today. I've been using WebGL since 2012, so this is pretty exciting

    Rodney Reid June 25, 2020 3:12 pm Reply
  • So happy to see that WebGL will go on! The best thing since a long time!

    Philipp Küderli June 25, 2020 3:12 pm Reply
  • I have waited long for this… Chrome support for webgpu is coming!

    Ghanashyam Sateesh June 25, 2020 3:12 pm Reply
  • Hear hear!

    François Guthmann June 25, 2020 3:12 pm Reply
  • Exciting times !

    Just wanted to add that there is also React Fiber based project for Babylon: https://github.com/brianzinn/react-babylonjs

    Anything we can do to get WebGPU Canary builds faster for Win/Linux? I currently only have an ancient Mac Air (though it does have a GeForce card)

    Pelle Johnsen June 25, 2020 3:12 pm Reply
  • 21:56 "This is gonna be pretty far from DOM manipulation like React or amazing web features like CORS headers, so please bear with me" 🤣

    Louis DeScioli June 25, 2020 3:12 pm Reply
  • I am watching this video just for Ricardo. I have been his fan since I saw his work on animating Google search home page years back.

    navaneeth agastya June 25, 2020 3:12 pm Reply

Leave a Reply

Your email address will not be published. Required fields are marked *