search

processing / p5.js

p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs —
http://p5js.org/
GNU Lesser General Public License v2.1
21.52k stars 3.3k forks source link

Textures coordinates are incorrectly applied on `.obj` models #6921

Closed SableRaf closed 6 months ago

SableRaf commented 6 months ago

Most appropriate sub-area of p5.js?

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 https://github.com/processing/p5.js/pull/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