kevinroast / phoria.js Goto Github PK

How can i make 2d canvas image and put it on this image, the tiles..

What's all this then? - phoria.js is a JavaScript library for simple 3D graphics on a canvas 2D renderer. It does not use WebGL - so works on any device that can display HTML5 Canvas - so all modern browsers and including iOS and Android phones! It uses the excellent vector and matrix maths library gl-matrix.js.

gl-matrix uses WebGL, obviously.

I tried this, but it just translates its position. Which i don't want

myEntity.translate(myEntity.matrix, myEntity.matrix, [1,1,1]); <- That array is the position i want to set.

Also myEnitity is created like so

//Create the model
		var c = Phoria.Util.generateUnitCube();
		myEntity = Phoria.Entity.create({
			points: c.points,
			edges: c.edges,
			polygons: c.polygons
		});
//Push the textures
		for (var i=0; i<6; i++)
		{	
			myEntity.textures.push(bitmaps[i]);
			myEntity.polygons[i].texture = i;
		}	

While the test2i.html linked on your website works, I can't for the life of me get an obj file to render locally. Viewing the included test2i.html does not work for me, nor does copying and pasting the source code off of your working webpage (which should theoretically be identical to the included test2i.html file).

Hi, when I put texture on mesh and render it without lightsource something weird happened on the edge of the sphere. Please help.

What is difference beetween points and edges? How to draw simple path with y:0 on canvas?

I'm new to 3d graphics so I'm not sure if this is a bug or a question. I took your one of your rotating example files (test6.html) removed the objects and added a simple square.

var a = Phoria.Entity.create({
                 points: [{x:-1, y:1, z:1}, {x:1, y:1, z:1}, {x:1, y:-1, z:1}, {x:-1, y:-1, z:1}],
                 edges: [{a:0,b:1},{a:1,b:2}, {a:2,b:3}, {a:3,b:0}],
                 polygons: [{vertices:[0,1,2,3]}],
                 style: {
                     drawmode: "solid"
                  }
              });
            scene.graph.push(a);

(See https://gist.github.com/jasonparallel/7d6c1ed76e5114df2961)

When viewing this square appears for half the rotation but appears to be transparent for the other 180 deg when the backside should be visible.
Reversing the order of the vertices seams to make the back side visible and front transparent

polygons: [{vertices:[3,2,1,0]}],

Combining both of these polygons shows the square for the entire 360 deg.

polygons: [  {vertices:[0,1,2,3]},{vertices:[3,2,1,0]}],

(See https://gist.github.com/jasonparallel/9116fe98e38adb5b5d1a)

Is this a bug that the polygon is only visible from one side or the expected behavior? If it is expected is there a way to set which side should be the visible one?

I also just wanted to let you know the phoria looks like an amazing library so far

Not sure how to resolve this one. Hopefully you can shed some light on this..

If you set a texture on to a plane:

 var plane = Phoria.Util.generateTesselatedPlane(6,6,0,2400);
 var plane = Phoria.Entity.create({
 points: plane.points,
 polygons: plane.polygons,
 style: {
     doublesided: false,
     shademode: "wireframe",
     objectsortmode: "back",
     texture: 0

      }
 });

put the camera sideways on to it, and it distorts the texture.

The original texture:

Any thoughts? workarounds?

Thanks for your great work Kevin! Ive enjoyed playing with the lib!

Im struggling to find how to get World coords as shown in the Debug info.
Ive looked for hours but just can seem to work out where Phoria.Debug get this value from?

in renderPolygon method of the canvasRender class:

    // clip of poly if all vertices have been marked for clipping
    var clippoly = 1;
    for (var i=0; i<vertices.length; i++) {
        // console.log(clip)
        clippoly &= clip[vertices[i]];
    }
    if (clippoly) return;

there are cases that all vertices have been marked but still be visible in the canvas:

I think it's a hack that i add the condition whether 4 corners of canvas are in the current path or not:

        // HACK: all vertices have been marked but still be visible nearby the 4 corners of the canvas
        var width = this.canvas.width;
        var height = this.canvas.height;
        if(ctx.isPointInPath(0, 0) || ctx.isPointInPath(0, height)
             || ctx.isPointInPath(width, 0) || ctx.isPointInPath(width, height)){
            clippoly = 0;
        }
        if (clippoly) return;

do you have some more elegant solutions?

I want to simulate points to show an animated arc formed by points. Also is there any way to arrange polygons in a shaped that resemble that of a human body? I am taking points(x,y,z) from audrino controller accelerometer and gyro sensors.

Hi,
I have not been able to create an object with 2D image on it. Particularly this is not an issue, but a question. As the documentation is not yet available, It would be very helpful if I get some useful links or reference to Code in the library that can help me to create 2D image based objects being rendered on the Scene.

How might I enable parallel projection?
I would like like to be able to render things in isometric.

I've been able to make Phoria work inside my AMD based workflow but only exploiting some quirks -- the culprit was mainly the bundled version of gl-matrix, actually, and its usage of global namespace; newer versions seem to have introduced AMD though and an upgrade should fix the issue. Anyway it would be awesome if you introduced support for AMD in Phoria.

Keep up the great work. :)

Greetings!

Using latest Phoria build i have noticed strange white circle that appears from time to time on the figure during rotating. Have not noticed the pattern, but seems like circles appear on the same line.
Here the link to page with that figure:
http://smart-test.com.ua/minecraft_clean/test_point.php

Hi Kevin,

Love your work with phoria.js !
I am wanting to put a 3d graphical widget on the canvas that contains text
or text with font controls, do you have any examples or recommendations
on how to do this ?

Cheers
Dave.

I created an object in Blender and exported it as a Wavefront obj and I can import it with phoria, but the object is rendered as a solid color. Is there a way to include a Wavefront materials file?

How I can show high precision values on phoria canvas

Etc.
points.push({x:52.68409940200493,y:0,z:8.370766639709473},{x:52.78118340200493,y:0,z:8.372654914855957},{x:52.99908340200493,y:0,z:8.373513221740723});

Is there any way to do that?

Great Library Kevin. I have just begun cracking the surface:

I noticed:

style: {
specular: 0,
drawmode: "solid",
shademode: "lightsource", //gouraud
fillmode: "inflate"
}

<< that we have some options there. Is this the preferred path to getting normal mapping working?

I have recently found "Sprite Lamp" for 2D normal mapping of sprites any chance this could tie into the library in any easy way? Any tips or starter points on getting normal mapping working would be great! Thanks.

When i delete a object in the scene I get "cannot read property 'disabled' of undefined". How can i delete an object?

Method i use:

delete scene.graph[7];

Thanks!

How I can make grid to be like ground and then I want to push coordinates as points to make polyline?

Hi,

I would like to know the process or a suggestion on how to create an empty father entity. I'm creating a card game, and since I made an extra object to simulate shadows, I need a father container so I can animate it without having extensive loops/arrays animating in sync the cards and their shadows. I'm going to try create an entity without desc, but not hoping to succeed on this, so if you could spare some of your time to help, would be much appreciated!

Update:

I was able to create the empty entity, and add the childrens, but I have a bug: whenever I apply a rotation in any axis, the children rotate on their own pivots. Any Idea why this is happening?

a snippet of code of what I'm doing to rotate:
if(entitycardsarray[0] !== null){ entitycardsarray[0].onScene(function (){ entitycardsarray[0].translateZ(0.0001).rotateZ(-Math.PI*0.00000045); }); }
and then the way I create the card container and push childrens:

` function drawcard()
{
var empty = Phoria.Entity.create({
points: [ {x:0,y:0,z:0} ],
style : {
drawmode: "point",
shademode: "callback",
geometrysortmode: "none",
objectsortmode: "front" // force render on-top of everything else
}
});
var c = Phoria.Util.generateUnitCustomCube(1,0.001,2);
var d = Phoria.Util.generateUnitCustomCube(1,0.001,2);
// var c = Phoria.Util.generateUnitCustomCube(3,1,7);
var cube = Phoria.Entity.create({
points: c.points,
edges: c.edges,
polygons: c.polygons,
style: {
color: [255,255,255],
diffuse: 1.5,
specular: 16,
emit: -1,
texture: 0
}
});
var shadowcube = Phoria.Entity.create({
points: d.points,
edges: d.edges,
polygons: d.polygons,
style: {
color: [10,10,10],
drawmode: "solid",
shademode: "plain",
opacity: 0.4
}
});
shadowcube.translateY(-1);
shadowcube.translateX(0.4);
shadowcube.translateZ(-0.6);

cube.textures.push(cardmaps[0]);
cube.textures.push(cardmaps[1]);
cube.polygons[4].texture = 1;
cube.polygons[5].texture = 0;

empty.children.push(cube);
empty.children.push(shadowcube);

entitycardsarray.push(empty);
scene.graph.push(empty);
} `

thanks in advance

Im getting this error message involving normal data and im not sure how to fix it.
phoria-entity.js:343 Uncaught TypeError: Cannot read property 'x' of undefined
at Phoria.Entity.generatePolygonNormals (phoria-entity.js:343)
at Function.create (phoria-entity.js:256)

Thanks

are the faces and UVs winded clockwise or counter-clockwise?
for that matter, is it possible to create faces that are textured on both sides?

i've had some...annoyances getting textures to render as expected

not that i've really touched phoria terribly much since i discovered it
tbh, no idea if this will be replied to...

The desc offset values are initialized, but never used.

Hi, I get from GPS signal coordinates (etc. 44.3456, 23.876 etc. ... ...). How I can show it on the ground? Also how I can make ground bigger (I dont want to see edges) ?

I want to use your library to draw route - to make some kind of navigation app.

p.s. Really good html5 library

I Add the lights but the color of the light change the color of the wireframe cubes. I want to have cubes with a color not dependent of color of the ligths Thanks!!

So, i've observed Phoria prefers counter-clockwise vertex orders (at least in polygons...)
So, with that in mind, what is the proper way to do this so I don't flip or rotate my textures on the models?

And likwise, what if I wanted to invert a face/poly or two to create the interior walls of a room?

Last I checked, vertex order DOES matter when UV-mapping, as does the U,V order.

I kinda had to change my approach with my geometry generators, because the vertex order was causing things not to render... (besides x/z-rotating any type of object made of planes is kinda annoying...) I've been making a few properly 3d objects, so I can't manage flipping those around. However, I'm now worried if I attempt to go and texture the 'fixed' geometry, it's not going to look right.

I could maybe provide some examples, but I'd have to alter/remove textures since I'm using stuff ripped/dumped from various games, as I tend to experiment with something that's already made.

I set up something by using the code from test0 with the code from test5. My application is to get something that looks like this: https://frdcsa.org/~andrewdo/writings/homeless-story/IEM.jpg

The image starts out somewhat highly distorted, but when I move the camera forward the center of the image moves to the right. I've included links to code and screenshots.

https://frdcsa.org/~andrewdo/writings/homeless-story/sample-index.tt

https://frdcsa.org/~andrewdo/writings/homeless-story/sample-bug-1-2.jpg
https://frdcsa.org/~andrewdo/writings/homeless-story/sample-bug-2-2.jpg

You can notice this same behavior (less severely) if you move the camera around on test5.

Thanks, I have very little experience with 3d graphics so I could be doing something wrong. TY.
Andrew

Bonjour

Test0r.html with mouse events is ok on firefox / windows 10 / mpman tablet.

But on android with chrome or firefox , KO

Exists one trick ?

Regards

hi !

Congrulation for your amazing project !

Will it be possible in a future version of shading manage ?
Currently if a cube hides another cube relative to a spot hidden then the cube is illuminated as if the other cube does not exist ....

Qeustion is also here: http://stackoverflow.com/questions/27876633/draw-google-map-coordinates-on-html5-3d-canvas

How I can show this coordinates on 3d phoria canvas:

{"zoom":14,"tilt":0,"mapTypeId":"hybrid","center":{"lat":52.68406891239779,"lng":8.391550154644376},"overlays":[{"type":"polyline","title":"","content":"","strokeColor":"#000000","strokeOpacity":1,"strokeWeight":3,"path":[{"lat":"52.68408340200493","lng":"8.370766639709473"},{"lat":"52.67554942424349","lng":"8.372654914855957"},{"lat":"52.67528921580262","lng":"8.373513221740723"},{"lat":"52.6759657545252","lng":"8.374114036560059"},{"lat":"52.682574466310314","lng":"8.37256908416748"},{"lat":"52.68356308524067","lng":"8.373942375183105"},{"lat":"52.68293869694087","lng":"8.375487327575684"},{"lat":"52.67685044320001","lng":"8.376259803771973"},{"lat":"52.6756535071859","lng":"8.379607200622559"},{"lat":"52.676017795531436","lng":"8.382096290588379"},{"lat":"52.68101344348877","lng":"8.380722999572754"},{"lat":"52.68351105322329","lng":"8.383641242980957"},{"lat":"52.68174192774848","lng":"8.387846946716309"},{"lat":"52.67674636310936","lng":"8.388705253601074"}]}]}

Also what is edges? I understand points, but what is edges?

it seems that Phoria's claim of being WebGL-free is at odds with its dependency on the WebGL-backed vector/matrix lib, glmatrix.

maybe this should be clarified?

thanks!

Can you make this into a bower component and add it to it's directory moving forward?

Thanks!

Dear @kevinroast please, if possible, could you share your plans on phoria.js?

I have some code based on it and currently trying to understand how to proceed.

Hi

Thanks so much for the awesome work!! I would like to ask if it is possible to add colors to each polygon.

Regards
Tey

Hi
First of all, thanks for Phoria.js - i'm having a great time playing with it.

I have stumbled across a bit of a problem and I'm not sure if it is fundamental, or just me misapplying the script library. I have two separate entities (essentially a ring and a cylinder) with the cylinder inside the ring. However, the Z-ordering stage in modelView() only does the Z-ordering for each object, with the result that parts of the ring "behind" the cylinder appear in front: see http://www.astro.ljmu.ac.uk/~amn/PhoriaTest/ltalltest.html

Is there anything that can be done to create suitably rendered nested object like this?

Many thanks
Andy

Hi, This is not a issue but a question.
How to rotate an image around its own centre rather than the origin. What i am trying to do is to make a ball image move along Z axis, and i want it to rotate clockwise/anti-clockwise around its own centre while moving forward. Currently when i apply rotateY() to it, the ball travels forward without rotating along its centre but making a curved path along Y axis. Please help me to resolve this issue.
Thanks!

Hello, just found this engine and it looks amazing. I have several questions about the framework, and I appreciate any feedback.

• In some areas of the code, I noticed it creates a function within a function (like the scene.modelView creates a function fnProcessEntities). Isn't this poor performance? Should this function be outside of the modelView method?
• In the same scene.modelView method, I notice at the beginning it uses some of the gl-matrix methods vec4.fromValues, which basically creates a new object every time this called? Couldn't these be some property which could be updated instead?
• Hopefully this last one Q isn't a tl;dr... In my game I'm creating a large plane (1024x1204) with 12 vertical and horizontal segments and a texture. The way I have the camera set up looks at this plane from an isometric view. The plane's texture is bit jaggy (kind of expected), but I don't want to simply increase the segment count. The reason I don't want to is because I see in the scene.modelView method that it loops through each vertex and does some matrix 4 calculations. A very heavy process. Do you know if this can be optimized?

Thanks in advance for your time and answers :)

It is a bit confusing that the roles of x and y are switched, with respect to the standard convention that x cross y is z.

Hi,
I am trying to make a game in which ball gets bounced and fall into a bin. The position of the bin to appear is random. Is there a way i can move my ball entity to jump and land based on the dynamic coordinates of bin. If suppose i know the direction and distance of the bin, how can i make the ball to move such that it appears that ball falling into the bin. In Three.js, this was achieved by changing position.x, position.y and position.z. How to achieve this in phoria.js?

Hello, i'm working on function to parse .obj file, but have some problems.

"Cannot read property '2' of undefined phoria-util.js:324"
This is sortPolygons method, but I don't know what i do wrong

If you are interested:

file_url - is linkt to obj file on the server, obj have only triangles

function loadModelFromURL(file_url){
        var obj = { 'vertex': [], 'face': [] };

    $.get(file_url, function(data) {      
        var lines = data.split('\n'); // split line by line
        for(var i = 0;i < lines.length;i++){
             var line = lines[i].split(' ');

           if(line[0] == 'v'){
               obj.vertex.push({'x': parseFloat(line[1]), 'y': parseFloat(line[2]), 'z': parseFloat(line[3])});
           }else if(line[0] == 'f'){

              var face = lines[i].split(' ');

              face.splice(0, 1); // remove "f"

              if(face.length == 3){
                   var vertices = [];

                   for(var j = 0;j < face.length;j++){
                        vertices.push(parseInt(face[j].split('/')[0])); 
                   }

                   obj.face.push({'vertices': vertices});

              }else{
                  alert('Oops.');
              } 
           }
        }
    });
    return  obj;        
}

and then i create new entity like this:

var topBall = loadModelFromURL(link_to_file);

var top_cylinder = Phoria.Entity.create({
      points: topBall.vertex,
      polygons: topBall.face,

      style: {
         color: [200,200,200],
         drawmode: "solid",
         fillmode: "inflate"
      }
   });

Hi

Thank you for the awesome work again.
Is there a feature to map MTL to an OBJ in your teapot example?
Also i realise that if i have an obj that has more than 900 vertices, it begins to lag in mobile. Is there a way to solve such lag issues? Thanks again!

Hi Kevin, great project, the only one so far compatible with IE, so, congratulations.

Any plans for Type Definitions for typescript?

I'm developing an angular/typecript app and those definitions would be nice to have.

I'm going to fork your project and then start designing them, maybe later you consider that as a contribution.

Cheers,
Renato