webgl developer @ Superhero Cheesecake in Amsterdam
{
const {gl, canSupportLinearFloat} = getGL(canvas);
const program = createProgram(gl, vertShaderSrc, fragShaderSrc);
const unit = 1;
const vertices = new Float32Array([
-unit, -unit, 0.0,
unit, -unit, 0.0,
unit, unit, 0.0,
-unit, unit, 0.0
]);
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
const vertexLocation = gl.getAttribLocation(program, 'position');
const indices = new Uint16Array([ 0, 1, 2, 0, 2, 3 ]);
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.useProgram(program);
// use buffer as triangle vertex position
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.vertexAttribPointer( vertexLocation, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vertexLocation);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
}
function getGL(canvas){
const params = {alpha: false, antialias: true};
const gl = canvas.getContext('webgl2', params);
const isWebGL2 = !!gl;
if (!isWebGL2) {
gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);
}
let halfFloat;
let canSupportLinearFloat;
if (isWebGL2) {
gl.getExtension('EXT_color_buffer_float');
canSupportLinearFloat = gl.getExtension('OES_texture_float_linear');
} else {
halfFloat = gl.getExtension('OES_texture_half_float');
canSupportLinearFloat = gl.getExtension('OES_texture_half_float_linear');
}
return {gl:gl, canSupportLinearFloat: canSupportLinearFloat, isWebGL2: isWebGL2}
}
function createProgram(gl, vertSrc, fragSrc){
// シェーダーをコンパイルする
const vertexShader = compileShader(gl, gl.VERTEX_SHADER, vertSrc);
// シェーダーをコンパイルする
const fragmentShader = compileShader(gl, gl.FRAGMENT_SHADER, fragSrc);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
try {
const success = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!success) {
throw gl.getProgramInfoLog(program);
}
} catch (error) {
console.warn(`WebGLProgram: ${error}`);
}
return program
}
function compileShader(gl, type, shaderSource) {
let shader = gl.createShader(type);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
return shader;
} else {
console.error("[WebGLShader]: Shader couldn't compile.");
if (gl.getShaderInfoLog(shader) !== '') {
console.warn(
'[WebGLShader]: gl.getShaderInfoLog()',
type === gl.VERTEX_SHADER ? 'vertex' : 'fragment',
gl.getShaderInfoLog(shader),
addLineNumbers(shaderSource)
);
return null;
}
}
function addLineNumbers(string) {
let lines = string.split('\n');
for (let i = 0; i < lines.length; i++) {
lines[i] = i + 1 + ': ' + lines[i];
}
return lines.join('\n');
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
