cannot render together cube and linesHow do I pass command line arguments to a Node.js program?WebGL - Reverse transform to retrieve vertex position from gl_Position in the vertex shaderWebGL: difference between vertex shader transform and app/software transformWebGL Vertex Space CoordinatesNormal vectors for an eight vertex cubeAlpha rendering difference between OpenGL and WebGLreduce redundant webgl attribute dataWebGL; Buffer or uniform4fv?WebGL; Instanced rendering - setting up divisorsWebGL lines not having consistent width/color
I wrote a scene that the majority of my readers loved. How do I get back to that place while writing my new book?
Short story written from alien perspective with this line: "It's too bright to look at, so they don't"
Did thousands of women die every year due to illegal abortions before Roe v. Wade?
How could a possessed body begin to rot and decay while it is still alive?
Convert camelCase and PascalCase to Title Case
How to make a setting relevant?
How to skip replacing first occurrence of a character in each line?
What is the purpose of building foundations?
Who operates delivery flights for commercial airlines?
Why don't B747s start takeoffs with full throttle?
What's the logic behind the the organization of Hamburg's bus transport into "rings"?
How were concentration and extermination camp guards recruited?
What happens if you do emergency landing on a US base in middle of the ocean?
Can Green-Flame Blade be cast twice with the Hunter ranger's Horde Breaker ability?
Do I include animal companions when calculating difficulty of an encounter?
Movie where a boy is transported into the future by an alien spaceship
Do adult Russians normally hand-write Cyrillic as cursive or as block letters?
Is it a problem that pull requests are approved without any comments
Responsibility for visa checking
Explain Ant-Man's "not it" scene from Avengers: Endgame
What does War Machine's "Canopy! Canopy!" line mean in "Avengers: Endgame"?
Accidentally renamed tar.gz file to a non tar.gz file, will my file be messed up
What are they doing to this poor rocket?
Applicants clearly not having the skills they advertise
cannot render together cube and lines
How do I pass command line arguments to a Node.js program?WebGL - Reverse transform to retrieve vertex position from gl_Position in the vertex shaderWebGL: difference between vertex shader transform and app/software transformWebGL Vertex Space CoordinatesNormal vectors for an eight vertex cubeAlpha rendering difference between OpenGL and WebGLreduce redundant webgl attribute dataWebGL; Buffer or uniform4fv?WebGL; Instanced rendering - setting up divisorsWebGL lines not having consistent width/color
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I want to render cube with it local coordinates. I can render separate cube or lines, but not together. My goal is to achieve this:
my cube vertex data looks like this:
vertices: new Float32Array([
// Front face
-0.1, -0.1, 0.1,
0.1, -0.1, 0.1,
0.1, 0.1, 0.1,
-0.1, 0.1, 0.1,
// Back face
-0.1, -0.1, -0.1,
-0.1, 0.1, -0.1,
0.1, 0.1, -0.1,
0.1, -0.1, -0.1,
// Top face
-0.1, 0.1, -0.1,
-0.1, 0.1, 0.1,
0.1, 0.1, 0.1,
0.1, 0.1, -0.1,
// Bottom face
-0.1, -0.1, -0.1,
0.1, -0.1, -0.1,
0.1, -0.1, 0.1,
-0.1, -0.1, 0.1,
// Right face
0.1, -0.1, -0.1,
0.1, 0.1, -0.1,
0.1, 0.1, 0.1,
0.1, -0.1, 0.1,
// Left face
-0.1, -0.1, -0.1,
-0.1, -0.1, 0.1,
-0.1, 0.1, 0.1,
-0.1, 0.1, -0.1,
]),
As I know that my cube at the center of global coordinates, I can be sure that his local coordinates are the same as global. To draw local coordinates (three lines) I need to draw 3 lines from origin. This is vertex data for lines.
vertices: new Float32Array([
// x line
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
// y line
0.0, 0.0, 0.0,
0.0, 1.0, 0.0,
// z line
0.0, 0.0, 0.0,
0.0, 0.0, 1.0,
]),
But when I start rendering it, I have some issues:
- If I render cube before line I have error:
[.WebGL-0x7fabca858c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays:
range out of bounds for buffer
But I can see my local coordinate lines, even with this error. 
- If I do opposite thing, I drawing lines before cube, then I got this:
First, I cannot recognize lines at all, but then with webgl chrome ui extension, I figure out that my line is attached on cube shape:
My flow is:
- Create shaders
I use vertex & fragment shaders for both shapes. My shapes have same attribute and uniform names that I can use 1 shader program
// js
const cube =
data: cube_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
const line =
data: line_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
vertex shader:
attribute vec3 coordinates;
attribute vec4 colors;
uniform mat4 transformationMatrix;
varying vec4 v_color;
void main()
colors;
gl_Position = transformationMatrix * vec4(coordinates, 1.0);
v_color = colors;
- Create program
Create attributes, uniforms.
And at render time:
I buffer data to attributes and update uniforms
Can someone please give me a hint where to look?
javascript webgl
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
add a comment |
I want to render cube with it local coordinates. I can render separate cube or lines, but not together. My goal is to achieve this:
my cube vertex data looks like this:
vertices: new Float32Array([
// Front face
-0.1, -0.1, 0.1,
0.1, -0.1, 0.1,
0.1, 0.1, 0.1,
-0.1, 0.1, 0.1,
// Back face
-0.1, -0.1, -0.1,
-0.1, 0.1, -0.1,
0.1, 0.1, -0.1,
0.1, -0.1, -0.1,
// Top face
-0.1, 0.1, -0.1,
-0.1, 0.1, 0.1,
0.1, 0.1, 0.1,
0.1, 0.1, -0.1,
// Bottom face
-0.1, -0.1, -0.1,
0.1, -0.1, -0.1,
0.1, -0.1, 0.1,
-0.1, -0.1, 0.1,
// Right face
0.1, -0.1, -0.1,
0.1, 0.1, -0.1,
0.1, 0.1, 0.1,
0.1, -0.1, 0.1,
// Left face
-0.1, -0.1, -0.1,
-0.1, -0.1, 0.1,
-0.1, 0.1, 0.1,
-0.1, 0.1, -0.1,
]),
As I know that my cube at the center of global coordinates, I can be sure that his local coordinates are the same as global. To draw local coordinates (three lines) I need to draw 3 lines from origin. This is vertex data for lines.
vertices: new Float32Array([
// x line
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
// y line
0.0, 0.0, 0.0,
0.0, 1.0, 0.0,
// z line
0.0, 0.0, 0.0,
0.0, 0.0, 1.0,
]),
But when I start rendering it, I have some issues:
- If I render cube before line I have error:
[.WebGL-0x7fabca858c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays:
range out of bounds for buffer
But I can see my local coordinate lines, even with this error.
- If I do opposite thing, I drawing lines before cube, then I got this:
First, I cannot recognize lines at all, but then with webgl chrome ui extension, I figure out that my line is attached on cube shape:
My flow is:
- Create shaders
I use vertex & fragment shaders for both shapes. My shapes have same attribute and uniform names that I can use 1 shader program
// js
const cube =
data: cube_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
const line =
data: line_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
vertex shader:
attribute vec3 coordinates;
attribute vec4 colors;
uniform mat4 transformationMatrix;
varying vec4 v_color;
void main()
colors;
gl_Position = transformationMatrix * vec4(coordinates, 1.0);
v_color = colors;
- Create program
Create attributes, uniforms.
And at render time:
I buffer data to attributes and update uniforms
Can someone please give me a hint where to look?
javascript webgl
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
You're going to have to show more code. Use a snippet. One comment, you have some property,valuesPerVertex. No idea what that means. I see 2 values per vertex,coordinatesandcolors. Of thosecoordinateshas 3 values per vertex, and colors has 4 values per vertex. Unrelated, I suggest these tutorials
– gman
Mar 24 at 16:40
add a comment |
I want to render cube with it local coordinates. I can render separate cube or lines, but not together. My goal is to achieve this:
my cube vertex data looks like this:
vertices: new Float32Array([
// Front face
-0.1, -0.1, 0.1,
0.1, -0.1, 0.1,
0.1, 0.1, 0.1,
-0.1, 0.1, 0.1,
// Back face
-0.1, -0.1, -0.1,
-0.1, 0.1, -0.1,
0.1, 0.1, -0.1,
0.1, -0.1, -0.1,
// Top face
-0.1, 0.1, -0.1,
-0.1, 0.1, 0.1,
0.1, 0.1, 0.1,
0.1, 0.1, -0.1,
// Bottom face
-0.1, -0.1, -0.1,
0.1, -0.1, -0.1,
0.1, -0.1, 0.1,
-0.1, -0.1, 0.1,
// Right face
0.1, -0.1, -0.1,
0.1, 0.1, -0.1,
0.1, 0.1, 0.1,
0.1, -0.1, 0.1,
// Left face
-0.1, -0.1, -0.1,
-0.1, -0.1, 0.1,
-0.1, 0.1, 0.1,
-0.1, 0.1, -0.1,
]),
As I know that my cube at the center of global coordinates, I can be sure that his local coordinates are the same as global. To draw local coordinates (three lines) I need to draw 3 lines from origin. This is vertex data for lines.
vertices: new Float32Array([
// x line
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
// y line
0.0, 0.0, 0.0,
0.0, 1.0, 0.0,
// z line
0.0, 0.0, 0.0,
0.0, 0.0, 1.0,
]),
But when I start rendering it, I have some issues:
- If I render cube before line I have error:
[.WebGL-0x7fabca858c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays:
range out of bounds for buffer
But I can see my local coordinate lines, even with this error.
- If I do opposite thing, I drawing lines before cube, then I got this:
First, I cannot recognize lines at all, but then with webgl chrome ui extension, I figure out that my line is attached on cube shape:
My flow is:
- Create shaders
I use vertex & fragment shaders for both shapes. My shapes have same attribute and uniform names that I can use 1 shader program
// js
const cube =
data: cube_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
const line =
data: line_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
vertex shader:
attribute vec3 coordinates;
attribute vec4 colors;
uniform mat4 transformationMatrix;
varying vec4 v_color;
void main()
colors;
gl_Position = transformationMatrix * vec4(coordinates, 1.0);
v_color = colors;
- Create program
Create attributes, uniforms.
And at render time:
I buffer data to attributes and update uniforms
Can someone please give me a hint where to look?
javascript webgl
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
I want to render cube with it local coordinates. I can render separate cube or lines, but not together. My goal is to achieve this:
my cube vertex data looks like this:
vertices: new Float32Array([
// Front face
-0.1, -0.1, 0.1,
0.1, -0.1, 0.1,
0.1, 0.1, 0.1,
-0.1, 0.1, 0.1,
// Back face
-0.1, -0.1, -0.1,
-0.1, 0.1, -0.1,
0.1, 0.1, -0.1,
0.1, -0.1, -0.1,
// Top face
-0.1, 0.1, -0.1,
-0.1, 0.1, 0.1,
0.1, 0.1, 0.1,
0.1, 0.1, -0.1,
// Bottom face
-0.1, -0.1, -0.1,
0.1, -0.1, -0.1,
0.1, -0.1, 0.1,
-0.1, -0.1, 0.1,
// Right face
0.1, -0.1, -0.1,
0.1, 0.1, -0.1,
0.1, 0.1, 0.1,
0.1, -0.1, 0.1,
// Left face
-0.1, -0.1, -0.1,
-0.1, -0.1, 0.1,
-0.1, 0.1, 0.1,
-0.1, 0.1, -0.1,
]),
As I know that my cube at the center of global coordinates, I can be sure that his local coordinates are the same as global. To draw local coordinates (three lines) I need to draw 3 lines from origin. This is vertex data for lines.
vertices: new Float32Array([
// x line
0.0, 0.0, 0.0,
1.0, 0.0, 0.0,
// y line
0.0, 0.0, 0.0,
0.0, 1.0, 0.0,
// z line
0.0, 0.0, 0.0,
0.0, 0.0, 1.0,
]),
But when I start rendering it, I have some issues:
- If I render cube before line I have error:
[.WebGL-0x7fabca858c00]GL ERROR :GL_INVALID_OPERATION : glDrawArrays:
range out of bounds for buffer
But I can see my local coordinate lines, even with this error.
- If I do opposite thing, I drawing lines before cube, then I got this:
First, I cannot recognize lines at all, but then with webgl chrome ui extension, I figure out that my line is attached on cube shape:
My flow is:
- Create shaders
I use vertex & fragment shaders for both shapes. My shapes have same attribute and uniform names that I can use 1 shader program
// js
const cube =
data: cube_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
const line =
data: line_data,
attr: ['coordinates', 'colors'],
uniform: ['transformationMatrix'],
valuesPerVertex: 3,
vertex shader:
attribute vec3 coordinates;
attribute vec4 colors;
uniform mat4 transformationMatrix;
varying vec4 v_color;
void main()
colors;
gl_Position = transformationMatrix * vec4(coordinates, 1.0);
v_color = colors;
- Create program
Create attributes, uniforms.
And at render time:
I buffer data to attributes and update uniforms
Can someone please give me a hint where to look?
javascript webgl
javascript webgl
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
edited Mar 24 at 13:52
Anton Ohloas
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
asked Mar 24 at 13:36
Anton OhloasAnton Ohloas
133
133
You're going to have to show more code. Use a snippet. One comment, you have some property,valuesPerVertex. No idea what that means. I see 2 values per vertex,coordinatesandcolors. Of thosecoordinateshas 3 values per vertex, and colors has 4 values per vertex. Unrelated, I suggest these tutorials
– gman
Mar 24 at 16:40
add a comment |
You're going to have to show more code. Use a snippet. One comment, you have some property,valuesPerVertex. No idea what that means. I see 2 values per vertex,coordinatesandcolors. Of thosecoordinateshas 3 values per vertex, and colors has 4 values per vertex. Unrelated, I suggest these tutorials
– gman
Mar 24 at 16:40
You're going to have to show more code. Use a snippet. One comment, you have some property,
valuesPerVertex. No idea what that means. I see 2 values per vertex, coordinates and colors. Of those coordinates has 3 values per vertex, and colors has 4 values per vertex. Unrelated, I suggest these tutorials– gman
Mar 24 at 16:40
You're going to have to show more code. Use a snippet. One comment, you have some property,
valuesPerVertex. No idea what that means. I see 2 values per vertex, coordinates and colors. Of those coordinates has 3 values per vertex, and colors has 4 values per vertex. Unrelated, I suggest these tutorials– gman
Mar 24 at 16:40
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55324368%2fcannot-render-together-cube-and-lines%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55324368%2fcannot-render-together-cube-and-lines%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You're going to have to show more code. Use a snippet. One comment, you have some property,
valuesPerVertex. No idea what that means. I see 2 values per vertex,coordinatesandcolors. Of thosecoordinateshas 3 values per vertex, and colors has 4 values per vertex. Unrelated, I suggest these tutorials– gman
Mar 24 at 16:40