New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to display a triangle? #21

Closed
cx20 opened this Issue Nov 13, 2017 · 32 comments

Comments

Projects
None yet
3 participants
@cx20

cx20 commented Nov 13, 2017

I am trying to display basic primitives using various WebGL libraries.
https://qiita.com/cx20/items/0fa19c96aa6470d98807

I would like to add qtek to the list, but I did not know how to display the triangle.
Will you give me triangle samples by qtek if possible?
image

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 13, 2017

Owner

Pleasure. Must use custom shader instead of builtin shader?

Owner

pissang commented Nov 13, 2017

Pleasure. Must use custom shader instead of builtin shader?

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 13, 2017

If there are two ways, I would like to make samples respectively.

  1. Using VBO : Using custom shader
    https://qiita.com/cx20/items/0fa19c96aa6470d98807#using-vbo

  2. Using built-in primitive : Using builtin shader
    https://qiita.com/cx20/items/0fa19c96aa6470d98807#using-built-in-primitive

cx20 commented Nov 13, 2017

If there are two ways, I would like to make samples respectively.

  1. Using VBO : Using custom shader
    https://qiita.com/cx20/items/0fa19c96aa6470d98807#using-vbo

  2. Using built-in primitive : Using builtin shader
    https://qiita.com/cx20/items/0fa19c96aa6470d98807#using-built-in-primitive

pissang added a commit that referenced this issue Nov 14, 2017

@pissang

This comment has been minimized.

Show comment
Hide comment
@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

@pissang Thank you for offering samples.
I am trying to create a rectangular sample by referring to Triangle's sample.
http://jsdo.it/cx20/OMNV

var positions = [
    [-0.5, 0.5, 0.0], // v0
    [-0.5,-0.5, 0.0], // v2
    [ 0.5, 0.5, 0.0], // v1 
    [-0.5,-0.5, 0.0], // v2
    [ 0.5,-0.5, 0.0], // v3
    [ 0.5, 0.5, 0.0]  // v1 
];
var colors = [
    [1.0, 0.0, 0.0, 1.0], // v0
    [0.0, 0.0, 1.0, 1.0], // v2
    [0.0, 1.0, 0.0, 1.0], // v1
    [0.0, 0.0, 1.0, 1.0], // v2
    [1.0, 1.0, 0.0, 1.0], // v3
    [0.0, 1.0, 0.0, 1.0]  // v1
];

However, the array of vertex data is redundant.
I would like to rewrite to use indices, but can it be realized?
I would like to use the following array.

var positions = [
    [-0.5, 0.5, 0.0], // v0
    [ 0.5, 0.5, 0.0], // v1 
    [-0.5,-0.5, 0.0], // v2
    [ 0.5,-0.5, 0.0]  // v3
];
var colors = [
    [1.0, 0.0, 0.0, 1.0], // v0
    [0.0, 1.0, 0.0, 1.0], // v1
    [0.0, 0.0, 1.0, 1.0], // v2
    [1.0, 1.0, 0.0, 1.0]  // v3
];

var indices = [
    2, 0, 1, // v2-v0-v1
    2, 1, 3  // v2-v1-v3
];

cx20 commented Nov 14, 2017

@pissang Thank you for offering samples.
I am trying to create a rectangular sample by referring to Triangle's sample.
http://jsdo.it/cx20/OMNV

var positions = [
    [-0.5, 0.5, 0.0], // v0
    [-0.5,-0.5, 0.0], // v2
    [ 0.5, 0.5, 0.0], // v1 
    [-0.5,-0.5, 0.0], // v2
    [ 0.5,-0.5, 0.0], // v3
    [ 0.5, 0.5, 0.0]  // v1 
];
var colors = [
    [1.0, 0.0, 0.0, 1.0], // v0
    [0.0, 0.0, 1.0, 1.0], // v2
    [0.0, 1.0, 0.0, 1.0], // v1
    [0.0, 0.0, 1.0, 1.0], // v2
    [1.0, 1.0, 0.0, 1.0], // v3
    [0.0, 1.0, 0.0, 1.0]  // v1
];

However, the array of vertex data is redundant.
I would like to rewrite to use indices, but can it be realized?
I would like to use the following array.

var positions = [
    [-0.5, 0.5, 0.0], // v0
    [ 0.5, 0.5, 0.0], // v1 
    [-0.5,-0.5, 0.0], // v2
    [ 0.5,-0.5, 0.0]  // v3
];
var colors = [
    [1.0, 0.0, 0.0, 1.0], // v0
    [0.0, 1.0, 0.0, 1.0], // v1
    [0.0, 0.0, 1.0, 1.0], // v2
    [1.0, 1.0, 0.0, 1.0]  // v3
];

var indices = [
    2, 0, 1, // v2-v0-v1
    2, 1, 3  // v2-v1-v3
];
@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 14, 2017

Owner

Yes, try initIndicesFromArray method.

var indices = [
    2, 0, 1, // v2-v0-v1
    2, 1, 3  // v2-v1-v3
];
geometry.initIndicesFromArray(indices);

The doc online is out of date and missing a lot of new add methods. I'm updating it these days:)

Owner

pissang commented Nov 14, 2017

Yes, try initIndicesFromArray method.

var indices = [
    2, 0, 1, // v2-v0-v1
    2, 1, 3  // v2-v1-v3
];
geometry.initIndicesFromArray(indices);

The doc online is out of date and missing a lot of new add methods. I'm updating it these days:)

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

@pissang Thank you for teaching me. I tried initIndicesFromArray.
However, The case of "A" is displayed, but it is not displayed in the case of "B".
Is this because qtek's default frontFace is CCW?

// [0]------[1]
//  |      / |
//  |    /   |
//  |  /     |
// [2]------[3]
// A) OK
var indices = [
    0, 2, 1, // v0-v2-v1
    1, 2, 3  // v1-v2-v3
];

// B) NG
var indices = [
    2, 0, 1, // v2-v0-v1
    2, 1, 3  // v2-v1-v3
];

Could you tell me how to change frontFace settings?

cx20 commented Nov 14, 2017

@pissang Thank you for teaching me. I tried initIndicesFromArray.
However, The case of "A" is displayed, but it is not displayed in the case of "B".
Is this because qtek's default frontFace is CCW?

// [0]------[1]
//  |      / |
//  |    /   |
//  |  /     |
// [2]------[3]
// A) OK
var indices = [
    0, 2, 1, // v0-v2-v1
    1, 2, 3  // v1-v2-v3
];

// B) NG
var indices = [
    2, 0, 1, // v2-v0-v1
    2, 1, 3  // v2-v1-v3
];

Could you tell me how to change frontFace settings?

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 14, 2017

Owner

The default value in WebGL is CCW

mesh.frontFace = qtek.Renderable.CW

This may work.

Owner

pissang commented Nov 14, 2017

The default value in WebGL is CCW

mesh.frontFace = qtek.Renderable.CW

This may work.

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

Thank you! It is now displayed as expected.
http://jsdo.it/cx20/OMNV
image

Next I will challenge the colored cube :)

cx20 commented Nov 14, 2017

Thank you! It is now displayed as expected.
http://jsdo.it/cx20/OMNV
image

Next I will challenge the colored cube :)

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

I was able to display colored cubes.
http://jsdo.it/cx20/mdYW
image

Finally I will challenge the textured cube.

cx20 commented Nov 14, 2017

I was able to display colored cubes.
http://jsdo.it/cx20/mdYW
image

Finally I will challenge the textured cube.

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 14, 2017

Owner

Good luck! Any questions or suggestions are welcome:)

Owner

pissang commented Nov 14, 2017

Good luck! Any questions or suggestions are welcome:)

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

I was able to display textured cubes :)
http://jsdo.it/cx20/Qwbw
image

Can you check if the library is used properly?

cx20 commented Nov 14, 2017

I was able to display textured cubes :)
http://jsdo.it/cx20/Qwbw
image

Can you check if the library is used properly?

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

I added a sample of QTEK to the following Basic Primitives sample.
https://qiita.com/cx20/items/0fa19c96aa6470d98807
image

I would like to add a sample that uses built-in shaders instead of Custom Shader at a later date.

cx20 commented Nov 14, 2017

I added a sample of QTEK to the following Basic Primitives sample.
https://qiita.com/cx20/items/0fa19c96aa6470d98807
image

I would like to add a sample that uses built-in shaders instead of Custom Shader at a later date.

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 14, 2017

Owner

Great!

I see the following code:

//mesh.frontFace = qtek.Renderable.CW;
mesh.culling = false;

Is this because the commented code can't work?

And this line is no need.

var normal = new qtek.Texture2D;

I can't find any other problems:) Thanks! @cx20

Owner

pissang commented Nov 14, 2017

Great!

I see the following code:

//mesh.frontFace = qtek.Renderable.CW;
mesh.culling = false;

Is this because the commented code can't work?

And this line is no need.

var normal = new qtek.Texture2D;

I can't find any other problems:) Thanks! @cx20

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 14, 2017

Thank you for confirmation.

I set culling to false because the box did not close.
If you comment out this line you will get the following result.

// mesh.culling = false;

image

Perhaps the data may be bad, but since other library samples use the same VBO data, I am trying to accommodate them with parameters.

var normal = new qtek.Texture2D;

It is a copy mistake. I removed this line.

cx20 commented Nov 14, 2017

Thank you for confirmation.

I set culling to false because the box did not close.
If you comment out this line you will get the following result.

// mesh.culling = false;

image

Perhaps the data may be bad, but since other library samples use the same VBO data, I am trying to accommodate them with parameters.

var normal = new qtek.Texture2D;

It is a copy mistake. I removed this line.

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

Understand. Builtin in primitive and shader next? :)

Owner

pissang commented Nov 15, 2017

Understand. Builtin in primitive and shader next? :)

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 15, 2017

@pissang I added the following sample using Built-in primitive and shader.

http://jsdo.it/cx20/uObL ... Triangle
http://jsdo.it/cx20/uOIG ... Plane
http://jsdo.it/cx20/k6uv ... Cube
http://jsdo.it/cx20/4TBY ... Cube + Texture

I would like to add colors to quads and cubes if possible. Is it feasible?
http://jsdo.it/cx20/uOIG
image

http://jsdo.it/cx20/k6uv
image

cx20 commented Nov 15, 2017

@pissang I added the following sample using Built-in primitive and shader.

http://jsdo.it/cx20/uObL ... Triangle
http://jsdo.it/cx20/uOIG ... Plane
http://jsdo.it/cx20/k6uv ... Cube
http://jsdo.it/cx20/4TBY ... Cube + Texture

I would like to add colors to quads and cubes if possible. Is it feasible?
http://jsdo.it/cx20/uOIG
image

http://jsdo.it/cx20/k6uv
image

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

For the quads. You can use vertex colors with standard shader. Like following:

geometry.attributes.color.fromArray([
  [1, 0, 0, 1], [1, 1, 0, 1], [0, 1, 0, 1], [0, 0, 1, 1]
]);
var mesh = new qtek.Mesh({
    geometry: geometry,
    material: new qtek.Material({
        // Use standard shader
        shader: qtek.shader.library.get('qtek.standard')
    })
});
// Enable vertex color in both vertex and fragment shader.
mesh.material.shader.define('both', 'VERTEX_COLOR');

For the cubes. You can alose use vertex colors like quads. Or render the normals. Which is simpler.

var mesh = new qtek.Mesh({
    geometry: geometry,
    material: new qtek.Material({
        // Only lambert shader support normal output
        shader: qtek.shader.library.get('qtek.lambert')
    })
});
mesh.material.shader.define('fragment', 'RENDER_NORMAL');
Owner

pissang commented Nov 15, 2017

For the quads. You can use vertex colors with standard shader. Like following:

geometry.attributes.color.fromArray([
  [1, 0, 0, 1], [1, 1, 0, 1], [0, 1, 0, 1], [0, 0, 1, 1]
]);
var mesh = new qtek.Mesh({
    geometry: geometry,
    material: new qtek.Material({
        // Use standard shader
        shader: qtek.shader.library.get('qtek.standard')
    })
});
// Enable vertex color in both vertex and fragment shader.
mesh.material.shader.define('both', 'VERTEX_COLOR');

For the cubes. You can alose use vertex colors like quads. Or render the normals. Which is simpler.

var mesh = new qtek.Mesh({
    geometry: geometry,
    material: new qtek.Material({
        // Only lambert shader support normal output
        shader: qtek.shader.library.get('qtek.lambert')
    })
});
mesh.material.shader.define('fragment', 'RENDER_NORMAL');
@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 15, 2017

@pissang Very Thanks! I will try vertex colors.

cx20 commented Nov 15, 2017

@pissang Very Thanks! I will try vertex colors.

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 15, 2017

Hmm. Somehow I am not going well.
I am trying vertex colors in the case of quads, but it seems that an error occurs.
http://jsrun.it/cx20/yupZc

qtek.js:21169 
Uncaught Error: Could not link program
VALIDATE_STATUS: false, gl error [0]
    at sub.renderQueue (qtek.js:21169)
    at sub.render (qtek.js:21009)
    at sub.<anonymous> (index.js:41)
    at sub.trigger (qtek.js:146)
    at sub._update (qtek.js:1788)
    at step (qtek.js:1811)

cx20 commented Nov 15, 2017

Hmm. Somehow I am not going well.
I am trying vertex colors in the case of quads, but it seems that an error occurs.
http://jsrun.it/cx20/yupZc

qtek.js:21169 
Uncaught Error: Could not link program
VALIDATE_STATUS: false, gl error [0]
    at sub.renderQueue (qtek.js:21169)
    at sub.render (qtek.js:21009)
    at sub.<anonymous> (index.js:41)
    at sub.trigger (qtek.js:146)
    at sub._update (qtek.js:1788)
    at step (qtek.js:1811)
@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

I can't open the link. Can you paste the code here?

Owner

pissang commented Nov 15, 2017

I can't open the link. Can you paste the code here?

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

Hmm, it seems to be a bug. Sorry about that

Owner

pissang commented Nov 15, 2017

Hmm, it seems to be a bug. Sorry about that

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 commented Nov 15, 2017

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 commented Nov 15, 2017

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

Fixed. You can pull the latest code and rebuild with command npm install && npm run build. I also add vertex color in basic shader. So there is no need to use standard shader, which also need a light in scene or it will be black. See example https://github.com/pissang/qtek/blob/master/example/triangle_vertexcolor.html

Owner

pissang commented Nov 15, 2017

Fixed. You can pull the latest code and rebuild with command npm install && npm run build. I also add vertex color in basic shader. So there is no need to use standard shader, which also need a light in scene or it will be black. See example https://github.com/pissang/qtek/blob/master/example/triangle_vertexcolor.html

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

@cx20 Yeah that's the issue. Never tested this branch before. My fault:(

Owner

pissang commented Nov 15, 2017

@cx20 Yeah that's the issue. Never tested this branch before. My fault:(

@fuzhenn

This comment has been minimized.

Show comment
Hide comment
@fuzhenn

fuzhenn Nov 15, 2017

Contributor

Good catch!
@pissang I think it deserves to add a test case into the integration test suite.

Contributor

fuzhenn commented Nov 15, 2017

Good catch!
@pissang I think it deserves to add a test case into the integration test suite.

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang
Owner

pissang commented Nov 15, 2017

@fuzhenn True

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 15, 2017

I was able to set Vertex Colors in the sample below.

http://jsdo.it/cx20/uOIG
http://jsdo.it/cx20/k6uv

I added samples of built-in primitive and shader below.
https://qiita.com/cx20/items/0fa19c96aa6470d98807#using-built-in-primitive
image

cx20 commented Nov 15, 2017

I was able to set Vertex Colors in the sample below.

http://jsdo.it/cx20/uOIG
http://jsdo.it/cx20/k6uv

I added samples of built-in primitive and shader below.
https://qiita.com/cx20/items/0fa19c96aa6470d98807#using-built-in-primitive
image

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 15, 2017

Since the triangle is now displayed, this Issue is closed.

Perhaps I will add a sample with the physics library next.
https://qiita.com/cx20/items/3ebed669fb9c9e797935

cx20 commented Nov 15, 2017

Since the triangle is now displayed, this Issue is closed.

Perhaps I will add a sample with the physics library next.
https://qiita.com/cx20/items/3ebed669fb9c9e797935

@cx20 cx20 closed this Nov 15, 2017

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 15, 2017

Owner

Looking forward to it!!

Owner

pissang commented Nov 15, 2017

Looking forward to it!!

@cx20

This comment has been minimized.

Show comment
Hide comment
@cx20

cx20 Nov 19, 2017

@pissang BTW, I added 3 samples using the physical library to the above list.

http://jsdo.it/cx20/qtGf ... domino
http://jsdo.it/cx20/s2wJ ... football
http://jsdo.it/cx20/6viZ ... box

cx20 commented Nov 19, 2017

@pissang BTW, I added 3 samples using the physical library to the above list.

http://jsdo.it/cx20/qtGf ... domino
http://jsdo.it/cx20/s2wJ ... football
http://jsdo.it/cx20/6viZ ... box

@pissang

This comment has been minimized.

Show comment
Hide comment
@pissang

pissang Nov 19, 2017

Owner

@cx20 Wow!! Well done!

Owner

pissang commented Nov 19, 2017

@cx20 Wow!! Well done!

@pissang pissang added the question label Feb 22, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment