How can I achieve fullscreen freehand drawing using webgl?

Question

How can I achieve fullscreen freehand drawing using webgl?

One interesting feature I would like to incorporate is mouse gestures in webgl where users can freely draw on the screen. By utilizing 3D webgl, we can enhance the drawing experience with shader effects like fire effects, glows, and other visually appealing graphics.

What is the best method currently recommended for drawing efficiently on the screen using webgl?

Thank you!

javascript webgl three.js

Answer 1

Answer №1

There are two possible approaches you can take:

One option is to draw to a frame buffer object (fbo) and then draw the fbo to the canvas.

Alternatively, you could specify 'preserveDrawingBuffer: true' when creating the WebGL context.

var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer:true});

program = twgl.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
gl.useProgram(program);

var positionLoc = gl.getAttribLocation(program, "v_position");
var offsetLoc = gl.getUniformLocation(program, "u_offset");

var res = 1;
setupQuad(gl, res, positionLoc);

canvas.addEventListener('mousemove', draw, false);

function draw(event) {
  var m = getNoPaddingNoBorderCanvasRelativeMousePosition(event);
  // convert mouse coords to clip space since that's what this
  // particular shader is using. See 
  // https://webglfundamentals.org
  // for how to use pixels instead of clip space. 
  var x = m.x / gl.canvas.width * 2 - 1;
  var y = m.y / gl.canvas.height * -2 + 1;  // flip y

  drawBrush(x, y);
}

function drawBrush(x, y) {
  gl.uniform2f(offsetLoc, x, y);

  gl.drawElements(gl.TRIANGLES, res * res * 6, gl.UNSIGNED_SHORT, 0);
}

drawBrush(0, 0);



function setupQuad(gl, gridRes, positionLoc) {
  var scale = 0.05;
  var objects = [];

  var vertsAcross = gridRes + 1;
  var numVerts = vertsAcross * vertsAcross;
  var positions = new Float32Array(numVerts * 2);
  var indices = new Uint16Array(6 * gridRes * gridRes);
  var poffset = 0;

  for (var zz = 0; zz <= gridRes; ++zz) {
    for (var xx = 0; xx <= gridRes; ++xx) {
      var u = xx / gridRes;
      var v = zz / gridRes;
      positions[poffset + 0] = (-1 + 2 * u) * scale;
      positions[poffset + 1] = (-1 + 2 * v) * scale;
      poffset += 2;
    }
  }
    
  var tbase = 0;
  for (var zz = 0; zz < gridRes; ++zz) {
    var index = zz * vertsAcross;
    for (var xx = 0; xx < gridRes; ++xx) {
      indices[tbase + 0] = index + 0;
      indices[tbase + 1] = index + 1;
      indices[tbase + 2] = index + vertsAcross;
      indices[tbase + 3] = index + vertsAcross;
      indices[tbase + 4] = index + 1;
      indices[tbase + 5] = index + vertsAcross + 1;
      index += 1;
      tbase += 6;
    }
  }
    
  function makeBuffer(data, type, size, loc) {
    var buf = gl.createBuffer();
    gl.bindBuffer(type, buf);
    gl.bufferData(type, data, gl.STATIC_DRAW);
    if (type == gl.ARRAY_BUFFER) {
      gl.enableVertexAttribArray(loc);
      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0);
    }
    return buf;
  }
    
  objects.push(makeBuffer(positions, gl.ARRAY_BUFFER, 2, positionLoc));
  objects.push(makeBuffer(indices, gl.ELEMENT_ARRAY_BUFFER));
    
  return objects;
};

function getRelativeMousePosition(event, target) {
  target = target || event.target;
  var rect = target.getBoundingClientRect();

  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  }
}

// assumes target or event.target is canvas
function getNoPaddingNoBorderCanvasRelativeMousePosition(event, target) {
  target = target || event.target;
  var pos = getRelativeMousePosition(event, target);

  pos.x = pos.x * target.width  / canvas.clientWidth;
  pos.y = pos.y * target.height / canvas.clientHeight;

  return pos;  
}

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 v_position;
uniform vec2 u_offset;
    
