Topic:   WebGL - Drawing Image (Needs Improvements)   (Read 8490 times)


0 Members and 1 Guest are viewing this topic.

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
WebGL - Drawing Image (Needs Improvements)
« on: July 23, 2012, 04:44:33 PM »
Code: [Select]
<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL - 2D Image</title>
<link type="text/css" href="http://games.greggman.com/downloads/examples/webgl/resources/webgl-tutorials.css" rel="stylesheet" />
<script type="text/javascript" src="http://games.greggman.com/downloads/examples/webgl/resources/webgl-utils.js"></script>
<script>
window.onload = main;

function main() {
  image = new Image();
  image.src = "http://games.greggman.com/downloads/examples/webgl/resources/leaves.jpg";  // MUST BE SAME DOMAIN!!!
  image.onload = function() {
    setUp();
setInterval(function(){
x1 += 1;
y1 += 1
for (i = 0; i < 30; i++) {
for (e = 0; e < 10; e++) {
render(image, x1+i*5, y1+e*5);
}
}
},1000/60);
  }
}
var x1 = 0;
var y1 = 0;
var image;
var canvas;
var gl;
var texture;
function setUp() {
  canvas = document.getElementById("canvas");
  gl = getWebGLContext(canvas);
// setup GLSL program
  vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
  program = createProgram(gl, [vertexShader, fragmentShader]);
  gl.useProgram(program);

  // lookup uniforms
  var resolutionLocation = gl.getUniformLocation(program, "u_resolution");

  // set the resolution
  gl.uniform2f(resolutionLocation, canvas.width, canvas.height);

// Create a texture.
  texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Set the parameters so we can render any size image.
  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.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  // Upload the image into the texture.
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

 // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");

  // provide texture coordinates for the rectangle.
  var texCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      0.0,  0.0,
      1.0,  0.0,
      0.0,  1.0,
      0.0,  1.0,
      1.0,  0.0,
      1.0,  1.0]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(texCoordLocation);
  gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);

 

 

  // Create a buffer for the position of the rectangle corners.
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
}

function render(image, x, y) {
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Set a rectangle the same size as the image.
  setRectangle(gl, x, y, image.width, image.height);

  // Draw the rectangle.
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

function randomInt(range) {
  return Math.floor(Math.random() * range);
}

function setRectangle(gl, x, y, width, height) {
  var x1 = x;
  var x2 = x + width;
  var y1 = y;
  var y2 = y + height;
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
     x1, y1,
     x2, y1,
     x1, y2,
     x1, y2,
     x2, y1,
     x2, y2]), gl.STATIC_DRAW);
}

</script>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;

varying vec2 v_texCoord;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

   // pass the texCoord to the fragment shader
   // The GPU will interpolate this value between points.
   v_texCoord = a_texCoord;
}
</script></script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

// our texture
uniform sampler2D u_image;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
   gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>


Here's a live demo of it:
http://gamemakersgarage.com/html5/Draw%20Image-WEBGL.html

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #1 on: July 23, 2012, 04:46:06 PM »
I found this code by scavenging Google, then I manipulated it to do as I please.
It works and it appears to be 2 times faster than drawing 2D canvas.

I just want it to be more than 2 times faster for the chat box game...

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #2 on: July 23, 2012, 05:00:39 PM »
http://games.greggman.com/downloads/examples/webgl/webgl-2d-geometry-translate-better.html

Just found this new example. Difference between what I have and this?

Well apparently I'm calling this method for every frame drawn:
Code: [Select]
function setRectangle(gl, x, y, width, height) {
  var x1 = x;
  var x2 = x + width;
  var y1 = y;
  var y2 = y + height;
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
     x1, y1,
     x2, y1,
     x1, y2,
     x1, y2,
     x2, y1,
     x2, y2]), gl.STATIC_DRAW);
}

And in the new example, they only call the create geometry once... then to actually move stuff they call:
Code: [Select]
 // Draw the scene.
  function drawScene() {
    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Set the translation.
    gl.uniform2fv(translationLocation, translation);

    // Draw the geometry.
    gl.drawArrays(gl.TRIANGLES, 0, 18);
  }

Where as I do....

Code: [Select]
function render(image, x, y) {
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Set a rectangle the same size as the image.
  setRectangle(gl, x, y, image.width, image.height);

  // Draw the rectangle.
  gl.drawArrays(gl.TRIANGLES, 0, 6);
}

I think that could be the problem...

Charlo


  • GMG-er

  • **


  • Posts: 451
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #3 on: July 23, 2012, 06:14:26 PM »
I once tried to learn WebGL, but lots of the terminology went right over my head.  It's fun trying to stay on top of all this new technology.  Looks like you're doing fairly well.   ;)

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #4 on: July 23, 2012, 09:10:35 PM »
Yeah it's tough but this website is really helping me out:
http://www.html5rocks.com/en/tutorials/webgl/webgl_transforms/

One of those last examples gives me almost everything I need. Only 1 more thing, having the ability to draw different geometries without needing to reset the geometry buffer.

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #5 on: July 23, 2012, 09:14:18 PM »
http://www.html5rocks.com/en/tutorials/webgl/million_letters/million_letters.html

WHOA!

Over a million letters being displayed! Instantly and smoothly! Less than 10% CPU!
THIS IS WEBGL BABY!

Here's the tutorial:
http://www.html5rocks.com/en/tutorials/webgl/million_letters/

I hope this is the solution to all my problems.

Zoo


  • GMG Extraordinaire

  • ***


  • Posts: 1686
    • My Bandcamp
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #6 on: July 24, 2012, 12:35:18 PM »
WebGL?!?!? 3D HTML5GM GAMES?!?!?! 3D?!?!??!?!? AS IN 3 DIMENSIONS?!?!? DEPTH AS WELL AS HEIGHT AND WIDTH?!?!? WHERE DO I SIGN UP?!?!?


and seriously speaking, as far as I've heard by not paying much attention, this will let us make fast 3D HTML5 games once you do the thingy and the HTML5 and stuff. I haven't read any of this, but the demos are neat. I haven't programmed in forever, but this is tempting... and confusing looking. I probably sound like an idiot right now. Oh well, not like that's anything new.


Also, question, if this is what I think it is without doing any research, and will let us make 3D games, will we be able to make models in blender, or will we need a different program? Sorry for being an idiot.
Kirby, your pudgy buddy from dream land, is back again on the game boy®!

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #7 on: July 24, 2012, 02:52:51 PM »
If I can get this thing runnin, you'll be able to use Blender awesomeness in your games.

Zoo


  • GMG Extraordinaire

  • ***


  • Posts: 1686
    • My Bandcamp
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #8 on: July 24, 2012, 04:26:28 PM »
:D
Kirby, your pudgy buddy from dream land, is back again on the game boy®!

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #9 on: July 24, 2012, 10:55:19 PM »
Found an awesome place where you can learn WebGL and shaders:
http://webglplayground.net/

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #10 on: July 24, 2012, 11:17:08 PM »
This is intense!
http://lib.ivank.net/?p=demos

This guy has made a framework that renders blazing fast! And does everything!

Zoo


  • GMG Extraordinaire

  • ***


  • Posts: 1686
    • My Bandcamp
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #11 on: July 25, 2012, 08:42:16 AM »
WOAH! 3D AND BOX2D!!!  :P
Kirby, your pudgy buddy from dream land, is back again on the game boy®!

Gan


  • Administrator

  • ^ This guy is amazing.

  • *****


  • Posts: 4411
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #12 on: July 25, 2012, 10:15:09 AM »
The IvanK framework is incredibly easy to use. It's also sprite based and blazing fast. And it's free for everyone to do whatever.
Though the source isn't available. Hmm.

This framework would allow the chat box game to or even the HTML5 game maker to soar to new heights. I dunno though, I don't always like using frameworks. Sometimes I like to learn the base stuff myself and make my own ways of doing it.

What do you guys think?

Edit:
I really like what he says here:
Quote
Incredible speed.
IvanK uses WebGL to render graphics. Your games and apps will be incredibly fast even on low-end devices. Let's say your current flash game has the resolution 600x400, it runs at 25 FPS and uses 60% of CPU. Your equivalent version in IvanK will use 15% of the CPU, it will run at 60 FPS in fullscreen.
If someone makes a game with this tool, it's gonna run epicly.

If I were to change the HTML5 GameMaker to use this, it'd become sprite based. Which means you guys would probably understand it easier.
Though all previous made games would not work with the new GameMaker.

I wish I could use this as an add-on, but apparently his framework uses the whole page, accepts it's own form of input and pretty much takes control.
I guess if I don't go this route, an alternative would be for me to code a WebGL canvas feature in the HTML5 GM that you can run (simplified and easy) WebGL calls on.
« Last Edit: July 25, 2012, 10:31:37 AM by Gan »

Connors


  • ^ This guy is amazing.

  • ****


  • Posts: 2374

  • It's a secret to everyone...
Re: WebGL - Drawing Image (Needs Improvements)
« Reply #13 on: July 27, 2012, 11:58:41 PM »
Well, consider me impressed Gan. I'm all for this new sprite based code if you want to try it.

HOWEVER -
There is a certain old project I would like to finish and I would appreciate you setting up an alternate version of HTML5GM to try the new drawing code.
Warning: The above post may have been modified multiple times.

"In a great game, the character must never perfectly obey the user's command"
 - Tim Rogers

http://connorspuzzles.tumblr.com/