Comments (10)
Thank you, it is merged, I will test it when I go back to home.
-edit-
Yes, it works now. The white rect is not centered on zoom change, but this is not important, because the model and pps works as they should.
from pixi3d.
Hey, thanks for this! Is the standard methods worldToScreen/screenToWorld not working when resolution is above 1?
from pixi3d.
Yes, the standard methods works only for resolution 1, that's why I am sending you the solution.
The easiest way to replicate the bug is to zoom in/out the page - this makes the pixi renderer change its resolution, so try it.
-edit-
I am not sure if this is related, but the PostProcessingSprite scale behaves strangely, when you resize the page/container. You might wish to check if this fixes this problem too (I abandoned the PPS class usage completely for this reason + I think it is eating too much resources, probably because of the frequent [pre]render event calls).
from pixi3d.
I included your fixes in the dev branch, please check if this resolves the issues you had with it.
Could you please give some more details about PostProcessingSprite? The only thing happening in prerender is that the PPS is being resized (but only if you didn't provide a size yourself) - by default it want to be fullscreen. It could be an issue though that it's not resizing to correct resolution if above 1.
from pixi3d.
I still need to pass the viewSize arg to the worldToScreen and screenToWorld methods. If I omit it, it does not work.
This is really strange, because I can see that you are now using the renderer.screen property, which gives the correct width and height, i.e it takes into account the resolution. The following code works:
public static worldToScreen(
x: number,
y: number,
z: number = Camera.main.z
): Point {
let worldCoordinates = Camera.main.worldToScreen(x, y, z, undefined, {
width:
App.instance.renderer.screen.width,
height:
App.instance.renderer.screen.height,
});
return worldCoordinates;
}
The following does not work:
public static worldToScreen(
x: number,
y: number,
z: number = Camera.main.z
): Point {
let worldCoordinates = Camera.main.worldToScreen(x, y, z);
return worldCoordinates;
}
As you can see we are using a singleton App class, which extends the PIXI.Application class. I am not sure if this could be a problem somehow.
I guess the PPS will behave the same way, so let's first fix this issue and I will test and give you more feedback about it.
-edit-
About the App instance. Both App.instance.renderer.screen and Camera.main.renderer.screen returns the same rectangle.
The following code works:
public static screenToWorld(
x: number,
y: number,
model: Model
): ObservablePoint3D {
let worldCoordinates = Camera.main.screenToWorld(
x,
y,
Camera.main.z - model.z,
undefined,
Camera.main.renderer.screen
);
return worldCoordinates;
}
Really strange!
-- another edit ---
About the PPS. It seems I must omit the width and height at its constuctor in order to make it scale correctly, so I guess I was using your class incorrectly. Sorry about that. Unfortunately the PPS does not position itself correctly, when the resolution differs from 1. Please see the code and comments below.
let resource = PIXI.Loader.shared.resources["test_model"];
let asset = (<any>resource).gltf as glTFAsset;
let model = Model.from(asset);
// Important. Omit the pps width and height args, otherwise the scale will be weird.
let pps = new PostProcessingSprite(Camera.main.renderer, {
objectToRender: <any>model,
});
// Computing the screen center point for any resolution
let pos = Model3D.screenToWorld(
Camera.main.renderer.screen.width /
Camera.main.renderer.resolution /
2 ,
Camera.main.renderer.screen.height /
Camera.main.renderer.resolution /
2,
model
);
// The pps position will be set to the center of the screen
// If the resolution equals 1, the resize works perfectly - the model stays always at the screen center.
// If the resolution differs from 1, the resize does not work as it should (model does not stay at the screen center)
model.position.set(pos.x, pos.y, pos.z);
App.instance.stage.addChild(pps);
It seems I should prepare a test project for you to test this stuff easily. I got a feeling our game does something fishy with the renderer sizes on each window resize and your api does not like this much.
from pixi3d.
Would be great help if you could reproduce these issues in a simple example.
from pixi3d.
And about PPS, if you give it a width and height where the aspect ratio differs from the camera aspect ratio it will look wrong. The objects rendered to the PPS need to use a camera which have the same aspect ratio as the PPS. This is handled automatically if you donβt give it a width and height.
from pixi3d.
Yep, my bad about the PPS width and height, thank you for the clarification.
I made a test repo, everything is described at index.ts.
https://github.com/djlastnight/Pixi3DCameraTests
from pixi3d.
I created a PR which should fix the issues: djlastnight/Pixi3DCameraTests#1
from pixi3d.
I guess we could close this now, thank you again ;)
from pixi3d.
Related Issues (20)
- Sprite3D zIndex is not applied to internal ProjectionSprite zIndex HOT 3
- Error: Extension class must have an extension object HOT 4
- vec3/planes changes errors HOT 2
- Unlit mesh color is brighter than it should be HOT 9
- iOS 16.4 rendering issue HOT 3
- Compile errors when using @pixi/math-extras HOT 3
- 3d Model and ImageBasedLighting visibility issue HOT 5
- Render shadow on "invisible" plane. HOT 5
- Can't load GLTF with shape-keys animations HOT 6
- Textures smaller than 200x200 pixels do not render with Sprite3D HOT 15
- Memory not cleared when destroying models HOT 38
- Not an issue, just greetings! HOT 1
- Boilerplate from create-pixi3d-app fails with PixiJs 7.2.4 HOT 2
- render point clouds HOT 13
- Possible to trim CompositeSprite to make it only fit the rendered object? HOT 14
- Is there a use case for pixi v7? The following code will not work properly in v7 HOT 1
- Support of LODs and map level geometry culling HOT 2
- Crashes with "Unrecognized source type to auto-detect resource" when imported in NodeJS HOT 6
- Crashes with "Could not find dependency: '@pixi/<it varies>' relative to '/node_modules/pixi3d/dist/cjs/pixi5/pixi3d.js" HOT 4
- Support for PixiJS 8 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pixi3d.