processing/p5.js

Textures coordinates are incorrectly applied on `.obj` models

Closed this issue · 0 comments

SableRaf commented

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

1.9.2

Web browser and version

Chrome 123.0.6312.58 (Official Build) (arm64), Safari Version 16.5 (18615.2.9.11.4), Firefox 124.0.1 (64-bit)

Operating system

macOS Ventura 13.4 and Windows 10

Steps to reproduce this

There is a regression in p5.js 1.9.2 where texture coordinates don't get correctly applied to a 3D model loaded as .obj together with an image texture.

This is likely linked to the changes made in #6710 to handle .mtl material library files alongside .obj.

Demo sketch

https://aijs-code-editor.web.app/editor?user=sableraph&project=Mario_3D_Model_test

Suggested Areas for Investigation:

Review how texture coordinates from .obj files are processed in the parseMtl() function:
https://github.com/processing/p5.js/blob/main/src/webgl/loading.js#L287

Steps to reproduce

  1. Load an .obj file using loadModel().
  2. Load a .png texture file using loadImage().
  3. Apply the texture with texture()
  4. Display the model with model()
  5. Observe that while the model loads and material colors are applied, the texture defined in the .png file is mapped incorrectly.

in p5.js 1.9.1

image

in p5.js 1.9.2

image