Skip to content
This repository was archived by the owner on Nov 17, 2024. It is now read-only.
This repository was archived by the owner on Nov 17, 2024. It is now read-only.

Repeating background gets pixelated/deformed after each moving iteration on mobile (web build) #535

@monolith-pi

Description

@monolith-pi

Describe the bug
When using a moving repeating background (for creating a horizontal parallax effect), after each iteration the quality of the repeating background decreases and it gets pixelated. This issue only occurs on mobile web browser and doesn't happen when using desktop web browser.

To Reproduce
Steps to reproduce the behavior:

  1. Add a background with repeat-x (or repeat) property
  2. Move the camera horizontally each frame (for ex. following the player character in an endless runner)
  3. Run the project on mobile web browser
  4. After each iteration the quality of repeating background gets worse

Expected behavior
The quality of repeating background should not get worse after each iteration. (similar to desktop web browser)

Possible Solution
Could be related to shader precision

System information report
Ct.js v5.1.0 😽 (packaged)

NW.JS v0.72.0
Chromium v109.0.5414.87
Node.js v19.3.0
Pixi.js v7.3.2

WebGL available
WebGL vendor Google Inc. (AMD)
WebGL renderer ANGLE (AMD, AMD Radeon RX 6600M Direct3D11 vs_5_0 ps_5_0, D3D11)
OS win32 x64 // Windows_NT 10.0.22631

Screenshots (recommended)
Pixelated clouds indicate the bug
photo_2024-08-01_08-06-56

Example project (strongly recommended)
JettyCat (JavaScript) example project

Metadata

Metadata

Assignees

No one assigned

    Labels

    good first issueGood for newcomersscope:libThis affects core ct.js librarytype:bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions