I am trying to draw simple shapes using WebGL LINES mode. These are my vertices:
<canvas width="200" height="200".../>
...
vertices.push(
0.01,0.13, 0.03,0.15,
0.03,0.15, 0.09,0.15,
0.09,0.15, 0.11,0.13,
0.11,0.13, 0.11,0.03,
0.11,0.03, 0.09,0.01,
0.09,0.01, 0.03,0.01,
0.03,0.01, 0.01,0.03,
0.01,0.03, 0.01,0.13);
The picture shows the result which is far from my expectations:
screen
I tried different things without success. How to fix it?
Here is a working example (DPI should be 1):
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl2", { antialias: false });
var dpi = window.devicePixelRatio || 1;
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
//vertex shader
var vertexShaderSource = `#version 300 es
in vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
`;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
//fragment shader
var fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 outColor;
void main() {
outColor = vec4(0, 0, 0, 1);
}
`;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
//program
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//vertices
var vertices = [];
vertices.push(
0.01,0.13, 0.03,0.15,
0.03,0.15, 0.09,0.15,
0.09,0.15, 0.11,0.13,
0.11,0.13, 0.11,0.03,
0.11,0.03, 0.09,0.01,
0.09,0.01, 0.03,0.01,
0.03,0.01, 0.01,0.03,
0.01,0.03, 0.01,0.13);
//position attribute
var positionLocation = gl.getAttribLocation(program, "a_position");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.LINES, 0, vertices.length / 2);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="200" height="200" style="width: 200px; height: 200px"></canvas>
</body>
</html>
I found that when anti-aliasing is turned on, the shape is more acurrate but blurry.
I found out that do draw the shape as expected the coordinates should be half pixel:
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl2", { antialias: false });
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0, 0, 0, 0);
gl.clear(gl.COLOR_BUFFER_BIT);
//vertex shader
var vertexShaderSource = `#version 300 es
in vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0, 1);
}
`;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
//fragment shader
var fragmentShaderSource = `#version 300 es
precision highp float;
out vec4 outColor;
void main() {
outColor = vec4(0, 0, 0, 1);
}
`;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);
//program
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//vertices
var vertices = [];
vertices.push(
0.015,0.135, 0.035,0.155,
0.035,0.155, 0.095,0.155,
0.095,0.155, 0.115,0.135,
0.115,0.135, 0.115,0.035,
0.115,0.035, 0.095,0.015,
0.095,0.015, 0.035,0.015,
0.035,0.015, 0.015,0.035,
0.015,0.035, 0.015,0.135);
//position attribute
var positionLocation = gl.getAttribLocation(program, "a_position");
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.LINES, 0, vertices.length / 2);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<canvas id="canvas" width="200" height="200" style="width: 200px; height: 200px"></canvas>
</body>
</html>
Related
In the fragment shader the alpha of gl_Fragcolor is null :
gl_FragColor = vec4(0.88,0.33,0.55,0.0);
When you look the color of the point (size 24) , the color is the background-color of the canvas.
Where is the clearColor ? ( gl.clearColor(0.12, 0.34, 0.56, 1.0);)
'use strict';
const gl = canvas.getContext('webgl',{premultipliedAlpha: false});
const vsGLSL = `
void main() {
gl_Position = vec4(0,0,0, 1);
gl_PointSize = 24.;
}
`;
const fsGLSL = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(0.88,0.33,0.55,0.0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );
gl.viewport(0,0,canvas.width,canvas.height);
gl.drawArrays(gl.POINTS,0,1);
body {
background-color: rgba(255,0,0,1);
}
canvas {
background-color: rgba(66,66,0,1);
}
<canvas id="canvas"></canvas>
You neeed to enable and setup alpha blending using
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
This website provides a good way to explore the various blending equations and functions.
'use strict';
const gl = canvas.getContext('webgl',{premultipliedAlpha:false});
const vsGLSL = `
void main() {
gl_Position = vec4(0,0,0, 1);
gl_PointSize = 24.;
}
`;
const fsGLSL = `
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
void main() {
gl_FragColor = vec4(0.88,0.33,0.55,0);
}
`;
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsGLSL);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsGLSL);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.clearColor(0.12, 0.34, 0.56, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT );
gl.viewport(0,0,canvas.width,canvas.height);
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
gl.drawArrays(gl.POINTS,0,1);
body {
background-color: rgba(255,0,0,1);
}
canvas {
background-color: rgba(66,66,0,1);
}
<canvas id="canvas"></canvas>
I am trying to create a texture (just grey everywhere) and render it to a canvas using WebGL.
I have attempted here:
function tryToDraw() {
vertexShaderCode = `#version 100
precision mediump float;
attribute vec2 vertex_attrib;
void main (void)
{
gl_Position = vec4 (vertex_attrib, 0.0, 1.0) ;
}
`;
fragmentShaderCode = `#version 100
precision mediump float;
uniform sampler2D myTexture;
void main (void) {
vec2 texcoord = gl_FragCoord.xy / 1024.0;
gl_FragColor = vec4(texture2D (myTexture, texcoord).rgb, 1.0);
}
`;
var canvas = document.getElementById('waves_canvas');
var gl = canvas.getContext('webgl');
var program = gl.createProgram();
var textureArr = new Uint8Array(1024 * 1024 * 3).fill(128);
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderCode);
gl.compileShader(vertexShader);
gl.attachShader(program, vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderCode);
gl.compileShader(fragmentShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.validateProgram(program);
console.log(gl.getProgramParameter(program, gl.VALIDATE_STATUS));
gl.useProgram(program);
var location = gl.getUniformLocation(program, 'myTexture');
gl.uniform1i(location, 0);
var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 1024, 0, gl.RGB, gl.UNSIGNED_BYTE, textureArr);
var vertexPositions = new Float32Array([-1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);
var vPosAttrLoc = gl.getAttribLocation(program, 'vertex_attrib');
gl.enableVertexAttribArray(vPosAttrLoc);
gl.vertexAttribPointer(vPosAttrLoc, 2, gl.FLOAT, false, 2 * vertexPositions.BYTES_PER_ELEMENT, null);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
tryToDraw();
<canvas id="waves_canvas"></canvas>
My understanding of loading textures in WebGL is that we load textures according to the following procedure:
We specify which texture unit we use for our uniform sampler2D by using gl.uniform1i(gl.getUniformLocation(program, 'myTexture'), 0).
We create a texture using gl.createTexture().
We then choose which texture unit we want to load onto using GL.activeTexture.
We bind the texture we just created to the texture unit by using GL.bindTexture.
We load the texture using GL.texImage2D.
I've tried to implement it in the JSFiddle above, but I don't think the texture is loading correctly. I'm expecting to see a grey screen (128,128,128) which should be the texture I loaded, however all I see is a black screen.
Does anyone know if I am loading the texture correctly?
When I run your code in Chrome I get this warning in the JavaScript console
[.WebGL-0x7f9d4101ce00]RENDER WARNING: texture bound to texture unit 0 is not renderable. It might be non-power-of-2 or have incompatible texture filtering (maybe)?
Your texture has no mips so you either need to create mips by calling gl.generateMipmap(gl.TEXTURE_2D) or you need to set the filtering so mips are not needed by calling gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
See this
function tryToDraw() {
vertexShaderCode = `#version 100
precision mediump float;
attribute vec2 vertex_attrib;
void main (void)
{
gl_Position = vec4 (vertex_attrib, 0.0, 1.0) ;
}
`;
fragmentShaderCode = `#version 100
precision mediump float;
uniform sampler2D myTexture;
void main (void) {
vec2 texcoord = gl_FragCoord.xy / 1024.0;
gl_FragColor = vec4(texture2D (myTexture, texcoord).rgb, 1.0);
}
`;
var canvas = document.getElementById('waves_canvas');
var gl = canvas.getContext('webgl');
var program = gl.createProgram();
var textureArr = new Uint8Array(1024 * 1024 * 3).fill(128);
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderCode);
gl.compileShader(vertexShader);
gl.attachShader(program, vertexShader);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderCode);
gl.compileShader(fragmentShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.validateProgram(program);
console.log(gl.getProgramParameter(program, gl.VALIDATE_STATUS));
gl.useProgram(program);
var location = gl.getUniformLocation(program, 'myTexture');
gl.uniform1i(location, 0);
var texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1024, 1024, 0, gl.RGB, gl.UNSIGNED_BYTE, textureArr);
var vertexPositions = new Float32Array([-1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0, -1.0, -1.0]);
var vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexPositions, gl.STATIC_DRAW);
var vPosAttrLoc = gl.getAttribLocation(program, 'vertex_attrib');
gl.enableVertexAttribArray(vPosAttrLoc);
gl.vertexAttribPointer(vPosAttrLoc, 2, gl.FLOAT, false, 2 * vertexPositions.BYTES_PER_ELEMENT, null);
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
tryToDraw();
<canvas id="waves_canvas"></canvas>
Please use a snippet next time.
I'm start learning WebGL and find some tutorials in Internet how to create first project. The tutorial is so easy for me to compile because i draw code to compile .
Have this errors on compile project in Edge:
WEBGL11163: getAttribLocation: Program not linked.
index.html (61,1)
WEBGL11163: enableVertexAttribArray: Index exceeds MAX_VERTEX_ATTRIBS.
index.html (62,1)
WEBGL11059: INVALID_VALUE: vertexAttribPointer: vertex attribute size must be 1, 2, 3 or 4
index.html (63.1)
WEBGL11042: INVALID_OPERATION: useProgram: program is not connected
index.html (65.1)
WEBGL11163: drawArrays: A program must be bound.
index.html (66,1)
From this code:
const canvas = document.getElementById('object');
const gl = canvas.getContext('webgl');
if (!gl) {
throw new Error('WebGL not supported');
}
const vertexData = [
0, 1, 0,
1, -1, 0,
-1, -1, 0
];
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
void main() {
gl.fragColor = vec4(1, 0, 0, 1);
}
`);
gl.compileShader(fragmentShader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const positionLocation = gl.getAttribLocation(program, `position`);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, true, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
What you can say about this subject because in tutorial it's working correctly.
First off let me recommend some different tutorials
Second off, your shaders are bad or rather your fragment shader is bad.
When compiling and linking shader programs you should check for errors by calling gl.getShaderParameter(someShader, gl.COMPILE_STATUS) and gl.getProgramParameter(someProgram, gl.LINK_STATUS). If either return false then your shaders had an error. You can get the compile error with gl.getShaderInfoLog(someShader) and the link error with gl.getProgramInfoLog(someProgram). The fact that these are not in your example suggest the tutorial you're using has so some issues.
As for your shaders you typed gl.fragColor instead of gl_FragColor
const canvas = document.getElementById('object');
const gl = canvas.getContext('webgl');
if (!gl) {
throw new Error('WebGL not supported');
}
const vertexData = [
0, 1, 0,
1, -1, 0,
-1, -1, 0
];
const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
function createShader(gl, type, src) {
const shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(gl.getShaderInfoLog(shader));
throw new Error('could not compile shader');
}
return shader;
}
const vertexShader = createShader(gl, gl.VERTEX_SHADER, `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, `
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.log(gl.getProgramInfoLog(program));
throw new Error('could not link shaders');
}
const positionLocation = gl.getAttribLocation(program, `position`);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, true, 0, 0);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
canvas { border: 1px solid black; }
<canvas id="object"></canvas>
I am trying to figure out how to achieve color and alpha blending between primitives using Regl.
I know Regl command's have a blend property and I've tried replicating the following webgl settings that do the trick:
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
using the following blend settings in Regl:
blend: {
enable: true,
func: { src: 'src alpha', dst:'one minus src alpha' }
},
But the blending only seem to work in regard to the background color but not between the points. (See the example below.)
Example: http://jsfiddle.net/8gyf7pek/13/
const canvas1 = document.querySelector('#c1');
const canvas2 = document.querySelector('#c2');
//////////////////////////////////////////////
// PURE WEBGL
//////////////////////////////////////////////
const gl = canvas1.getContext('webgl');
gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
const vertexShaderSource = `
attribute vec2 position;
attribute vec4 color;
varying vec4 v_color;
void main() {
gl_PointSize = 50.0;
gl_Position = vec4(position, 0, 1);
v_color = color;
}
`;
const fragmentShaderSource = `
precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}
`;
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
const colorAttributeLocation = gl.getAttribLocation(program, 'color');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.enableVertexAttribArray(colorAttributeLocation);
gl.vertexAttribPointer(colorAttributeLocation, 4, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-0.05, -0.05, -0.05, 0.05, 0.05, 0.05, 0.05, -0.05,
]), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
const red = [1, 0, 0, 0.5];
const blue = [0, 0, 1, 0.5];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
...red, ...red,
...blue, ...blue,
]), gl.STATIC_DRAW);
gl.drawArrays(gl.POINTS, 0, 4);
function createShader(gl, type, shaderSource) {
const shader = gl.createShader(type);
gl.shaderSource(shader, shaderSource);
gl.compileShader(shader);
const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if(!success) {
console.warn(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
}
return shader;
}
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
const success = gl.getProgramParameter(program, gl.LINK_STATUS);
if(!success) {
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
}
return program;
}
//////////////////////////////////////////////
// REGL
//////////////////////////////////////////////
const regl = createREGL(canvas2);
regl.clear({ color: [0, 0, 0, 0], depth: 1 });
regl({
frag: `
precision mediump float;
varying vec4 fragColor;
void main () {
gl_FragColor = fragColor;
}`,
vert: `
precision mediump float;
attribute vec2 position;
attribute vec4 color;
varying vec4 fragColor;
uniform float pointWidth;
void main () {
fragColor = color;
gl_PointSize = pointWidth;
gl_Position = vec4(position, 0, 1);
}`,
attributes: {
position: [
[-0.05, -0.05],
[-0.05, 0.05],
[0.05, -0.05],
[0.05, 0.05],
],
color: [
[1, 0, 0, 0.5],
[1, 0, 0, 0.5],
[0, 0, 1, 0.5],
[0, 0, 1, 0.5]
],
},
uniforms: {
pointWidth: 50,
},
blend: {
enable: true,
func: { src: 'src alpha', dst:'one minus src alpha' }
},
count: 4,
primitive: 'points',
})();
#bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #808080;
background: black;
}
#c1, #c2 {
width: 240px;
height: 240px;
border: 1px solid white;
}
em {
display: block;
}
<div id="bg">
<canvas id="c1"></canvas>
<canvas id="c2"></canvas>
<em>Left is pure WebGL. Right is Regl.</em>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/regl/1.3.7/regl.min.js"></script>
Am I doing something wrong? How could I achieve the same kind of blending that the pure webgl code produces? Thanks!
Thanks to this great answer I figured it out:
In a nutshell, the blend function needs to be adjusted and the depth test needs to be disabled. (But I still don't know why the blend function, that worked in the vanilla WebGL example, didn't work in Regl)
Use the following blend mode
blend: {
enable: true,
func: {
srcRGB: 'src alpha',
srcAlpha: 'src alpha',
dstRGB: 'one minus src alpha',
dstAlpha: 'one minus src alpha',
},
},
Disable depth test
depth: { enable: false },
Here's the fixed example from my question: http://jsfiddle.net/8gyf7pek/22/
I am new to WebGL and I'm try to learn create a simple checkerboard game.
I have created the checker boxes based on this tutorial (http://www.martinchristen.ch/webgl/tutorial03).
Now I'm stuck at this part where I need to add in the pawn.
Anybody kind enough to guide me?
HTML
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec2 aVertexPosition;
varying vec2 pos;
void main() {
gl_Position = vec4(aVertexPosition, 0.0, 1.0);
pos = aVertexPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
uniform vec4 uColor;
varying vec2 pos;
void main() {
float x = 0.5*(pos.x+1.0); // range [0,1]
float y = 0.5*(pos.y+1.0); // range [0,1]
// checkerboard shader:
if ((mod(4.0*x, 1.0) < 0.5) ^^ (mod(4.0*y, 1.0) < 0.5))
{
gl_FragColor = vec4(0.0,0.0,0.0,1.0);
}
else
{
gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
}
</script>
<script type="text/javascript" src="webgl-utils.js"></script>
<script type="text/javascript" src="initShaders.js"></script>
<script type="text/javascript" src="MV.js"></script>
<script type="text/javascript" src="checker.js"></script>
<body>
<canvas id="gl-canvas" width="640" height="640">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
Javascript
"use strict";
var canvas;
var gl;
var movement = false;
var numItems;
var vertices = new Float32Array([
-1, 1, 1, 1, 1,-1, // Triangle 1
-1, 1, 1, -1,-1,-1, // Triangle 2
-1, 1, 1, -1,-1,-1
]);
var colors = [
vec4( 0.0, 0.0, 0.0, 1.0 ), // black
vec4( 1.0, 0.0, 0.0, 1.0 ) // red
];
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
canvas.addEventListener("mousedown", function(event){
movement = true;
//get x y coordinates
var t = vec2(2*event.clientX/canvas.width-1,
2*(canvas.height-event.clientY)/canvas.height-1);
console.log(t);
});
canvas.addEventListener("mouseup", function(event){
movement = false;
});
canvas.addEventListener("mousemove", function(event){
if (movement) {
}
});
// Setup Shaders:
var v = document.getElementById("vertex-shader").firstChild.nodeValue;
var f = document.getElementById("fragment-shader").firstChild.nodeValue;
var vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, v);
gl.compileShader(vs);
if (!gl.getShaderParameter(vs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(vs));
var fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, f);
gl.compileShader(fs);
if (!gl.getShaderParameter(fs, gl.COMPILE_STATUS))
alert(gl.getShaderInfoLog(fs));
var program = gl.createProgram();
gl.attachShader(program, vs);
gl.attachShader(program, fs);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS))
alert(gl.getProgramInfoLog(program));
var vbuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var itemSize = 2; // we have 2 triangles!
numItems = vertices.length / itemSize;
// Viewport
gl.viewport(0, 0, canvas.width, canvas.height);
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Setup Geometry:
gl.useProgram(program);
program.uColor = gl.getUniformLocation(program, "uColor");
gl.uniform4fv(program.uColor, [0.5, 0.0, 0.0, 1.0]);
program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition");
gl.enableVertexAttribArray(program.aVertexPosition);
gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0);
render();
}
function render() {
gl.drawArrays(gl.TRIANGLES, 0, numItems);
window.requestAnimFrame(render);
}
Thanks a lot!