Beating canvas 2 d in its own territory webgl+tesspathy

Jul 21, 2015Download as PPTX, PDF1 like1,718 views

Beating Canvas 2D in Its Own Territory WebGL + Tesspathy グリー株式会社劉光耀 (Guangyao Liu) ※Chrome Tech Talk Night #8でのLT資料です http://connpass.com/event/17312/

Beating Canvas 2D in Its Own
Territory
WebGL + Tesspathy
Guangyao Liu
twitter:@brilliun, github:@brilliun
GREE, Inc.

JS Animation
Engine
<canvas>
2D
Vector
Contents
e.g. SWF
Contents
Provider
User’s
Browser

JS Game/Animation
<canvas>
Canvas 2D WebGL
We used to
use this only

Canvas 2D WebGL
● 2D
● Vector data
● 3D (mainly)
● Mesh data
● Hardware
acceleration

Canvas 2D WebGL
● 2D
● Vector data
● Hardware
acceleration
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Browser Vendor

HTML5 Game/Animation
<canvas>
Canvas 2D WebGL
Content
2D Vector 2/3D Mesh

Canvas 2D WebGL
● 2D
● Vector data
● Hardware
acceleration
● 3D (mainly)
● Mesh data
● Hardware
acceleration
Still Not
Enough

HTML5 Game/Animation
<canvas>
WebGL
Content
2D Vector 2/3D Mesh

Only one problem
WebGL Just Can’t Handle
Vector Graphics

Tesspathy
A JS library converting vector graphics for GL-
like APIs
● Convert on the fly
● Resolution-independent Curves
● Almost no assumption of input data
github.com/gree/tesspathy

Remember the Demo?
Now let’s try it with
WebGL + Tesspathy

<canvas>
Canvas 2D WebGL
Tessellation
Hardware
Acceleration
Newly added
this year
skia/src/gpu/*.cpp

<canvas>
Canvas 2D Tesspathy
Tessellation
Hardware
Acceleration
skia/src/gpu/*.cpp
WebGL
Hardware
Acceleration
your/self/code.js

Thank You
Tesspathy
github.com/gree/tesspathy

This document proposes a left-aligned ASCII visualization for directed acyclic graphs (DAGs) to address limitations in reviewing and comparing changes to complex, long dataflows in machine learning models. It discusses challenges with existing visualization tools in development workflows and outlines an approach using a compact, reviewable ASCII format rendered with an algorithm to order nodes by depth. An evaluation compares rendering speed between this approach and Graphviz for Google's Inception-V3 model DAG. Future work includes integrating the visualization into code review tools.

You Don't Know WebGL at GREE Tech Talk #08Guangyao Liu

Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArtAlina Vilk

This document discusses interactive 3D graphics for the web using three.js. It begins with an overview of WebGL, including the WebGL pipeline and shaders. It then introduces three.js as a JavaScript library that builds on WebGL to make 3D graphics creation simpler. The document shows a basic "hello world" example in three.js and outlines some of its additional features like objects, lights and cameras. It concludes by discussing potential next steps like WebVR.

Unleashing WebGL & WebAudio with babylon.jsdavrous

During this session, we will see how, thanks to babylon.js, we can easily create and use 3D content associated with sounds directly with JavaScript. We will also see how to interact with DCC tools like Blender or 3DS Max to work with 3D designer. With simplicity in mind we will be able to use complex topics like collisions, physics or even spatial sound with the minimal amount of code! #jquk 2015

GWTcon 2015 - Best development practices for GWT web applications Arcbees

HTML5 on the AGL demo platform with Chromium and WAM (AGL AMM March 2021)Igalia

How to improve gradle build speedFate Chang

This document discusses how to improve the speed of Gradle builds. It recommends using the Gradle daemon, configuring on demand, building in parallel, and using newer versions of Gradle and the Android Gradle plugin. Profiling a sample project showed build times could be improved from 7.8 seconds to 2.4 seconds using these techniques. Updating dependencies and disabling Instant Run in Android Studio may also help increase build speeds.

About OpenGL and Vulkan interoperability (XDC 2020)Igalia

By Eleni Maria Stea. EXT_external_objects and EXT_external_objects_fd are groups of OpenGL extensions that allow OpenGL and Vulkan interoperability. When enabled, Vulkan allocated resources can be accessed and re-used by OpenGL. This talk is about the implementation of the extensions in various drivers, and some common interoperability use cases and examples that have been added to piglit. (c) X.Org Developers Conference (XDC) 2020 September 16-18 https://xdc2020.x.org https://www.youtube.com/channel/UCXlH5v1PkEhjzLFTUTm_U7g

Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous

We'll see in this session how to create 3D HTML5 WebGL games for the desktop & mobile web. For that, I’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub. It has been recently used by Ubisoft for the Assassin’s Creed Pirates web experience. We’ll see how to cover the complete gaming pipeline from the 3D assets created & exported from Blender/3DS Max/Maya to BabylonJS, the various camera's types (touch, virtual joysticks, gamepad, etc.), the usage of the embedded physic engine. At last, of course, how to implement the game logic in JavaScript. We'll build a simple game to better understand how to use this free engine.

NGF2014 - Create a 3d game with webgl and babylon.jsdavrous

We'll see in this session how to create 3D HTML5 WebGL games for the web (IE11/Chrome/Firefox & Opera) as well as for some mobile ecosystems. For that, we’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub: https://github.com/BabylonJS/Babylon.js You’ll see how to cover the complete gaming pipeline from the 3D assets created & exported from Blender/3DS Max/Maya to BabylonJS, the various camera's types (touch, device orientation, etc.), the usage of the embedded physic engine. At last, of course, how to implement the game logic in JavaScript. We'll build a simple game from scratch to better understand how to use this free engine.

Introduction to serverless computing on Google Cloudwesley chun

WPE WebKit for AndroidIgalia

Overview of the open source Vulkan driver for Raspberry Pi 4 (XDC 2020)Igalia

The presentation discusses the development of a Vulkan driver named V3DV for the Raspberry Pi 4. It began development in November 2019 and has progressed from initial triangle rendering to supporting many Vulkan CTS tests and demos like Quake games. While the basic Vulkan 1.0 feature set is complete, there are still challenges around the linear display pipeline and optimizing usage of the texture filtering unit. Future plans include improving conformance, merging with Mesa, and exploring performance optimizations and additional features. External contributors are welcomed to help with testing, documentation, and implementing optional Vulkan aspects.

Extending GWTisurusndr

GWT is a free and open source framework that allows developers to create complex JavaScript front-end applications using Java. It handles cross-browser issues and supports features like OOP designs, reusable UI components, localization, and mixing native JavaScript with Java code. GWT provides UiBinder for binding UI components using an HTML-like markup language at compile time. Alternatively, some companies define UI bindings at runtime using XML defined at the server-side with component definitions in XSDs and dynamically generated factory classes. The document provides examples of defining a sample UI component and binding.

Gradle build automation toolIoan Eugen Stan

This document provides an introduction to the Gradle build automation tool. It discusses Gradle's advantages over other build tools like Ant and Maven, including its use of Groovy build scripts, convention over configuration approach, and support for multi-project builds through a directed acyclic graph model. Key features of Gradle highlighted include its declarative build style, dependency management capabilities, build daemon for improved performance, and available plugins.

2021 WebKit Contributors Meeting, IgaliaIgalia

Angular 2 vs React. What to chose in 2017?TechMagic

Front end microservices - October 2019Mikhail Kuznetcov

Latest version of the 'Front end microservices' talk -- Modern frontend has grown in complexity and technologies diversity dramatically last decade. Usual case are apps of >100KLOC with multiple teams shipping code daily. One of the ways to deal with support and further growth of such projects is to apply microservices approach to frontend stack. There are several solutions in the ecosystem that can enable multiple frameworks run seamlessly within one main uber-SPA. This enables common benefits of microservices approach: freedom of technology choice, separate deployments, faster new developers on-boarding due to reduced complexity of each sub-module, etc. Also this might be a migration path for large frontend monoliths.

Quick Review of Desktop and Native Apps using JavascriptRobert Ellen

This document reviews several options for building desktop applications with JavaScript, including GLUEScript, Seed, GJS, Qt Script, QtQuick, and TopCube. It finds that the GTK-based options like Seed and GJS have issues, while Qt-based approaches need more investigation. It also discusses using Node.js with TopCube or HTML5 for desktop GUIs, and native platforms like Java and Objective-C for phone apps. The document concludes that further options should be explored but typical bindings for C++ and Python may be better for desktop for now.

WebGL의 무궁무진한 가능성 Jun Ho Lee

This document discusses the possibilities of WebGL and how it can be used for 3D graphics rendering on the web. It explains that WebGL allows for GPU-accelerated rendering directly in the browser by using APIs to control graphics processing units. It provides examples of using WebGL to initialize a WebGL context, create and compile shaders, and render 3D graphics by passing vertex and color data to shaders. The document recommends learning resources and frameworks for WebGL and suggests areas where WebGL could be applied, such as games, data visualization, and user interfaces.

Angular 2 vs ReactIran Reyes Fleitas

This document provides an overview and comparison of Angular and React frameworks from the perspective of an experienced AngularJS and React developer. Key points of comparison addressed include React being more lightweight and modular while Angular provides more out-of-the-box functionality. Performance benchmarks generally show React as faster while Angular's testing and routing capabilities are more robust. The document avoids making definitive conclusions and emphasizes choosing based on individual needs and preferences.

Java2day 2013 : Modern workflows for javascript integrationMite Mitreski

Modern JavaScript workflows use various tools to manage dependencies, build scripts, and frontend libraries. Popular tools include Grunt for running tasks, Bower for frontend package management, and Yeoman for scaffolding projects. These tools use mechanisms like npm, semantic versioning, and package.json files to integrate with build systems like Maven. Tests can be run with Karma and frameworks like PhantomJS.

WebKit2 And You (GUADEC 2013)Igalia

By Martin Robinson. After two years of work, WebKit2 has arrived to the GNOME platform, bringing security, stability, and performance. This talk will outline the new design and dive briefly into some of the gory technical details. Also, included will be a mountain of practical advice for application developers about the transition, such as whether or not applications should be rewritten for WebKit2 and how best to take advantage of the new multi-process model.

SnapyX - ParisJSflorianharmel

Qt and QML performance tips & tricks for Qt 4.7Pasi Kellokoski

The document provides performance tips for Qt/QML applications. It recommends: 1. Using C++ rather than JavaScript for business logic and long-running operations to avoid blocking the UI. 2. Loading content dynamically with Loaders and partitioning the UI into logical components to improve startup speed. 3. Caching images at their native size and resolution, loading images asynchronously, and avoiding unnecessary resizing or compositing of images to reduce memory usage and improve performance of visual elements. 4. Optimizing data models and use of cache buffers to improve the performance of scrolling in lists and grids.

[1C5]Lessons from developing a web browser for raspberry piNAVER D2

The document discusses lessons learned from developing a web browser on the Raspberry Pi. Some key optimizations included progressive tiled rendering to improve scrolling performance, avoiding unnecessary image format conversions, using disk caching for images, reducing memory copies for video playback, and supporting hardware decoding and scaling of images and video. Other optimizations involved improving responsiveness, managing tabs and memory usage, speeding up startup, and fixing issues for the Raspberry Pi's ARMv6 processor. The main lessons highlighted were the importance of profiling, watching for relevant upstream improvements, eliminating unnecessary processes, optimizing just-in-time, utilizing all available platform resources, and carefully managing memory and resource allocation.

Intro to QML / Declarative UIOpenBossa

This document introduces QML (Declarative UI) which allows describing user interface objects and properties in a declarative way and embedding JavaScript code. It discusses using QML to build user interfaces with animations and event handling. While QML is often used for mobile apps and small applications, it provides opportunities for designers to work more closely with developers. The document concludes by mentioning some features of QML and encouraging feedback on the ongoing Declarative UI project.

RPKI勉強会/RPKIユーザBoFgree_tech

[デブサミ秋2015] 新卒入社エンジニアが２年間fluentdを運用して学んだ事いろいろgree_tech

More Related Content

What's hot (20)

About OpenGL and Vulkan interoperability (XDC 2020)Igalia

Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous

NGF2014 - Create a 3d game with webgl and babylon.jsdavrous

Introduction to serverless computing on Google Cloudwesley chun

WPE WebKit for AndroidIgalia

Overview of the open source Vulkan driver for Raspberry Pi 4 (XDC 2020)Igalia

Extending GWTisurusndr

Gradle build automation toolIoan Eugen Stan

2021 WebKit Contributors Meeting, IgaliaIgalia

Angular 2 vs React. What to chose in 2017?TechMagic

Front end microservices - October 2019Mikhail Kuznetcov

Quick Review of Desktop and Native Apps using JavascriptRobert Ellen

WebGL의 무궁무진한 가능성 Jun Ho Lee

Angular 2 vs ReactIran Reyes Fleitas

Java2day 2013 : Modern workflows for javascript integrationMite Mitreski

WebKit2 And You (GUADEC 2013)Igalia

SnapyX - ParisJSflorianharmel

Qt and QML performance tips & tricks for Qt 4.7Pasi Kellokoski

[1C5]Lessons from developing a web browser for raspberry piNAVER D2

Intro to QML / Declarative UIOpenBossa

About OpenGL and Vulkan interoperability (XDC 2020)Igalia

Creating 3D Worlds with WebGL and Babylon.js - Codemotion.esdavrous

NGF2014 - Create a 3d game with webgl and babylon.jsdavrous

Introduction to serverless computing on Google Cloudwesley chun

WPE WebKit for AndroidIgalia

Overview of the open source Vulkan driver for Raspberry Pi 4 (XDC 2020)Igalia

Extending GWTisurusndr

Gradle build automation toolIoan Eugen Stan

2021 WebKit Contributors Meeting, IgaliaIgalia

Angular 2 vs React. What to chose in 2017?TechMagic

Front end microservices - October 2019Mikhail Kuznetcov

Quick Review of Desktop and Native Apps using JavascriptRobert Ellen

WebGL의 무궁무진한 가능성 Jun Ho Lee

Angular 2 vs ReactIran Reyes Fleitas

Java2day 2013 : Modern workflows for javascript integrationMite Mitreski

WebKit2 And You (GUADEC 2013)Igalia

SnapyX - ParisJSflorianharmel

Qt and QML performance tips & tricks for Qt 4.7Pasi Kellokoski

[1C5]Lessons from developing a web browser for raspberry piNAVER D2

Intro to QML / Declarative UIOpenBossa

Viewers also liked (17)

RPKI勉強会/RPKIユーザBoFgree_tech

[デブサミ秋2015] 新卒入社エンジニアが２年間fluentdを運用して学んだ事いろいろgree_tech

DynamoDBを利用したKPI保存システムgree_tech

ゲームアプリの数学@GREE GameDevelopers' Meetupgree_tech

[GREE Tech Talk#10] ネットワークの可視化gree_tech

グリーで行われている勉強会とその特徴 ✕ 勉強会を主催してみた話gree_tech

CEDEC2015_OpenStack で運用する Private Cloud の泥臭い(リアル)な話gree_tech

サーバサイドアプリケーションを開発する現場において、開発用、テスト用、デモ用など様々な用途で多くのアプリケーション実行環境を用意する必要があります。またこうした開発現場を複数持った大規模な組織では、これらを効果的かつ効率的に提供するために Private Cloud 環境を構築したい要求が生まれます。本セッションでは、最近注目されている IaaS クラウド基盤のミドルウェア OpenStack を活用し、Private Cloud 基盤を構築・運用しているグリーの開発環境基盤の事例についてご紹介させて頂きます。　具体的には、どういった背景でどのように構築し、どのくらいの運用規模で、実際にどのような事をやってきて、どのような学びがあったかについてお話しさせていただきと思います。また OpenStack について知識がない方でも、本セッションの中身についてわかっていただけるように心がけた内容に致します。

Cocos2d-xを用いた "LINE タワーライジング" の開発事例gree_tech

Cocos2d-xの深層　Cocos2d-x組み込みによるピュアAndroid/iOSアプリの外科手術的統合gree_tech

QAエンジニアを通じて弊社の開発環境がより良くなる日〜 OpenSTF 編〜gree_tech

Cedec2015_「消滅都市」運用の一年gree_tech

スマートフォン向けゲーム「消滅都市」は、おかげさまでリリース後運用が始まってから一年が経過しました。実際に運用がはじまってからはさまざまな技術的、あるいは運用面における課題に直面しました。特に、多くの種類が存在するスマートフォンそれぞれで最適なユーザー体験が行えるようにするということ、半年間という短期間で開発してしまったことによる技術的負債をいかにして返済していくかということ、そして、限られた開発リソースのなかで報告された不具合をどのタイミングでいかに修正していくかということの三点が大きな問題として挙げられました。本セッションでは、我々がどのように問題を解決し、お客様満足度を維持していったのかという点について具体的にお話します。

DeNA流cocos2d xとの付き合い方dena_study

Cedec2015 お客様に驚きを提供する運営消滅都市の事例から-gree_tech

消滅都市は1年半の運営を通じて「他のアプリにはできない驚きの提供」をテーマに様々な施策を実施してきました。その中から、いくつかの事例をご紹介します。 ■コラボレーションで驚きを提供する CMやストーリー、ゲームギミックを連動させてお客様に驚きを提供してきた事例について ■より感情を揺さぶる新機能を提供するお客様が慣れ親しんだゲームプレイを拡張しよりシネマティックな体験を提供する新アップデート要素についてこれらの事例を中心に、1年半の運営について具体例を交えながら、ご説明します。

GREE 流！AWS をお得に使う方法gree_tech

CEDEC2015_スマホゲーム開発を支えろ！〜汗と涙のQAエンジニアリング〜gree_tech

2013年に発足したスマホネイティブゲームの開発部門において、QAエンジニアとして開発プロジェクトに飛び込み日々テストを行う中で、笑いあり、涙ありの様々なナレッジが蓄積されました。発足から2年弱の間で合計7つの開発チームにQAエンジニアが参加し、各チームの開発手法に沿って品質保証を行う中で、QAエンジニアが居ても品質保証が困難だった事例や、逆にQAエンジニアが居たからこそ上手く行った事例などを時間の許す限りご紹介致します。

Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例gree_tech

Cocos2d-x Talks #2(2015/3/13)発表資料 https://atnd.org/events/62594 Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例発表者グリー株式会社 Wright Flyer Studios部リードエンジニア渡部晋司概要 “消滅都市” はCocos2d-x 3.0を使い少人数、短期間で開発されたスマートフォン向けゲームです。本セッションでは、その開発、運用プロセスにおいて得られた経験を元に良かった点、悪かった点を実際の事例を交えて紹介し、皆様のお役に立てればと思います。

Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築gree_tech

RPKI勉強会/RPKIユーザBoFgree_tech

[デブサミ秋2015] 新卒入社エンジニアが２年間fluentdを運用して学んだ事いろいろgree_tech

DynamoDBを利用したKPI保存システムgree_tech

ゲームアプリの数学@GREE GameDevelopers' Meetupgree_tech

[GREE Tech Talk#10] ネットワークの可視化gree_tech

グリーで行われている勉強会とその特徴 ✕ 勉強会を主催してみた話gree_tech

CEDEC2015_OpenStack で運用する Private Cloud の泥臭い(リアル)な話gree_tech

Cocos2d-xを用いた "LINE タワーライジング" の開発事例gree_tech

Cocos2d-xの深層　Cocos2d-x組み込みによるピュアAndroid/iOSアプリの外科手術的統合gree_tech

QAエンジニアを通じて弊社の開発環境がより良くなる日〜 OpenSTF 編〜gree_tech

Cedec2015_「消滅都市」運用の一年gree_tech

DeNA流cocos2d xとの付き合い方dena_study

Cedec2015 お客様に驚きを提供する運営消滅都市の事例から-gree_tech

GREE 流！AWS をお得に使う方法gree_tech

CEDEC2015_スマホゲーム開発を支えろ！〜汗と涙のQAエンジニアリング〜gree_tech

Cocos2d-x 3.0を使ったゲーム “消滅都市” の開発事例gree_tech

Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築gree_tech

Similar to Beating canvas 2 d in its own territory webgl+tesspathy (20)

Korea linuxforum2014 html5game-sangseoklimSang Seok Lim

This document discusses techniques for optimizing the performance of HTML5 games on mobile devices. It begins with an overview of HTML5 game architecture and the WebKit rendering process. It then analyzes sources of performance issues, such as painting size and DOM complexity. The document recommends several optimization techniques, including DOM/canvas hybrid rendering, static object pooling, smart repainting of invalidated areas only, and minimizing source image scaling. Case studies demonstrating these techniques for real games are also presented.

Html5 (games)chamsddine bouzaine

HTML5 provides capabilities for building games in a cross-platform and lightweight manner without dependencies. It includes powerful APIs like the canvas element for 2D drawing and WebGL for 3D rendering. Common elements of HTML5 games include using <canvas> to define a drawing area, a 2D or 3D API to render shapes and objects, physics engines to simulate movement and interactions, and technologies like local storage for data caching. Tools like game engines, libraries, and bundlers can help develop HTML5 games.

Zoomcharts @ DevClub.lvViesturs Zariņš

ZoomCharts is an interactive and fast HTML5 charts library for big data visualization. It was created to address graphics challenges on the web like supporting multiple browsers, resolutions, and varying performance across devices. The developers use CoffeeScript, commit to GitHub, and have an automated testing setup to ensure quality. Key features of ZoomCharts include support for Canvas, SVG, and WebGL rendering as well as responsive design for big screens. Future plans include more chart types, an extension API, and memory tracking.

Building a Better Web with HTML5 and CSS3Karambir Singh Nain

HTML5 and CSS3 provide improvements to building the web. HTML5 introduces more semantic tags that improve accessibility and cleaner code. It also provides native support for video, audio, local storage and better interactions. CSS3 enhances presentation. HTML5 is supported across modern browsers and on mobile, allowing responsive design. New features like canvas and WebGL enable graphic effects. Geolocation allows accessing a user's location with permission. HTML5 aims to make the web platform more powerful and flexible.

#PDR15 - Pebble GraphicsPebble Technology

Hardware Acceleration in WebKitJoone Hur

Hardware Acceleration in WebKit provides concise summaries of key points: 1) WebKit uses various techniques like off-screen buffers, JIT compilation, and graphics acceleration to improve browsing performance. Graphics acceleration reduces CPU usage by offloading tasks like rendering to the GPU. 2) WebKit supports hardware acceleration of video playback and 2D canvas rendering through interfaces to video and graphics hardware. This allows smoother playback and animation. 3) Accelerated compositing in WebKit uses multiple tree structures integrated with the rendering process to take advantage of GPU acceleration for CSS3 effects, transitions, animations, and HTML5 video through interfaces like OpenCL.

New Ranking Metrics by GooglePhil Marx

WebGL For Game Development Spring 2013Tony Parisi

Tony Parisi is a serial entrepreneur and consultant architect who has authored a book on WebGL. He provides an overview of using WebGL for game development, including what WebGL is, popular frameworks like Three.js, techniques for loading models, animating scenes, implementing interaction, creating particle systems, and integrating 2D and 3D. He also discusses considerations for making WebGL games robust and putting all the pieces together.

Power of WebGL (FSTO 2014)Verold

HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framewor...Denis Radin

HTML GL solves "the slow DOM problem" by creating WebGL representations of DOM elements and hiding actual DOM after. This speeds up HTML/CSS animations and transformations by using 3D hardware acceleration and allows to apply OpenGL effects as modern 3D games have. Using HTML GL you still work with HTML/CSS as you are common to, but DOM elements are just facades to their WebGL represenations. These GPU accelerated textures are very effective from resources consuming perspective and are very cheap to transform or animate.

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

This document discusses HTML5 game performance and compares the graphics capabilities of different platforms. It finds that Canvas 2D is faster than before but WebGL is still much faster for rendering 2D sprites. WebGL provides 3D graphics using OpenGL ES and is accessed through the HTML5 Canvas element. The document tests performance by drawing many blue squares and measuring framerates, finding that WebGL can render significantly more sprites before slowing down.

Html5 2da parterolando_aaron

WebGL is a browser technology that enables hardware-accelerated 3D graphics using 2D APIs. It requires programmers to provide vertex and fragment shaders that specify 2D clipspace coordinates and colors, respectively, for WebGL to render real-time 3D graphics. While CSS3 makes building rich sites and apps easier with new features like 2D transforms, transitions, 3D transforms and webfonts, WebGL focuses specifically on displaying 3D graphics through 2D APIs and shader programming.

Drupal 3D - Intro to Using Web 3D with DrupalBrian Hay

High Performance Graphics - Introduction to WebGPU - Next Generation of High ...contact14711

Discover the future of web-based graphics with *High Performance Graphics - Introduction to WebGPU*. This course introduces WebGPU, the next-generation API that redefines high-performance graphics and computation on the web. Designed to replace older technologies like WebGL, WebGPU offers unprecedented control over GPU resources, enabling faster rendering, more efficient resource management, and advanced computational capabilities. Whether you're creating immersive 3D applications, interactive visualizations, or performing heavy compute operations in the background, WebGPU provides the tools to push the boundaries of what’s possible in web development. Perfect for developers, designers, and enthusiasts eager to harness cutting-edge technology, this program showcases the limitless potential of WebGPU in transforming the online experience.

DevChatt: The Wonderful World Of Html5Cameron Kilgore

HTML GL - возьмите столько FPS, сколько вам нужно!CodeFest

Render HTML/CSS in WebGL provides a way to render HTML and CSS content using WebGL for improved performance over traditional DOM rendering. It works by wrapping content in <html-gl> tags, which uses DOM mutation observers, html2canvas, and Pixi.js to convert the content to WebGL textures that can be manipulated and animated for a smoother experience than DOM. The framework is plugin-based and framework agnostic but intended to work with React-GL, allowing developers to work with standard HTML/CSS while harnessing the power of WebGL for animations and effects not possible with traditional DOM rendering.

A holistic approach to web performanceAustin Gil

This discussion looks at different opportunities and techniques where project managers, designers, and developers can improve performance. The techniques presented range from beginner to advanced so just about anyone can walk away with something to apply to their next project. Topics cover concepts and planning, workflows, tools and services, plugin recommendations, and there are links to code examples as well.

IntoWebGL - Unite Melbourne 2015Ryan Alcock

IntoScience is an interactive educational platform built using Unity. It is used in thousands of schools across Australia and the globe. It recently made the leap to WebGL to continue delivering features to chrome-based users. In porting a huge amount of content to this new technology, you could say we learned a thing or two. Here we share the highs, lows and hot-fixes in moving a massive product to a post-plugin existence.

Html5 Canvas and Mobile GraphicsEngin Hatay

Engin Yağız Hatay gave a presentation on graphics and animation capabilities in web browsers. He discussed several technologies including CSS3, Canvas, SVG, and WebGL, and when each is best suited. He provided details on HTML5 Canvas capabilities and limitations. Hatay also covered browser support for these technologies and recommended several JavaScript libraries that can be used to create graphics and animations, including PaperJS, ProcessingJS, and ThreeJS. He concluded with a discussion of tools and frameworks for mobile graphics development.

(Js) Export your own WebGL ViewerJooinK

This document discusses building a web-based 3D medical viewer using GWT and JavaScript interoperability. It covers managing 3D models with Three.js and Parallax3D, capturing user gestures with Hammer.js, providing an API for JavaScript consumption, processing data from a server, and offloading computation to web workers. The goal is a performant, extensible, mobile-ready embeddable component for medical use cases.

Korea linuxforum2014 html5game-sangseoklimSang Seok Lim

Html5 (games)chamsddine bouzaine

Zoomcharts @ DevClub.lvViesturs Zariņš

Building a Better Web with HTML5 and CSS3Karambir Singh Nain

#PDR15 - Pebble GraphicsPebble Technology

Hardware Acceleration in WebKitJoone Hur

New Ranking Metrics by GooglePhil Marx

WebGL For Game Development Spring 2013Tony Parisi

Power of WebGL (FSTO 2014)Verold

HTML GL - 60 FPS and amazing effects by rendering HTML/CSS in WebGL, framewor...Denis Radin

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

Html5 2da parterolando_aaron

Drupal 3D - Intro to Using Web 3D with DrupalBrian Hay

High Performance Graphics - Introduction to WebGPU - Next Generation of High ...contact14711

DevChatt: The Wonderful World Of Html5Cameron Kilgore

HTML GL - возьмите столько FPS, сколько вам нужно!CodeFest

A holistic approach to web performanceAustin Gil

IntoWebGL - Unite Melbourne 2015Ryan Alcock

Html5 Canvas and Mobile GraphicsEngin Hatay

(Js) Export your own WebGL ViewerJooinK

More from gree_tech (20)

アナザーエデンPC版リリースへの道のり〜WFSにおけるマルチプラットフォーム対応の取り組み〜gree_tech

GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介gree_tech

REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表gree_tech

The document outlines the research presentations from an internship program at GREE VR Studio Laboratory. The presentations covered topics like motion capture techniques that could be used in metaverses, generating emotive expressions from sound, and representing metaverses using augmented reality. One presentation proposed a way for users to virtually travel the world together by exploring street view locations and taking photos with their avatars.

アプリ起動時間高速化 ~推測するな、計測せよ~gree_tech

The document discusses a quality improvement project at Reality Inc. to reduce app startup time. It began with measuring startup sequences on iOS and Android to identify bottlenecks. This showed networking requests and initializing distributions were slow. Performance was then measured in user environments using Firebase and GCP tools. Startup times of over 6 seconds were found. The project aims to parallelize processes, remove unnecessary tasks, and speed up networking to reduce startup time through ongoing measurement and optimization.

長寿なゲーム事業におけるアプリビルドの効率化gree_tech

Cloud Spanner をより便利にする運用支援ツールの紹介gree_tech

This document introduces two operational support tools for making Cloud Spanner more convenient: Spanner Warming Guy and Spanner Up-Down Guy. Spanner Warming Guy is a tool that performs warmup of Cloud Spanner before releases. It can add load to Spanner through SELECT queries alone and automatically adjusts the number of SELECT bots. Spanner Up-Down Guy is a tool that auto-scales the number of nodes in Cloud Spanner. It periodically executes Cloud Functions to adjust the node count according to a pre-defined schedule or the load situation. It can gradually decrease nodes to reduce costs.

WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介gree_tech

SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現についてgree_tech

海外展開と負荷試験gree_tech

翻訳QAでのテスト自動化の取り組みgree_tech

組み込み開発のテストとゲーム開発のテストの違いgree_tech

サーバーフレームワークに潜んでる脆弱性検知ツール紹介gree_tech

データエンジニアとアナリストチーム兼務になった件についてgree_tech

シェアドサービスとしてのデータテクノロジーgree_tech

「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-gree_tech

「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話gree_tech

比較サイトの検索改善（SPA から SSR に変換）gree_tech

コードの自動修正によって実現する、機能開発を止めないフレームワーク移行gree_tech

「やんちゃ、足りてる？」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜gree_tech

法人向けメタバースプラットフォームの開発の裏側をのぞいてみた（仮）gree_tech

アナザーエデンPC版リリースへの道のり〜WFSにおけるマルチプラットフォーム対応の取り組み〜gree_tech

GREE VR Studio Laboratory「XR-UX Devプロジェクト」の成果紹介gree_tech

REALITYアバターを様々なメタバースで活躍させてみた - GREE VR Studio Laboratory インターン研究成果発表gree_tech

アプリ起動時間高速化 ~推測するな、計測せよ~gree_tech

長寿なゲーム事業におけるアプリビルドの効率化gree_tech

Cloud Spanner をより便利にする運用支援ツールの紹介gree_tech

WFSにおけるCloud SpannerとGKEを中心としたGCP導入事例の紹介gree_tech

SINoALICE -シノアリス- Google Cloud Firestoreを用いた観戦機能の実現についてgree_tech

海外展開と負荷試験gree_tech

翻訳QAでのテスト自動化の取り組みgree_tech

組み込み開発のテストとゲーム開発のテストの違いgree_tech

サーバーフレームワークに潜んでる脆弱性検知ツール紹介gree_tech

データエンジニアとアナリストチーム兼務になった件についてgree_tech

シェアドサービスとしてのデータテクノロジーgree_tech

「ドキュメント見つからない問題」をなんとかしたい - 横断検索エンジン導入の取り組みについて-gree_tech

「Atomic Design × Nuxt.js」コンポーネント毎に責務の範囲を明確にしたら幸せになった話gree_tech

比較サイトの検索改善（SPA から SSR に変換）gree_tech

コードの自動修正によって実現する、機能開発を止めないフレームワーク移行gree_tech

「やんちゃ、足りてる？」〜ヤンマガWebで挑戦を続ける新入りエンジニア〜gree_tech

法人向けメタバースプラットフォームの開発の裏側をのぞいてみた（仮）gree_tech

Recently uploaded (20)

Dev Dives: Automate and orchestrate your processes with UiPath MaestroUiPathCommunity

This session is designed to equip developers with the skills needed to build mission-critical, end-to-end processes that seamlessly orchestrate agents, people, and robots. 📕 Here's what you can expect: - Modeling: Build end-to-end processes using BPMN. - Implementing: Integrate agentic tasks, RPA, APIs, and advanced decisioning into processes. - Operating: Control process instances with rewind, replay, pause, and stop functions. - Monitoring: Use dashboards and embedded analytics for real-time insights into process instances. This webinar is a must-attend for developers looking to enhance their agentic automation skills and orchestrate robust, mission-critical processes. 👨‍🏫 Speaker: Andrei Vintila, Principal Product Manager @UiPath This session streamed live on April 29, 2025, 16:00 CET. Check out all our upcoming Dev Dives sessions at https://community.uipath.com/dev-dives-automation-developer-2025/.

#AdminHour presents: Hour of Code2018 slide deck from 12/6/2018Lynda Kane

Asthma presentación en inglés abril 2025 pdfVanessaRaudez

Mobile App Development Company in Saudi ArabiaSteve Jonas

EmizenTech is a globally recognized software development company, proudly serving businesses since 2013. With over 11+ years of industry experience and a team of 200+ skilled professionals, we have successfully delivered 1200+ projects across various sectors. As a leading Mobile App Development Company In Saudi Arabia we offer end-to-end solutions for iOS, Android, and cross-platform applications. Our apps are known for their user-friendly interfaces, scalability, high performance, and strong security features. We tailor each mobile application to meet the unique needs of different industries, ensuring a seamless user experience. EmizenTech is committed to turning your vision into a powerful digital product that drives growth, innovation, and long-term success in the competitive mobile landscape of Saudi Arabia.

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Network Security. Different aspects of Network Security.gregtap1

Big Data Analytics Quick Research Guide by Arthur MorganArthur Morgan

This is a Quick Research Guide (QRG). QRGs include the following: - A brief, high-level overview of the QRG topic. - A milestone timeline for the QRG topic. - Links to various free online resource materials to provide a deeper dive into the QRG topic. - Conclusion and a recommendation for at least two books available in the SJPL system on the QRG topic. QRGs planned for the series: - Artificial Intelligence QRG - Quantum Computing QRG - Big Data Analytics QRG - Spacecraft Guidance, Navigation & Control QRG (coming 2026) - UK Home Computing & The Birth of ARM QRG (coming 2027) Any questions or comments? - Please contact Arthur Morgan at [email protected]. 100% human made.

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

Semantic Cultivators : The Critical Future Role to Enable AIartmondano

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Buckeye Dreamin 2024: Assessing and Resolving Technical DebtLynda Kane

TrustArc Webinar: Consumer Expectations vs Corporate Realities on Data Broker...TrustArc

Most consumers believe they’re making informed decisions about their personal data—adjusting privacy settings, blocking trackers, and opting out where they can. However, our new research reveals that while awareness is high, taking meaningful action is still lacking. On the corporate side, many organizations report strong policies for managing third-party data and consumer consent yet fall short when it comes to consistency, accountability and transparency. This session will explore the research findings from TrustArc’s Privacy Pulse Survey, examining consumer attitudes toward personal data collection and practical suggestions for corporate practices around purchasing third-party data. Attendees will learn: - Consumer awareness around data brokers and what consumers are doing to limit data collection - How businesses assess third-party vendors and their consent management operations - Where business preparedness needs improvement - What these trends mean for the future of privacy governance and public trust This discussion is essential for privacy, risk, and compliance professionals who want to ground their strategies in current data and prepare for what’s next in the privacy landscape.

How Can I use the AI Hype in my Business Context?Daniel Lehner

𝙄𝙨 𝘼𝙄 𝙟𝙪𝙨𝙩 𝙝𝙮𝙥𝙚? 𝙊𝙧 𝙞𝙨 𝙞𝙩 𝙩𝙝𝙚 𝙜𝙖𝙢𝙚 𝙘𝙝𝙖𝙣𝙜𝙚𝙧 𝙮𝙤𝙪𝙧 𝙗𝙪𝙨𝙞𝙣𝙚𝙨𝙨 𝙣𝙚𝙚𝙙𝙨? Everyone’s talking about AI but is anyone really using it to create real value? Most companies want to leverage AI. Few know 𝗵𝗼𝘄. ✅ What exactly should you ask to find real AI opportunities? ✅ Which AI techniques actually fit your business? ✅ Is your data even ready for AI? If you’re not sure, you’re not alone. This is a condensed version of the slides I presented at a Linkedin webinar for Tecnovy on 28.04.2025.

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Into The Box Conference Keynote Day 1 (ITB2025)Ortus Solutions, Corp

Salesforce AI Associate 2 of 2 Certification.docxJosé Enrique López Rivera

What is Model Context Protocol(MCP) - The new technology for communication bw...Vishnu Singh Chundawat

The MCP (Model Context Protocol) is a framework designed to manage context and interaction within complex systems. This SlideShare presentation will provide a detailed overview of the MCP Model, its applications, and how it plays a crucial role in improving communication and decision-making in distributed systems. We will explore the key concepts behind the protocol, including the importance of context, data management, and how this model enhances system adaptability and responsiveness. Ideal for software developers, system architects, and IT professionals, this presentation will offer valuable insights into how the MCP Model can streamline workflows, improve efficiency, and create more intuitive systems for a wide range of use cases.

Splunk Security Update | Public Sector Summit Germany 2025Splunk

Automation Dreamin': Capture User Feedback From AnywhereLynda Kane

The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfAbi john