Comments (24)
@lucap86 important update: 0.2.1 version is released, it has 3d transforms and isFrontFace
method for them :) https://github.com/pixijs/pixi-projection/blob/master/src/proj3d/Container3d.ts#L14
from pixi-projection.
Ok, i'm stupid.; That one works
Math.sign(a[0] * a[4] - a[1] * a[3]) * Math.sign(a[8])
from pixi-projection.
no, you need to write face detection for that - the vector cross product of axises will show which one is up :)
Pixi doesn't have cull_face and cull_back yet.
Btw, I'm working on that 3d thing again, I hope it'll be ready this weekend, and you'll be able to use my face detection :)
from pixi-projection.
ty @ivanpopelyshev!
from pixi-projection.
@ivanpkpelyshev what is the condition that i should use in order to detect which face is visible?
from pixi-projection.
sign of cross-product of axises you put it.
in case of multiple containers chain - same, but look at two first columns of the resulting world transform inside projection component.
from pixi-projection.
xAxis should be
containerSprite.proj.matrix.mat3[0,1,2]
y axis
containerSprite.proj.matrix.mat3[3,4,5]
right?
i have tried this but doesnt seems to be correct
var a = containerSprite.proj.matrix.mat3
Math.sign((a[1]-a[0])(a[5]-a[3]))-((a[4]-a[3])(a[2]-a[0]));
from pixi-projection.
do you have a stack of containers or just one? no, just a[0] * a[4] - a[1] * a[3]
, cross-product on 2d plane , and maybe multply by signs of 2 and 5
from pixi-projection.
just one for now
from pixi-projection.
like that?
Math.sign(a[0] * a[4] - a[1] * a[3]) * Math.sign(a[2]) * Math.sign(a[5])
from pixi-projection.
Yes. Does it work for you?
from pixi-projection.
nope
try this examply and play with the red squares
var app = new PIXI.Application(800, 600, {backgroundColor: 0x1099bb});
document.body.appendChild(app.view);
var w = app.screen.width/2, h = app.screen.height/2;
function createSquare(x, y) {
var square = new PIXI.Sprite(PIXI.Texture.WHITE);
square.tint = 0xff0000;
square.factor = 1;
square.anchor.set(0.5);
square.position.set(x, y);
return square;
}
var squares = [
createSquare(w-150, h-150),
createSquare(w+150, h-150),
createSquare(w+150, h+150),
createSquare(w-150, h+150)
];
var quad = squares.map(function(s) { return s.position });
//add sprite itself
var containerSprite = new PIXI.projection.Sprite2d(new PIXI.Texture.fromImage('required/assets/SceneRotate.jpg'));
containerSprite.anchor.set(0.5);
app.stage.addChild(containerSprite);
squares.forEach(function(s) { app.stage.addChild(s); });
// Listen for animate update
app.ticker.add(function (delta) {
var a = containerSprite.proj.matrix.mat3;
console.log(Math.sign(a[0] * a[4] - a[1] * a[3]) * Math.sign(a[2]) * Math.sign(a[5]));
containerSprite.proj.mapSprite(containerSprite, quad);
});
squares.forEach(function(s) { addInteraction(s); });
// let us add sprite to make it more funny
var bunny = new PIXI.projection.Sprite2d(new PIXI.Texture.fromImage('required/assets/flowerTop.png'));
bunny.anchor.set(0.5);
containerSprite.addChild(bunny);
addInteraction(bunny);
// === INTERACTION CODE ===
function toggle(obj) {
}
function snap(obj) {
if (obj == bunny) {
obj.position.set(0);
} else {
obj.position.x = Math.min(Math.max(obj.position.x, 0), app.screen.width);
obj.position.y = Math.min(Math.max(obj.position.y, 0), app.screen.height);
}
}
function addInteraction(obj) {
obj.interactive = true;
obj
.on('pointerdown', onDragStart)
.on('pointerup', onDragEnd)
.on('pointerupoutside', onDragEnd)
.on('pointermove', onDragMove);
}
function onDragStart(event) {
var obj = event.currentTarget;
obj.dragData = event.data;
obj.dragging = 1;
obj.dragPointerStart = event.data.getLocalPosition(obj.parent);
obj.dragObjStart = new PIXI.Point();
obj.dragObjStart.copy(obj.position);
obj.dragGlobalStart = new PIXI.Point();
obj.dragGlobalStart.copy(event.data.global);
}
function onDragEnd(event) {
var obj = event.currentTarget;
if (obj.dragging == 1) {
toggle(obj);
} else {
snap(obj);
}
obj.dragging = 0;
obj.dragData = null;
// set the interaction data to null
}
function onDragMove(event) {
var obj = event.currentTarget;
if (!obj.dragging) return;
var data = obj.dragData; // it can be different pointer!
if (obj.dragging == 1) {
// click or drag?
if (Math.abs(data.global.x - obj.dragGlobalStart.x) +
Math.abs(data.global.y - obj.dragGlobalStart.y) >= 3) {
// DRAG
obj.dragging = 2;
}
}
if (obj.dragging == 2) {
var dragPointerEnd = data.getLocalPosition(obj.parent);
// DRAG
obj.position.set(
obj.dragObjStart.x + (dragPointerEnd.x - obj.dragPointerStart.x),
obj.dragObjStart.y + (dragPointerEnd.y - obj.dragPointerStart.y)
);
}
}
http://pixijs.io/examples/#/projection/quad-homo.js
I suppose to see -1 always when the rabbit ok t-shirt logo is flipped and 1 when is in the right side
from pixi-projection.
Thank you! I'll look at it tomorrow :)
from pixi-projection.
Hi @ivanpopelyshev any news about this?
from pixi-projection.
Testing it right now. It doesnt work, im sick, i dont know what to do. Any ideas?
from pixi-projection.
I'm sure that at a[2]=0 a[5]=0 its behaving bwrong, so i dont know how to add them to equation
from pixi-projection.
Thabk you man! I will try it tomorrow
from pixi-projection.
Question what does a[8] represent?
from pixi-projection.
i guess that's a coefficient for whole matrix that we can divide everything on it. When I take vector (dx,0,1) and multiply by matrix, i get dx * (a[0] , a[1], a[2]) + (a[6], a[7], a[8])
, and we have to divide everything by dx * a[2] + a[5]
to make actual 2d vector. I take dx infinite small and it leaves only (a[0], a[1]) / a[8]
. That's why a[8] sign is important.
from pixi-projection.
Hi @ivanpopelyshev great news!!!
thank you for the update
just a question.
you have provided the method to convert a supported object to 2d/3d
why not also toCamera3d?
from pixi-projection.
Because camera3d does not have corresponding element in pixi. Why do you need it?
from pixi-projection.
Ok but what if i already have a pixi container that i want to convert in a camera3d?
In the end a camera3d is an enhanced pixi3d container
from pixi-projection.
write your own conversion method. assign all the properties for camera (far, near, focus), add projection, put certain values in projection
from pixi-projection.
or create camera3d based on that container and move all the children there
from pixi-projection.
Related Issues (20)
- Pixi Projection for Graphics HOT 3
- Cannot read properties of undefined (reading 'start') HOT 2
- wrong type for Container3d : ObservablePoint3dĀ HOT 1
- typo
- orthographic camera projection
- 0.4.4 spine support HOT 4
- Importing the plugin (webpack) HOT 4
- IEuler typea need fix and to be replace by data point.
- The bug in 2D Plane
- PixiJS Deprecation Warning HOT 1
- Pixi.js v7.x & pixi-spine compatibility HOT 8
- An error occurs when using Assets.add
- README.md links broken HOT 1
- Pixi 6.1.2 - Uncaught TypeError: Cannot read property 'start' of undefined HOT 4
- TilingSprite works in isometric mode but not in perspective mode HOT 5
- Bunnies in the sky HOT 3
- pixi-projection with sprite elevations HOT 20
- How can I decide which diagonal to use ? HOT 4
- Mesh in 2d projections
- Where can i find the docs ?
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 pixi-projection.