shallaa · April 6, 2017 13:12
diff --git a/TT.html b/TT.html
 <!doctype html>
 <html>
 <head>
  <meta charset="utf-8">
  <title>무제 문서</title>
 </head>
 <body>
 <canvas id="c" width="500" height="500"></canvas>
 <script id="2d-vertex-shader2" type="notjs">
 attribute vec4 a_position;
 uniform mat4 u_matrix;

 void main(){
 	gl_Position = u_matrix * a_position;
 }

 </script>
 <script id="2d-fragment-shader2" type="notjs">
 precision mediump float;

 void main(){
 	 gl_FragColor = vec4(1.0, 0.5, 0.5, 1.0);
 }

 </script>
 <script>
  var canvas = document.getElementById("c");
  var gl = canvas.getContext("webgl");
  function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if (success) {
      return shader;
    }
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);
  }
  var vertexShaderSource = document.getElementById("2d-vertex-shader2").text;
  var fragmentShaderSource = document.getElementById("2d-fragment-shader2").text;

  var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

  function createProgram(gl, vertexShader, fragmentShader) {
    var program = gl.createProgram();
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    gl.linkProgram(program);
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if (success) {
      return program;
    }
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
  }

  function main() {
    loadImages([
      'a.jpg',
      'star.jpg'
    ], render);
  }
  function loadImage(url, callback) {
    var image = new Image();
    image.src = url;
    image.onload = callback;
    return image;
  }
  function loadImages(urls, callback) {
    var images = [];
    var imagesToLoad = urls.length;
    var onImageLoad = function () {
      --imagesToLoad;
      if (imagesToLoad == 0) {
        callback(images);
      }
    };
    for (var ii = 0; ii < imagesToLoad; ++ii) {
      var image = loadImage(urls[ii], onImageLoad);
      images.push(image);
    }
  }
  function computeKernelWeight(kernel) {
    var weight = kernel.reduce(function (p, c) {
      return p + c;
    });
    return weight <= 0 ? 1 : weight;
  }
  function render(images) {
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clearColor(0, 0, 0, 0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    var program = createProgram(gl, vertexShader, fragmentShader);
    gl.useProgram(program);

 	  var size = 3;
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0;
    var offset = 0;
    var positionBuffer = gl.createBuffer();
    var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    setGeometry(gl);
    gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

    var translation = [40, 40, 50];
    var rotation = [5, 15, 15];
    var scale =[.8, .8, .8];
    var angleInRadians = rotation * Math.PI / 180;
    var matrix = m4.projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400);
    var matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
    var primitiveType = gl.TRIANGLES;
    var count = 18;
    for (var i = 0; i < 5; i++) {
      matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
      matrix = m4.xRotate(matrix, rotation[0] * angleInRadians);
      matrix = m4.yRotate(matrix, rotation[1] * angleInRadians);
      matrix = m4.zRotate(matrix, rotation[2] * angleInRadians);
      matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
      gl.uniformMatrix4fv(matrixUniformLocation, false, matrix);

      gl.drawArrays(primitiveType, offset, count);
    }
  }
  function randomInt(range) {
    return Math.floor(Math.random() * range);
  }
  function printSineAndCosineForAnAngle(angleInDegrees) {
    var rotation = [];
    var angleInRadians = angleInDegrees * Math.PI / 180;
    rotation[0] = Math.sin(angleInRadians);
    rotation[1] = Math.cos(angleInRadians);
    return rotation;
  }
  function setRectangle(gl, x, y, width, height) {
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      x, y,
      x + width, y,
      x, y + height,
      x, y + height,
      x + width, y,
      x + width, y + height
    ]), gl.STATIC_DRAW);
  }
  function setColor(gl) {
    var r1 = Math.random() * 256; // 0 to 255.99999
    var b1 = Math.random() * 256; // these values
    var g1 = Math.random() * 256; // will be truncated
    var r2 = Math.random() * 256; // when stored in the
    var b2 = Math.random() * 256; // Uint8Array
    var g2 = Math.random() * 256;

    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Uint8Array(   // Uint8Array
        [r1, b1, g1, 255,
          r1, b1, g1, 255,
          r1, b1, g1, 255,
          r2, b2, g2, 255,
          r2, b2, g2, 255,
          r2, b2, g2, 255]),
      gl.STATIC_DRAW);
  }
  function setGeometry(gl) {
    gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array([
        // left column
        0, 0, 0,
        30, 0, 0,
        0, 150, 0,
        0, 150, 0,
        30, 0, 0,
        30, 150, 0,

        // top rung
        30, 0, 0,
        100, 0, 0,
        30, 30, 0,
        30, 30, 0,
        100, 0, 0,
        100, 30, 0,

        // middle rung
        30, 60, 0,
        67, 60, 0,
        30, 90, 0,
        30, 90, 0,
        67, 60, 0,
        67, 90, 0]),
      gl.STATIC_DRAW);
  }
  var m4 = {

    projection: function(width, height, depth) {
      // Note: This matrix flips the Y axis so 0 is at the top.
      return [
        2 / width, 0, 0, 0,
        0, -2 / height, 0, 0,
        0, 0, 2 / depth, 0,
        -1, 1, 0, 1,
      ];
    },

    multiply: function(a, b) {
      var a00 = a[0 * 4 + 0];
      var a01 = a[0 * 4 + 1];
      var a02 = a[0 * 4 + 2];
      var a03 = a[0 * 4 + 3];
      var a10 = a[1 * 4 + 0];
      var a11 = a[1 * 4 + 1];
      var a12 = a[1 * 4 + 2];
      var a13 = a[1 * 4 + 3];
      var a20 = a[2 * 4 + 0];
      var a21 = a[2 * 4 + 1];
      var a22 = a[2 * 4 + 2];
      var a23 = a[2 * 4 + 3];
      var a30 = a[3 * 4 + 0];
      var a31 = a[3 * 4 + 1];
      var a32 = a[3 * 4 + 2];
      var a33 = a[3 * 4 + 3];
      var b00 = b[0 * 4 + 0];
      var b01 = b[0 * 4 + 1];
      var b02 = b[0 * 4 + 2];
      var b03 = b[0 * 4 + 3];
      var b10 = b[1 * 4 + 0];
      var b11 = b[1 * 4 + 1];
      var b12 = b[1 * 4 + 2];
      var b13 = b[1 * 4 + 3];
      var b20 = b[2 * 4 + 0];
      var b21 = b[2 * 4 + 1];
      var b22 = b[2 * 4 + 2];
      var b23 = b[2 * 4 + 3];
      var b30 = b[3 * 4 + 0];
      var b31 = b[3 * 4 + 1];
      var b32 = b[3 * 4 + 2];
      var b33 = b[3 * 4 + 3];
      return [
        b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
        b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
        b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
        b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
        b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
        b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
        b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
        b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
        b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
        b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
        b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
        b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
        b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
        b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
        b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
        b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
      ];
    },

    translation: function(tx, ty, tz) {
      return [
        1,  0,  0,  0,
        0,  1,  0,  0,
        0,  0,  1,  0,
        tx, ty, tz, 1,
      ];
    },

    xRotation: function(angleInRadians) {
      var c = Math.cos(angleInRadians);
      var s = Math.sin(angleInRadians);

      return [
        1, 0, 0, 0,
        0, c, s, 0,
        0, -s, c, 0,
        0, 0, 0, 1,
      ];
    },

    yRotation: function(angleInRadians) {
      var c = Math.cos(angleInRadians);
      var s = Math.sin(angleInRadians);

      return [
        c, 0, -s, 0,
        0, 1, 0, 0,
        s, 0, c, 0,
        0, 0, 0, 1,
      ];
    },

    zRotation: function(angleInRadians) {
      var c = Math.cos(angleInRadians);
      var s = Math.sin(angleInRadians);

      return [
        c, s, 0, 0,
        -s, c, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1,
      ];
    },

    scaling: function(sx, sy, sz) {
      return [
        sx, 0,  0,  0,
        0, sy,  0,  0,
        0,  0, sz,  0,
        0,  0,  0,  1,
      ];
    },

    translate: function(m, tx, ty, tz) {
      return m4.multiply(m, m4.translation(tx, ty, tz));
    },

    xRotate: function(m, angleInRadians) {
      return m4.multiply(m, m4.xRotation(angleInRadians));
    },

    yRotate: function(m, angleInRadians) {
      return m4.multiply(m, m4.yRotation(angleInRadians));
    },

    zRotate: function(m, angleInRadians) {
      return m4.multiply(m, m4.zRotation(angleInRadians));
    },

    scale: function(m, sx, sy, sz) {
      return m4.multiply(m, m4.scaling(sx, sy, sz));
    }
  };
  render();
 </script>
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>무제 문서</title>
	</head>
	<body>
	<canvas id="c" width="500" height="500"></canvas>
	<script id="2d-vertex-shader2" type="notjs">
	attribute vec4 a_position;
	uniform mat4 u_matrix;

	void main(){
	gl_Position = u_matrix * a_position;
	}

	</script>
	<script id="2d-fragment-shader2" type="notjs">
	precision mediump float;

	void main(){
	gl_FragColor = vec4(1.0, 0.5, 0.5, 1.0);
	}

	</script>
	<script>
	var canvas = document.getElementById("c");
	var gl = canvas.getContext("webgl");
	function createShader(gl, type, source) {
	var shader = gl.createShader(type);
	gl.shaderSource(shader, source);
	gl.compileShader(shader);
	var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
	if (success) {
	return shader;
	}
	console.log(gl.getShaderInfoLog(shader));
	gl.deleteShader(shader);
	}
	var vertexShaderSource = document.getElementById("2d-vertex-shader2").text;
	var fragmentShaderSource = document.getElementById("2d-fragment-shader2").text;

	var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
	var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

	function createProgram(gl, vertexShader, fragmentShader) {
	var program = gl.createProgram();
	gl.attachShader(program, vertexShader);
	gl.attachShader(program, fragmentShader);
	gl.linkProgram(program);
	var success = gl.getProgramParameter(program, gl.LINK_STATUS);
	if (success) {
	return program;
	}
	console.log(gl.getProgramInfoLog(program));
	gl.deleteProgram(program);
	}

	function main() {
	loadImages([
	'a.jpg',
	'star.jpg'
	], render);
	}
	function loadImage(url, callback) {
	var image = new Image();
	image.src = url;
	image.onload = callback;
	return image;
	}
	function loadImages(urls, callback) {
	var images = [];
	var imagesToLoad = urls.length;
	var onImageLoad = function () {
	--imagesToLoad;
	if (imagesToLoad == 0) {
	callback(images);
	}
	};
	for (var ii = 0; ii < imagesToLoad; ++ii) {
	var image = loadImage(urls[ii], onImageLoad);
	images.push(image);
	}
	}
	function computeKernelWeight(kernel) {
	var weight = kernel.reduce(function (p, c) {
	return p + c;
	});
	return weight <= 0 ? 1 : weight;
	}
	function render(images) {
	gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
	gl.clearColor(0, 0, 0, 0);
	gl.clear(gl.COLOR_BUFFER_BIT);

	var program = createProgram(gl, vertexShader, fragmentShader);
	gl.useProgram(program);

	var size = 3;
	var type = gl.FLOAT;
	var normalize = false;
	var stride = 0;
	var offset = 0;
	var positionBuffer = gl.createBuffer();
	var positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
	gl.enableVertexAttribArray(positionAttributeLocation);
	gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
	setGeometry(gl);
	gl.vertexAttribPointer(positionAttributeLocation, size, type, normalize, stride, offset);

	var translation = [40, 40, 50];
	var rotation = [5, 15, 15];
	var scale =[.8, .8, .8];
	var angleInRadians = rotation * Math.PI / 180;
	var matrix = m4.projection(gl.canvas.clientWidth, gl.canvas.clientHeight, 400);
	var matrixUniformLocation = gl.getUniformLocation(program, 'u_matrix');
	var primitiveType = gl.TRIANGLES;
	var count = 18;
	for (var i = 0; i < 5; i++) {
	matrix = m4.translate(matrix, translation[0], translation[1], translation[2]);
	matrix = m4.xRotate(matrix, rotation[0] * angleInRadians);
	matrix = m4.yRotate(matrix, rotation[1] * angleInRadians);
	matrix = m4.zRotate(matrix, rotation[2] * angleInRadians);
	matrix = m4.scale(matrix, scale[0], scale[1], scale[2]);
	gl.uniformMatrix4fv(matrixUniformLocation, false, matrix);

	gl.drawArrays(primitiveType, offset, count);
	}
	}
	function randomInt(range) {
	return Math.floor(Math.random() * range);
	}
	function printSineAndCosineForAnAngle(angleInDegrees) {
	var rotation = [];
	var angleInRadians = angleInDegrees * Math.PI / 180;
	rotation[0] = Math.sin(angleInRadians);
	rotation[1] = Math.cos(angleInRadians);
	return rotation;
	}
	function setRectangle(gl, x, y, width, height) {
	gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
	x, y,
	x + width, y,
	x, y + height,
	x, y + height,
	x + width, y,
	x + width, y + height
	]), gl.STATIC_DRAW);
	}
	function setColor(gl) {
	var r1 = Math.random() * 256; // 0 to 255.99999
	var b1 = Math.random() * 256; // these values
	var g1 = Math.random() * 256; // will be truncated
	var r2 = Math.random() * 256; // when stored in the
	var b2 = Math.random() * 256; // Uint8Array
	var g2 = Math.random() * 256;

	gl.bufferData(
	gl.ARRAY_BUFFER,
	new Uint8Array( // Uint8Array
	[r1, b1, g1, 255,
	r1, b1, g1, 255,
	r1, b1, g1, 255,
	r2, b2, g2, 255,
	r2, b2, g2, 255,
	r2, b2, g2, 255]),
	gl.STATIC_DRAW);
	}
	function setGeometry(gl) {
	gl.bufferData(
	gl.ARRAY_BUFFER,
	new Float32Array([
	// left column
	0, 0, 0,
	30, 0, 0,
	0, 150, 0,
	0, 150, 0,
	30, 0, 0,
	30, 150, 0,

	// top rung
	30, 0, 0,
	100, 0, 0,
	30, 30, 0,
	30, 30, 0,
	100, 0, 0,
	100, 30, 0,

	// middle rung
	30, 60, 0,
	67, 60, 0,
	30, 90, 0,
	30, 90, 0,
	67, 60, 0,
	67, 90, 0]),
	gl.STATIC_DRAW);
	}
	var m4 = {

	projection: function(width, height, depth) {
	// Note: This matrix flips the Y axis so 0 is at the top.
	return [
	2 / width, 0, 0, 0,
	0, -2 / height, 0, 0,
	0, 0, 2 / depth, 0,
	-1, 1, 0, 1,
	];
	},

	multiply: function(a, b) {
	var a00 = a[0 * 4 + 0];
	var a01 = a[0 * 4 + 1];
	var a02 = a[0 * 4 + 2];
	var a03 = a[0 * 4 + 3];
	var a10 = a[1 * 4 + 0];
	var a11 = a[1 * 4 + 1];
	var a12 = a[1 * 4 + 2];
	var a13 = a[1 * 4 + 3];
	var a20 = a[2 * 4 + 0];
	var a21 = a[2 * 4 + 1];
	var a22 = a[2 * 4 + 2];
	var a23 = a[2 * 4 + 3];
	var a30 = a[3 * 4 + 0];
	var a31 = a[3 * 4 + 1];
	var a32 = a[3 * 4 + 2];
	var a33 = a[3 * 4 + 3];
	var b00 = b[0 * 4 + 0];
	var b01 = b[0 * 4 + 1];
	var b02 = b[0 * 4 + 2];
	var b03 = b[0 * 4 + 3];
	var b10 = b[1 * 4 + 0];
	var b11 = b[1 * 4 + 1];
	var b12 = b[1 * 4 + 2];
	var b13 = b[1 * 4 + 3];
	var b20 = b[2 * 4 + 0];
	var b21 = b[2 * 4 + 1];
	var b22 = b[2 * 4 + 2];
	var b23 = b[2 * 4 + 3];
	var b30 = b[3 * 4 + 0];
	var b31 = b[3 * 4 + 1];
	var b32 = b[3 * 4 + 2];
	var b33 = b[3 * 4 + 3];
	return [
	b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
	b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
	b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
	b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
	b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
	b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
	b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
	b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
	b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
	b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
	b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
	b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
	b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
	b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
	b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
	b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
	];
	},

	translation: function(tx, ty, tz) {
	return [
	1, 0, 0, 0,
	0, 1, 0, 0,
	0, 0, 1, 0,
	tx, ty, tz, 1,
	];
	},

	xRotation: function(angleInRadians) {
	var c = Math.cos(angleInRadians);
	var s = Math.sin(angleInRadians);

	return [
	1, 0, 0, 0,
	0, c, s, 0,
	0, -s, c, 0,
	0, 0, 0, 1,
	];
	},

	yRotation: function(angleInRadians) {
	var c = Math.cos(angleInRadians);
	var s = Math.sin(angleInRadians);

	return [
	c, 0, -s, 0,
	0, 1, 0, 0,
	s, 0, c, 0,
	0, 0, 0, 1,
	];
	},

	zRotation: function(angleInRadians) {
	var c = Math.cos(angleInRadians);
	var s = Math.sin(angleInRadians);

	return [
	c, s, 0, 0,
	-s, c, 0, 0,
	0, 0, 1, 0,
	0, 0, 0, 1,
	];
	},

	scaling: function(sx, sy, sz) {
	return [
	sx, 0, 0, 0,
	0, sy, 0, 0,
	0, 0, sz, 0,
	0, 0, 0, 1,
	];
	},

	translate: function(m, tx, ty, tz) {
	return m4.multiply(m, m4.translation(tx, ty, tz));
	},

	xRotate: function(m, angleInRadians) {
	return m4.multiply(m, m4.xRotation(angleInRadians));
	},

	yRotate: function(m, angleInRadians) {
	return m4.multiply(m, m4.yRotation(angleInRadians));
	},

	zRotate: function(m, angleInRadians) {
	return m4.multiply(m, m4.zRotation(angleInRadians));
	},

	scale: function(m, sx, sy, sz) {
	return m4.multiply(m, m4.scaling(sx, sy, sz));
	}
	};
	render();
	</script>
	</body>
	</html>
No results found