Jonathan Lalou's Blog

Posts Tagged ‘WebGL’

In today’s multi-device world, providing a consistent and high-quality user experience across various platforms is a significant challenge for software companies. For online gaming and betting platforms like Winamax, reaching users on desktop, web, and mobile devices is paramount. Anthony Maffert and Florian Yger from Winamax shared their insightful experience report detailing the company’s ambitious journey to unify their frontend applications onto a single cross-platform engine. Their presentation explored the technical challenges, the architectural decisions, and the concrete lessons learned during this migration, showcasing how they leveraged modern web technologies like JavaScript, React, and WebGL to achieve a unified codebase for their desktop and mobile applications.

The Challenge of a Fragmented Frontend

Winamax initially faced a fragmented frontend landscape, with separate native applications for desktop (Windows, macOS) and mobile (iOS, Android), alongside their web platform. Maintaining and developing features across these disparate codebases was inefficient, leading to duplicated efforts, inconsistencies in user experience, and slower delivery of new features. The technical debt associated with supporting multiple platforms became a significant hurdle. Anthony and Florian highlighted the clear business and technical need to consolidate their frontend development onto a single platform that could target all the required devices while maintaining performance and a rich user experience, especially crucial for a real-time application like online poker.

Choosing a Cross-Platform Engine

After evaluating various options, Winamax made the strategic decision to adopt a cross-platform approach based on web technologies. They chose to leverage JavaScript, specifically within the React framework, for building their user interfaces. For rendering the complex and dynamic visuals required for a poker client, they opted for WebGL, a web standard for rendering 2D and 3D graphics within a browser, which can also be utilized in cross-platform frameworks. Their previous experience with JavaScript on their web platform played a role in this decision. The core idea was to build a single application logic and UI layer using these web technologies and then deploy it across desktop and mobile using wrapper technologies (like Electron for desktop and potentially variations for mobile, although the primary focus of this talk seemed to be the desktop migration).

The Migration Process and Lessons Learned

Anthony and Florian shared their experience with the migration process, which was a phased approach given the complexity of a live gaming platform. They discussed the technical challenges encountered, such as integrating native device functionalities (like file system access for desktop) within the web technology stack, optimizing WebGL rendering performance for different hardware, and ensuring a smooth transition for existing users. They touched upon the architectural changes required to support a unified codebase, potentially involving a clear separation between the cross-platform UI logic and any platform-specific native modules or integrations. Key lessons learned included the importance of careful planning, thorough testing on all target platforms, investing in performance optimization, and managing the technical debt during the transition. They also highlighted the benefits reaped from this migration, including faster feature development, reduced maintenance overhead, improved consistency across platforms, and the ability to leverage a larger pool of web developers. The presentation offered a valuable case study for other organizations considering a similar move towards cross-platform development using web technologies.

Links:

• Anthony Maffert: https://www.linkedin.com/in/anthonymaffert/
• Florian Yger: https://www.linkedin.com/in/florianyger/
• Winamax: https://www.winamax.fr/
• Devoxx France LinkedIn: https://www.linkedin.com/company/devoxx-france/
• Devoxx France Bluesky: https://bsky.app/profile/devoxx.fr
• Devoxx France Website: https://www.devoxx.fr/

Lecturer

Martin Gorner is passionate about science, technology, coding, and algorithms. He graduated from Mines Paris Tech and spent early years in ST Microelectronics’ computer architecture group. For 11 years, he shaped the eBook market via Mobipocket, which became Amazon Kindle’s software core. Joining Google Developer Relations in 2011, he focuses on entrepreneurship outreach.

Abstract

Martin Gorner’s lecture surveys HTML5’s four animation technologies: CSS3 and SVG for declarative approaches, Canvas and WebGL for programmatic ones. Through live demonstrations and explanations, he elucidates their strengths, limitations, and applications, emphasizing fluidity for user interfaces akin to mobile apps. The presentation, itself HTML5-based, covers transitions, transformations, and shaders, offering practical insights for enhancing web experiences.

Declarative Animations with CSS3: Simplicity and Power

Gorner introduces CSS3 as straightforward: the ‘transition’ property interpolates between states when a CSS value changes. A JavaScript snippet swaps classes (‘begin’ to ‘end’), shifting position and rotation; specifying ‘transition: 1s’ yields smooth 60fps animation.

For continuous loops, ‘animation’ references a ‘@keyframes’ block defining CSS at percentages (0%, 10%, etc.). Over 3 seconds, it interpolates, applying left shifts, scales, and rotations.

Animatable properties include border thickness, opacity (for fades), and geometric transformations via ‘transform’: rotate, scale, skew (distorting axes). Default easing provides appealing velocity profiles; ‘ease-in-out’ accelerates/decelerates naturally.

Prefixes (e.g., -webkit-) are needed for non-standardized specs; tools like prefixfree.js or SASS automate this. CSS3 suits simple, event-triggered or looping effects but lacks complex paths or programmatic control.

Enhancing Vector Graphics: SVG’s Declarative Animation Capabilities

SVG, for vector drawings, supports declarative animations via tags. Paths define curves; animations alter attributes like ‘d’ for shapes or ‘transform’ for motion.

Keyframes in SVG mirror CSS but embed in elements. Motion follows paths with , rotating optionally. Colors animate via ; groups allow collective effects.

SMIL timing enables sequencing: ‘begin’ offsets, ‘dur’ durations, ‘repeatCount’ loops. Events trigger via ‘begin=”element.click”‘. Interactivity shines: JavaScript manipulates attributes for dynamic changes.

SVG excels in scalable graphics with paths, gradients, and masks but remains declarative, limiting real-time computations. Browser support is strong, though IE lags.

<svg width="400" height="200">
  <circle cx="50" cy="50" r="40" fill="red">
    <animate attributeName="cx" from="50" to="350" dur="2s" repeatCount="indefinite"/>
  </circle>
</svg>

This code animates a circle horizontally, illustrating SVG’s embeddability in HTML5.

Programmatic 2D Animations: Canvas for Frame-by-Frame Control

Canvas offers a bitmap context for JavaScript drawing. ‘requestAnimationFrame’ schedules redraws at 60fps, clearing and repainting each frame.

Basic shapes (rectangles, paths) fill or stroke; images draw via ‘drawImage’. For physics, libraries like Box2D simulate collisions, as in a bouncing ball demo.

Compositing modes (e.g., ‘source-over’) layer effects; shadows add depth. Text renders with fonts; patterns tile images.

Canvas suits games or simulations needing calculations per frame, like particle systems. However, it’s bitmap-based, losing scalability, and requires redrawing everything each frame, taxing performance for complex scenes.

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'blue';
  ctx.fillRect(x, y, 50, 50); // Draw moving rectangle
  x += 1; // Update position
  requestAnimationFrame(animate);
}
animate();

This snippet moves a rectangle, demonstrating frame updates.

Diving into 3D: WebGL’s Programmatic Power with Shaders

WebGL, on Canvas’s ‘webgl’ context, leverages GPU via OpenGL ES. Setup involves shaders: vertex (positioning) and fragment (coloring) in GLSL.

A simple triangle requires vertex buffers, shader compilation, and drawing with ‘drawArrays’. Matrices handle transformations; perspective projection creates 3D illusions.

Textures map images; lighting (Lambert, Phong) computes via normals. Techniques like normal mapping simulate bumps; environment mapping fakes reflections using cube maps.

Libraries like three.js abstract complexities: ‘new THREE.Mesh’ creates objects with materials. Demos show textured, illuminated models without writing shaders.

WebGL enables high-performance 3D, ideal for visualizations or games, but demands graphics knowledge. Browser support grows, though mobile varies.

const gl = canvas.getContext('webgl');
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
  attribute vec4 position;
  void main() {
    gl_Position = position;
  }
`);
gl.compileShader(vertexShader);
// Similar for fragment shader, then link program

This initializes a vertex shader, foundational for WebGL.

Choosing the Right Tool: Contexts and Implications for Web Development

Gorner compares: CSS3 for simple declarative effects; SVG for vector precision and interactivity; Canvas for 2D programmatic needs; WebGL for immersive 3D.

Mobile apps set expectations for fluid UIs; HTML5 meets this sans plugins. Prefixes persist but tools mitigate. Performance favors GPU-accelerated methods.

Workshops on AppSpot cover CSS3, Canvas with Box2D, and WebGL, enabling hands-on learning.

In summary, HTML5’s animations enhance intuitiveness, with choices suiting project scales and requirements.

Relevant Links and Hashtags

Links:

• Video of the lecture
• Slides
• Martin Gorner on LinkedIn