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.4k stars 3.28k forks source link

ortho() rendering blank canvas #6755

Closed wagedu closed 7 months ago

wagedu commented 7 months ago

Most appropriate sub-area of p5.js?

p5.js version

1.9

Web browser and version

all

Operating System

all

Steps to reproduce this

Steps:

  1. Add ortho()
  2. Nothing is displayed
  3. Add orbitControl. Still nothing displayed, until one "uses" it (ie. scroll or drag) Then the content is rendered

Snippet:


function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  background(220);
  orbitControl();
  ortho();
  sphere(100)
}
Studycode001 commented 7 months ago

Can I work on this issue?! @wagedu

Vishal2002 commented 7 months ago

@wagedu Bro when I am running the given code I get the spehere with grid.Can you explain what is the issue ?

Screenshot 2024-01-21 163931
davepagurek commented 7 months ago

I think this may be due to the default near/far values of ortho not having been updated along with some camera changes in 1.9. I believe this has been addressed in https://github.com/processing/p5.js/pull/6639, maybe someone can confirm whether this is reproducible with the recent beta build?

wagedu commented 7 months ago

@Vishal2002 Mate, does it appear BEFORE you interact?

To me it doesn't UNTIL interaction. Attached it not appearing in Firefox & Safari, just in case.

Screen Shot 2024-01-21 at 15 16 29 Screen Shot 2024-01-21 at 15 18 04

wagedu commented 7 months ago

Also, @davepagurek maybe I should be asking this on the Discord but... do you know of any workaround to make this work in the current 1.9? I tried setting/unsetting a custom camera without luck. Thanks!

davepagurek commented 7 months ago

Here are the new default values: https://github.com/diyaayay/p5.js/blob/dc065a2b99fe8110fc617da5682620cc1f444fed/src/webgl/p5.Camera.js#L908-L915

Maybe try setting these manually in your ortho call instead of omitting the parameters? i.e.:

ortho(-width/2, width/2, -height/2, height/2, 0, max(width, height) + 800)
wagedu commented 7 months ago

@davepagurek , thanks, now it works perfectly.

Previously I had tried with the values given in the reference, where the "far" value is 500, instead of max(w,h) + 800 And also has the top/bottom signs inverted

Thanks a lot!

davepagurek commented 7 months ago

Good point, I think the translate(0,0,500) in the example is maybe misleading, as it is compensating for the far value. I'll see if I can update that for this next release.