void main() {
    gl_Position = vec4(v_position + u_offset, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
    gl_FragColor = vec4(0, 1, 0, 1);  
}
</script>
<canvas id="canvas" width="400" height="300"></canvas>

Answer 2

There are two possible approaches you can take:

One option is to draw to a frame buffer object (fbo) and then draw the fbo to the canvas.

Alternatively, you could specify 'preserveDrawingBuffer: true' when creating the WebGL context.

var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl", {preserveDrawingBuffer:true});

program = twgl.createProgramFromScripts(gl, ["2d-vertex-shader", "2d-fragment-shader"]);
gl.useProgram(program);

var positionLoc = gl.getAttribLocation(program, "v_position");
var offsetLoc = gl.getUniformLocation(program, "u_offset");

var res = 1;
setupQuad(gl, res, positionLoc);

canvas.addEventListener('mousemove', draw, false);

function draw(event) {
  var m = getNoPaddingNoBorderCanvasRelativeMousePosition(event);
  // convert mouse coords to clip space since that's what this
  // particular shader is using. See 
  // https://webglfundamentals.org
  // for how to use pixels instead of clip space. 
  var x = m.x / gl.canvas.width * 2 - 1;
  var y = m.y / gl.canvas.height * -2 + 1;  // flip y

  drawBrush(x, y);
}

function drawBrush(x, y) {
  gl.uniform2f(offsetLoc, x, y);

  gl.drawElements(gl.TRIANGLES, res * res * 6, gl.UNSIGNED_SHORT, 0);
}

drawBrush(0, 0);



function setupQuad(gl, gridRes, positionLoc) {
  var scale = 0.05;
  var objects = [];

  var vertsAcross = gridRes + 1;
  var numVerts = vertsAcross * vertsAcross;
  var positions = new Float32Array(numVerts * 2);
  var indices = new Uint16Array(6 * gridRes * gridRes);
  var poffset = 0;

  for (var zz = 0; zz <= gridRes; ++zz) {
    for (var xx = 0; xx <= gridRes; ++xx) {
      var u = xx / gridRes;
      var v = zz / gridRes;
      positions[poffset + 0] = (-1 + 2 * u) * scale;
      positions[poffset + 1] = (-1 + 2 * v) * scale;
      poffset += 2;
    }
  }
    
  var tbase = 0;
  for (var zz = 0; zz < gridRes; ++zz) {
    var index = zz * vertsAcross;
    for (var xx = 0; xx < gridRes; ++xx) {
      indices[tbase + 0] = index + 0;
      indices[tbase + 1] = index + 1;
      indices[tbase + 2] = index + vertsAcross;
      indices[tbase + 3] = index + vertsAcross;
      indices[tbase + 4] = index + 1;
      indices[tbase + 5] = index + vertsAcross + 1;
      index += 1;
      tbase += 6;
    }
  }
    
  function makeBuffer(data, type, size, loc) {
    var buf = gl.createBuffer();
    gl.bindBuffer(type, buf);
    gl.bufferData(type, data, gl.STATIC_DRAW);
    if (type == gl.ARRAY_BUFFER) {
      gl.enableVertexAttribArray(loc);
      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, 0, 0);
    }
    return buf;
  }
    
  objects.push(makeBuffer(positions, gl.ARRAY_BUFFER, 2, positionLoc));
  objects.push(makeBuffer(indices, gl.ELEMENT_ARRAY_BUFFER));
    
  return objects;
};

function getRelativeMousePosition(event, target) {
  target = target || event.target;
  var rect = target.getBoundingClientRect();

  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top,
  }
}

// assumes target or event.target is canvas
function getNoPaddingNoBorderCanvasRelativeMousePosition(event, target) {
  target = target || event.target;
  var pos = getRelativeMousePosition(event, target);

  pos.x = pos.x * target.width  / canvas.clientWidth;
  pos.y = pos.y * target.height / canvas.clientHeight;

  return pos;  
}

canvas { border: 1px solid black; }

<script src="https://twgljs.org/dist/twgl.min.js"></script>
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 v_position;
uniform vec2 u_offset;
    
void main() {
    gl_Position = vec4(v_position + u_offset, 0, 1);
}
</script>
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;
void main() {
    gl_FragColor = vec4(0, 1, 0, 1);  
}
</script>
<canvas id="canvas" width="400" height="300"></canvas>

How can I achieve fullscreen freehand drawing using webgl?

Answer №1

Similar questions

The UI bootstrap dropdown toggle requires two clicks to reopen after being manually closed

Determine the dimensions of the objects within a JSON array

Utilizing Three.js to showcase large 3D images from a JSON file

React App with Material UI V1-beta Integration

The require statement in Vue.js is failing to function dynamically

Tips for refreshing the current page with passing a parameter in the URL?

Striving to implement a dynamic dropdown menu using React's <select> element and rendering users from an array as selectable options

Alter the entity type when passing it as a parameter

Issue with saving cookie from Express.js backend to Nuxt.js frontend

Looking to attach the "addEventListener" method to multiple elements that share the same class?

The getelementbyid function can only target and retrieve the information from the first ID within a PHP

Steps to show a particular row in a Vue.js API

Javascript did not provide any prompt

The drop-down button unexpectedly disappears when using Bootstrap in combination with jQuery autocomplete

Enhancing web page interactivity through dynamic element names with Javascript and jQuery

Timezones not synchronizing properly with Moment.js

ng-repeat not functioning properly with custom tabs

Adjust the size of the text and save it in a cookie for later use

Dealing with an empty req.body in an Express.js POST request

Issue with Flowtype not properly refreshing when maximizing or minimizing