Develop Reference

Webgl vertexAttribPointer: index out of range

I'm trying to pass uv buffer as well as the normal buffer in webgl. But for some reason I get this warning vertexAttribPointer: index out of range when passing values. I don't get what I m doing wrong since the uv array seems to be good, same goes for the normals.
It seems like the errors only occured with normal and uv not with position.
enableVertexAttribArray: index out of range
vertexAttribPointer: index out of range
let canvas = document.querySelector("canvas");
let gl = canvas.getContext("webgl");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
const vsSource = `
attribute vec4 position;
attribute vec2 uv;
attribute vec3 normal;
uniform mat4 modelViewMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = position;
}
`;
const fsSource = `
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vec4(1.0,0.0,1.0,1.0);
}
`;
// Shader setup
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
var log = gl.getShaderInfoLog(vertexShader);
throw "Shader compilation failed\n\n" + log + "\n\n";
}
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
var log = gl.getShaderInfoLog(fragmentShader);
throw "Shader compilation failed\n\n" + log + "\n\n";
}
let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.validateProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
var log = gl.getProgramInfoLog(program);
throw "Program link failed\n\n" + log;
}
gl.useProgram(program);
let modelViewMatrix = gl.getUniformLocation(program, "modelViewMatrix");
let model = mat4.create();
gl.uniformMatrix4fv(modelViewMatrix, false, model);
var vertices = new Float32Array([
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
0.5,
-0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
0.5,
0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
0.5,
-0.5,
0.5,
0.5,
0.5,
-0.5,
-0.5,
0.5,
-0.5,
0.5,
-0.5,
-0.5,
-0.5,
-0.5,
-0.5
]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
let position = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(position, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(position);
var uvBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, uvBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
0,
1,
1,
1,
0,
0,
1,
0,
0,
1,
1,
1,
0,
0,
1,
0,
0,
1,
1,
1,
0,
0,
1,
0,
0,
1,
1,
1,
0,
0,
1,
0,
0,
1,
1,
1,
0,
0,
1,
0,
0,
1,
1,
1,
0,
0,
1,
0
]),
gl.STATIC_DRAW
);
let uv = gl.getAttribLocation(program, "uv");
gl.vertexAttribPointer(uv, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(uv);
var normalBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.bufferData(
gl.ARRAY_BUFFER,
new Float32Array([
1,
0,
0,
1,
0,
0,
1,
0,
0,
1,
0,
0,
-1,
0,
0,
-1,
0,
0,
-1,
0,
0,
-1,
0,
0,
0,
1,
0,
0,
1,
0,
0,
1,
0,
0,
1,
0,
0,
-1,
0,
0,
-1,
0,
0,
-1,
0,
0,
-1,
0,
0,
0,
1,
0,
0,
1,
0,
0,
1,
0,
0,
1,
0,
0,
-1,
0,
0,
-1,
0,
0,
-1,
0,
0,
-1
]),
gl.STATIC_DRAW
);
let normal = gl.getAttribLocation(program, "normal");
gl.vertexAttribPointer(normal, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(normal);
var indices = new Uint16Array([
0,
2,
1,
2,
3,
1,
4,
6,
5,
6,
7,
5,
8,
10,
9,
10,
11,
9,
12,
14,
13,
14,
15,
13,
16,
18,
17,
18,
19,
17,
20,
22,
21,
22,
23,
21
]);
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
<canvas></canvas>

Your shaders are not using uv or normal so your driver is optimizing out those attributes. In that case gl.getAttribLocation returns -1 for location (-1 = attribute by this name does not exist). -1 is out of range. Valid values are 0 to gl.getParameter(gl.MAX_VERTEX_ATTRIBS) - 1
In other words you need check the location of your attributes and if they don't exist, don't set them up.
This is one reason why it's good to write some helper functions for WebGL to kind of handle these issues for you so as you modify your shaders your code doesn't break.

Sort an array by two fields

I'm trying to summarise this unordered 2d array:
[
[3.0, 1.0, 4.0],
[2.0, 1.0, 1.0],
[1.0, 1.0, 6.0],
[1.0, 1.0, 1.0],
[3.0, 2.0, 5.0],
[2.0, 2.0, 1.0],
[3.0, 1.0, 1.0],
[1.0, 1.0, 4.0],
[1.0, 2.0, 3.0],
[3.0, 1.0, 2.0],
[2.0, 1.0, 1.0],
[2.0, 2.0, 2.0]
]
I'm able to order it by the first then second columns like so:
[
[1.0, 1.0, 6.0],
[1.0, 1.0, 1.0],
[1.0, 1.0, 4.0],
[1.0, 2.0, 3.0],
[2.0, 1.0, 1.0],
[2.0, 1.0, 1.0],
[2.0, 2.0, 1.0],
[2.0, 2.0, 2.0],
[3.0, 1.0, 4.0],
[3.0, 1.0, 1.0],
[3.0, 1.0, 2.0],
[3.0, 2.0, 5.0]
]
Using this code:
function sortData(myArr) {
// sort on second column, asc
myArr.sort(function (element_a, element_b) {
return element_a[1] - element_b[1];
});
// sort on first column, asc
myArr.sort(function (element_a, element_b) {
return element_a[0] - element_b[0];
});
return myArr;
}
Ultimately, the result below is what I'm trying to get (sum of third column, grouped by 1st and 2nd in ascending order):
[
[1.0, 1.0, 11.0],
[1.0, 2.0, 3.0],
[2.0, 1.0, 2.0],
[2.0, 2.0, 3.0],
[3.0, 1.0, 7.0],
[3.0, 2.0, 5.0]
]

You can first sort your data and then use forEach() loop to group by first two elements and sum third element.
var data = [[3,1,4],[2,1,1],[1,1,6],[1,1,1],[3,2,5],[2,2,1],[3,1,1],[1,1,4],[1,2,3],[3,1,2],[2,1,1],[2,2,2]]
data.sort(function(a, b) {
return a[0] - b[0] || a[1] - b[1]
})
var result = [];
data.forEach(function(e) {
var key = e[0].toString() + e[1].toString();
if(!this[key]) result.push(this[key] = e.slice())
else this[key][2] += e[2]
}, {})
console.log(JSON.stringify(result))

Go through the sorted array, creating a new array of sums.
Create a new element when the 1st or the 2nd column become different, or add to the current element as long as those columns remain the same.

Using Array#reduce:
let arr = [
[3.0, 1.0, 4.0],
[2.0, 1.0, 1.0],
[1.0, 1.0, 6.0],
[1.0, 1.0, 1.0],
[3.0, 2.0, 5.0],
[2.0, 2.0, 1.0],
[3.0, 1.0, 1.0],
[1.0, 1.0, 4.0],
[1.0, 2.0, 3.0],
[3.0, 1.0, 2.0],
[2.0, 1.0, 1.0],
[2.0, 2.0, 2.0]
]
let res = Object.values(arr.reduce((a, c)=>{
let key = c.slice(0,2).join('|');
if(!a[key]){
a[key] = c
}else{
a[key][2] += c[2]
}
return a
},{})).sort((a, b)=>{
return a[0]-b[0] || a[1] - b[1]
});
console.log(JSON.stringify(res))
Basic theory is to use first 2 values to create an object key. If that key doesn't exist create a new one with current array as value.... if it already exists sum last value of each

Plotly.js: How to avoid overlapping contour lines?

Below is an example for creating a contour plot with plotly.js. Some of the contour lines overlap.
How can I alter the plotly settings to avoid that (e.g. increase resolution, switch contouring algorithm)? If I plot the same data using conrec.js the contours do not overlap.
A. Conrec.js (this works, no overlap)
Source code for the example:
https://github.com/jasondavies/conrec.js/tree/master/example
B. Plotly.js (does not work: overlapping contours)
Source code for the example:
https://jsfiddle.net/jwmdw3o1/
Resources:
https://cdn.plot.ly/plotly-latest.min.js
https://github.com/mbostock/d3/raw/v1.10.1/d3.js
Html:
<div id="graph"></div>
JavaScript:
var zData = createData();
var xData = d3.range(0, zData.length);
var yData = d3.range(0, zData[0].length);
var data = [ {
z: zData,
x: xData,
y: yData,
type: 'contour',
colorscale: 'Jet',
showscale: false,
autocontour: false,
contours: {
start: -5,
end: 3,
size: 0.5
}
}];
var layout = {
margin: {
b: 0,
l: 0,
r: 0,
t: 0
},
height: 600,
width: 600,
title: '',
xaxis: {
ticks: '',
showticklabels: false
},
yaxis: {
ticks: '',
showticklabels: false
}
};
Plotly.newPlot('graph', data, layout, {displayModeBar: false});
function createData(){
var data = [
[
0.4,
0.4,
0.7,
-1.0,
-0.1,
0.6,
-0.4,
0.6,
-0.4,
1.3,
0.7,
-0.4,
1.1,
1.3,
0.6,
0.1,
-0.0,
-0.8,
-0.8,
-1.0
],
[
0.4,
-0.4,
0.4,
-1.2,
-0.7,
0.4,
-0.9,
0.5,
-0.9,
1.2,
0.5,
-1.0,
1.3,
1.1,
0.5,
-0.0,
-0.1,
-1.2,
-1.0,
-0.9
],
[
0.7,
0.4,
0.1,
-1.2,
-0.2,
0.5,
-0.6,
0.6,
-0.2,
0.9,
0.6,
-0.5,
1.1,
0.8,
0.6,
0.1,
-0.4,
-0.9,
-0.7,
-0.8
],
[
-1.0,
-1.2,
-1.2,
-4.4,
-1.9,
-0.8,
-2.2,
-1.0,
-2.2,
0.0,
-0.3,
-2.0,
-0.2,
0.2,
-0.8,
-1.6,
-1.9,
-2.4,
-2.3,
-2.6
],
[
-0.1,
-0.7,
-0.2,
-1.9,
-2.0,
-0.5,
-1.9,
-0.3,
-1.7,
0.4,
-0.2,
-1.9,
0.3,
0.4,
-0.3,
-0.8,
-0.9,
-2.1,
-1.8,
-2.0
],
[
0.6,
0.4,
0.5,
-0.8,
-0.5,
-0.1,
-0.8,
0.6,
-0.5,
1.0,
0.5,
-0.7,
0.8,
1.0,
0.5,
0.1,
-0.3,
-0.9,
-0.7,
-1.1
],
[
-0.4,
-0.9,
-0.6,
-2.2,
-1.9,
-0.8,
-2.7,
-0.6,
-2.0,
0.3,
-0.3,
-2.3,
-0.0,
-0.0,
-0.6,
-1.1,
-1.3,
-2.4,
-2.0,
-2.2
],
[
0.6,
0.5,
0.6,
-1.0,
-0.3,
0.6,
-0.6,
0.1,
-0.8,
1.3,
0.8,
-0.8,
1.1,
1.3,
0.4,
0.1,
0.1,
-0.8,
-1.0,
-1.0
],
[
-0.4,
-0.9,
-0.2,
-2.2,
-1.7,
-0.5,
-2.0,
-0.8,
-2.9,
0.3,
-0.4,
-2.2,
-0.0,
-0.0,
-0.7,
-0.7,
-1.3,
-2.4,
-2.1,
-2.6
],
[
1.3,
1.2,
0.9,
0.0,
0.4,
1.0,
0.3,
1.3,
0.3,
1.1,
1.0,
0.2,
0.7,
1.9,
0.9,
-0.2,
0.3,
0.1,
-0.4,
-0.2
],
[
0.7,
0.5,
0.6,
-0.3,
-0.2,
0.5,
-0.3,
0.8,
-0.4,
1.0,
0.3,
-0.3,
1.0,
1.1,
0.6,
0.1,
0.3,
-0.7,
-0.5,
-0.6
],
[
-0.4,
-1.0,
-0.5,
-2.0,
-1.9,
-0.7,
-2.3,
-0.8,
-2.2,
0.2,
-0.3,
-2.7,
0.0,
-0.0,
-0.6,
-1.0,
-1.1,
-2.3,
-2.1,
-2.4
],
[
1.1,
1.3,
1.1,
-0.2,
0.3,
0.8,
-0.0,
1.1,
-0.0,
0.7,
1.0,
0.0,
1.6,
0.8,
1.0,
0.8,
0.7,
-0.2,
-0.2,
-0.2
],
[
1.3,
1.1,
0.8,
0.2,
0.4,
1.0,
-0.0,
1.3,
-0.0,
1.9,
1.1,
-0.0,
0.8,
1.2,
1.1,
0.0,
0.2,
-0.1,
-0.4,
0.0
],
[
0.6,
0.5,
0.6,
-0.8,
-0.3,
0.5,
-0.6,
0.4,
-0.7,
0.9,
0.6,
-0.6,
1.0,
1.1,
-0.2,
0.1,
-0.0,
-0.9,
-0.6,
-1.2
],
[
0.1,
-0.0,
0.1,
-1.6,
-0.8,
0.1,
-1.1,
0.1,
-0.7,
-0.2,
0.1,
-1.0,
0.8,
0.0,
0.1,
-0.6,
-0.4,
-1.2,
-1.3,
-1.4
],
[
-0.0,
-0.1,
-0.4,
-1.9,
-0.9,
-0.3,
-1.3,
0.1,
-1.3,
0.3,
0.3,
-1.1,
0.7,
0.2,
-0.0,
-0.4,
-1.3,
-1.4,
-1.6,
-1.9
],
[
-0.8,
-1.2,
-0.9,
-2.4,
-2.1,
-0.9,
-2.4,
-0.8,
-2.4,
0.1,
-0.7,
-2.3,
-0.2,
-0.1,
-0.9,
-1.2,
-1.4,
-3.0,
-2.3,
-2.5
],
[
-0.8,
-1.0,
-0.7,
-2.3,
-1.8,
-0.7,
-2.0,
-1.0,
-2.1,
-0.4,
-0.5,
-2.1,
-0.2,
-0.4,
-0.6,
-1.3,
-1.6,
-2.3,
-2.3,
-2.4
],
[
-1.0,
-0.9,
-0.8,
-2.6,
-2.0,
-1.1,
-2.2,
-1.0,
-2.6,
-0.2,
-0.6,
-2.4,
-0.2,
0.0,
-1.2,
-1.4,
-1.9,
-2.5,
-2.4,
-3.3
]
];
return data;
}

Adapting the line options with "smoothing: 0" resolves this:
var data = [ {
...
line: {
smoothing: 0
}
...
}];
https://plot.ly/javascript/reference/#contour-line

Bar overlay filled scatter

Whenever I fill a scatter its drawn over the top of the bars on a multi chart type graph.
See example here
http://codepen.io/anon/pen/JXgNBG
var trace1 = {
x: [0, 1, 2, 3, 4, 5],
y: [1.5, 1, 1.3, 0.7, 0.8, 0.9],
type: 'scatter',
fill: 'tozeroy'
};
var trace2 = {
x: [0, 1, 2, 3, 4, 5],
y: [1, 0.5, 0.7, -1.2, 0.3, 0.4],
type: 'bar'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data);
Any ideas how to draw the bars over the filled area on the scatter? I would like the bars drawn over the top of the filled area to make them stand out.

Remove vertical lines from the plot d3.js

I am using d3.js to plot the histograms. I want to remove the vertical lines that are connected to the plot at the start point and end point of the plot:
http://i.stack.imgur.com/CpP6C.png
Thank you in advance ;)
(function(window, document, undefined) {
'use strict';
// Create an SVG element and create an AxesChart inside it
var makeChart = function(container) {
return container.append('svg')
.chart('AxesChart')
.width(450)
.height(400);
};
// Manipulate the input data to a format accepted by the Histogram chart
var formatData = function(data) {
var rtn = [];
for (var i = 0; i < data['values'].length; i++) {
var bins = data['binning'][i];
rtn.push({
xlow: bins[0],
xhigh: bins[1],
y: data['values'][i],
yerr: data['uncertainties'][i]
});
}
return rtn;
};
// Return an array of objects suitable for d3.plotables.LineChart, filled
// with data generated from the function f, which should return a single
// number when passed a single number.
// The function is evaluated from domain[0] to domain[1] (domain[1] > domain[0])
// in the given number of steps (default: 100).
var dataFromFunction = function(f, domain, steps) {
if (steps === undefined) {
steps = 100;
}
var step = (domain[1] - domain[0])/(1.0*steps),
x = domain[0],
data = [];
for (var i = 0; i <= steps; i++) {
data.push({
x: x,
y: f(x),
xerr: [0, 0],
yerr: [0, 0]
});
x = i*step + domain[0];
}
return data;
};
// Define histogram datasets
var gaussian = formatData(gaussianData),
landau = formatData(landauData),
steps = formatData({
'values': [0, 1, 2, 3, 4, 5],
'binning': [[0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [5, 6]],
'uncertainties': [[0, 0.2], [0.2, 0.7], [0.3, 0.2], [0.2, 0.2], [0.2, 0.3], [0.2, 0.6]]
});
// Generate some line chart data
var sinc = dataFromFunction(function(x) {
return x == 0 ? 1 : Math.sin(Math.PI*x)/(Math.PI*x);
}, [-2*Math.PI, 2*Math.PI]),
line = [
{x: -6, y: 0.4, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: -4, y: 0.6, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: -2, y: 0.4, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 0, y: 0.0, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 2, y: 0.2, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 4, y: 0.8, xerr: [0.3, 0.3], yerr: [0.1, 0.1]},
{x: 6, y: 0.6, xerr: [0.3, 0.3], yerr: [0.1, 0.1]}
];
// Define our charts
var hGauss = makeChart(d3.select('#h1'))
.xAxisLabel('Vertex position [mm]')
.yAxisLabel('Frequency');
var h2DGauss = makeChart(d3.select('#h2'))
.xAxisLabel('x')
.yAxisLabel('y')
.animate(false);
var lineChart = d3.select('#h3').append('svg')
.chart('AxesChart')
.width(450)
.height(400);
var gaussianInfo = [
['Name', 'Gaussian'],
['Entries', '10000'],
['Mean', '0.0'],
['RMS', '1.0']
];
// Draw plotables on to charts
hGauss.addPlotable(d3.plotable.Histogram('steps', steps, {showUncertainties: true}));
hGauss.addPlotable(d3.plotable.Histogram('gaussian', gaussian));
hGauss.addPlotable(d3.plotable.Histogram('landau', landau));
hGauss.addOrnament(d3.plotable.TextBox('gaussianInfo', gaussianInfo));
h2DGauss.addPlotable(d3.plotable.Histogram2D('gaussian2d', data2d.data));
lineChart.addPlotable(d3.plotable.LineChart('sinc', sinc));
lineChart.addPlotable(d3.plotable.LineChart('line', line, {showPoints: true, showUncertainties: true, interpolation: 'linear', color: 'green'}));
})(window, window.document);

https://github.com/alexpearce/histograms/commit/f9b5b364153ee9ff151794aa93744681103c955f
This is the answer - you need to make some changes and then you have option if you want this lines or not. Cheers ;)