Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body onload=main()>
<canvas id="c"></canvas>
  <button id="buttonSpin">Spin</button>
  <p id="nearFar"> The near and far values are displayed here. </p>
</body>
<script src="http://rodger.global-linguist.com/webgl/lib/webgl-utils.js"></script>
<script src="http://rodger.global-linguist.com/webgl/lib/webgl-debug.js"></script>
<script src="http://rodger.global-linguist.com/webgl/lib/cuon-utils.js"></script>  
<script src="http://rodger.global-linguist.com/webgl/lib/cuon-matrix.js"></script>

              
            
!

CSS

              
                @import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
body {
  margin: 0;
}
canvas {
  width: 100vw;
  height: 70vh;
  display: block;
}
button{
		margin-right: auto;
		margin-left: auto;
		display: block;
		font-family: Arial,Helvetica,sans-serif;
		font-size: 100px;
	}
              
            
!

JS

              
                "use strict";
var VSHADER_SOURCE =
  'attribute vec3 a_Position;\n' +
  'attribute vec4 a_Color;\n'+
  'attribute vec2 a_TexCoord;\n' +
  'varying vec4 v_Color;\n'+
  'varying vec2 v_TexCoord;\n' +
  'uniform mat4 u_ProjMatrix;\n' +
  'uniform mat4 u_ModelMatrix;\n' +
  'void main() {\n' +
  'gl_Position = u_ProjMatrix * u_ModelMatrix * vec4(a_Position,1.0);\n' +
  'v_Color = a_Color;\n'+
  'v_TexCoord = a_TexCoord;\n' +
  '}\n';
var FSHADER_SOURCE =
  '#ifdef GL_ES\n' +
  'precision mediump float;\n' +
  '#endif\n' +
  'varying vec4 v_Color;\n'+
  'uniform sampler2D u_Sampler;\n' +
  'uniform sampler2D u_Sampler2;\n' +
  'uniform sampler2D u_Sampler3;\n' +
  'uniform sampler2D u_Sampler4;\n' +
  'uniform sampler2D u_Sampler5;\n' +
  'uniform sampler2D u_Sampler6;\n' +
  'uniform sampler2D u_Sampler7;\n' +
  'uniform sampler2D u_Sampler8;\n' +
  'varying vec2 v_TexCoord;\n' +
  'void main() {\n' + 'gl_FragColor=texture2D(u_Sampler,v_TexCoord)*texture2D(u_Sampler2,v_TexCoord)*texture2D(u_Sampler3,v_TexCoord)*texture2D(u_Sampler4,v_TexCoord)*texture2D(u_Sampler5,v_TexCoord)*texture2D(u_Sampler6,v_TexCoord)*texture2D(u_Sampler7, v_TexCoord)*texture2D(u_Sampler8, v_TexCoord);\n' +
  '}\n';
var startRotate = 0;
var texturesVec=[],Drum=[];
var n = 1;
var auto1,auto2,auto3,auto4,auto5,wild,bonus;
var Sampler1, Sampler2, Sampler3, Sampler4, Sampler5, SamplerB, SamplerW;
var image1,image2,image3,image4,image5,imageB,imageW;
var texturefon ;
function main() {
  var min=1;
  var max=7;
  for(var i=0;i<30;i++)
  {
    min = Math.ceil(min);
    max = Math.floor(max);
    Drum.push(Math.floor(Math.random() * (max - min + 1)) + min);
    //console.log("drum="+Drum[i])
  }
  //console.log("-----------------------")
  var canvas = document.getElementById('c');
  var nf = document.getElementById('nearFar');
  var gl = getWebGLContext(canvas);
  if (!gl) {
    console.log('Failed to get the rendering context for WebGL');
    return;
  }
  
  if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log('Failed to intialize shaders.');
    return;
  }
  var nj = initVertexBuffers(gl);
  if (nj < 0) {
    console.log('Failed to set the vertex information');
    return;
  }
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
  if (!u_ModelMatrix) {
    console.log('Failed to get the storage location of u_ModelMatrix');
    return;
  }
  var currentAngle = 0.0;
  var modelMatrix = new Matrix4();
  var u_ProjMatrix = gl.getUniformLocation(gl.program,'u_ProjMatrix');
  var projMatrix = new Matrix4();
  var g_near = -1.0, g_far = 1.0;
  projMatrix.setOrtho(-1, 1, -1, 1, g_near, g_far);
  nf.innerHTML = 'near: ' + g_near + ', far: ' + g_far;
  gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  if (!initTextures(gl)) {
    console.log('Failed to intialize the texture.');
    return;
  }
  var tick = function() {
    currentAngle = animate(currentAngle);
    if (currentAngle>=1820 ) {
      startRotate=!startRotate;
      currentAngle = 0.0;
    }
    draw(gl, currentAngle, modelMatrix, u_ModelMatrix, u_ProjMatrix,projMatrix);
    requestAnimationFrame(tick, canvas);
  };  
  tick();
  canvas.onmousedown = function(ev) { click(ev, gl, canvas); };
  buttonSpin.onclick = function(ev) { click(ev, gl, canvas); };
}
function animate(angle) {
  if (startRotate) {
   angle+=20;
}
  return angle;
}
function click(ev, gl, canvas) {
  startRotate = !startRotate;
  setTimeout(function(){
  Drum=[];
  var min=1;
  var max=7;
  for(var i=0;i<30;i++)
  {
    min = Math.ceil(min);
    max = Math.floor(max);
    Drum.push(Math.floor(Math.random() * (max - min + 1)) + min);
    /*console.log("drum="+Drum[i])*/
  }
  /*console.log("-----------------------")*/
  }, 1000);
  }
function initVertexBuffers(gl) {
  var sleft = []
  var sright = []
  sleft.push(-0.78);
  sleft.push(-0.48);
  sleft.push(-0.16);
  sleft.push(0.16);
  sleft.push(0.48);
  sright.push(-0.48);
  sright.push(-0.16);
  sright.push(0.16);
  sright.push(0.48);
  sright.push(0.78);
  var jIter = 0, nn = 324;
  var buf=[];
  for (var jj=0;jj<sleft.length;jj++)
  {
    var xleft = sleft[jj];
    var xright = sright[jj];
    for (var i = 0; i < n; i++)
		{
			//front up
			var yTex = 1.0 - parseFloat(i / n);
			var yTex2 = 1.0 - parseFloat((i + 1) /n);

			buf[(0 + i * nn) + jIter * n * nn] = xleft;
			buf[(1 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((90.0 - 60.0 / n * i) * 0.0175);
			buf[(2 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((90.0 - 60.0 / n * i) * 0.0175);
			buf[(3 + i * nn) + jIter * n * nn] = 1.0;
			buf[(4 + i * nn) + jIter * n * nn] = 1.0;
			buf[(5 + i * nn) + jIter * n * nn] = 1.0;
			buf[(6 + i * nn) + jIter * n * nn] = 1.0;
			buf[(7 + i * nn) + jIter * n * nn] = 0.0;
			buf[(8 + i * nn) + jIter * n * nn] = yTex;      
      
			buf[(9 + i * nn) + jIter * n * nn] = xleft;
			buf[(10 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(11 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(12 + i * nn) + jIter * n * nn] = 1.0;
			buf[(13 + i * nn) + jIter * n * nn] = 1.0;
			buf[(14 + i * nn) + jIter * n * nn] = 1.0;
			buf[(15 + i * nn) + jIter * n * nn] = 1.0;
			buf[(16 + i * nn) + jIter * n * nn] = 0.0;
			buf[(17 + i * nn) + jIter * n * nn] = yTex2;

			buf[(18 + i * nn) + jIter * n * nn] = xright;
			buf[(19 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((90.0 - 60.0 / n * i) * 0.0175);
			buf[(20 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((90.0 - 60.0 / n * i) * 0.0175);
			buf[(21 + i * nn) + jIter * n * nn] = 1.0;
			buf[(22 + i * nn) + jIter * n * nn] = 1.0;
			buf[(23 + i * nn) + jIter * n * nn] = 1.0;
			buf[(24 + i * nn) + jIter * n * nn] = 1.0;
			buf[(25 + i * nn) + jIter * n * nn] = 1.0;
			buf[(26 + i * nn) + jIter * n * nn] = yTex;

			buf[(27 + i * nn) + jIter * n * nn] = xright;
			buf[(28 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((90.0 - 60.0 / n * i) * 0.0175);
			buf[(29 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((90.0 - 60.0 / n * i) * 0.0175);
			buf[(30 + i * nn) + jIter * n * nn] = 1.0;
			buf[(31 + i * nn) + jIter * n * nn] = 1.0;
			buf[(32 + i * nn) + jIter * n * nn] = 1.0;
			buf[(33 + i * nn) + jIter * n * nn] = 1.0;
			buf[(34 + i * nn) + jIter * n * nn] = 1.0;
			buf[(35 + i * nn) + jIter * n * nn] = yTex;

			buf[(36 + i * nn) + jIter * n * nn] = xleft;
			buf[(37 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(38 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(39 + i * nn) + jIter * n * nn] = 1.0;
			buf[(40 + i * nn) + jIter * n * nn] = 1.0;
			buf[(41 + i * nn) + jIter * n * nn] = 1.0;
			buf[(42 + i * nn) + jIter * n * nn] = 1.0;
			buf[(43 + i * nn) + jIter * n * nn] = 0.0;
			buf[(44 + i * nn) + jIter * n * nn] = yTex2;

			buf[(45 + i * nn) + jIter * n * nn] = xright;
			buf[(46 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(47 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(48 + i * nn) + jIter * n * nn] = 1.0;
			buf[(49 + i * nn) + jIter * n * nn] = 1.0;
			buf[(50 + i * nn) + jIter * n * nn] = 1.0;
			buf[(51 + i * nn) + jIter * n * nn] = 1.0;
			buf[(52 + i * nn) + jIter * n * nn] = 1.0;
			buf[(53 + i * nn) + jIter * n * nn] = yTex2;
			//front middle
			yTex = 1 - parseFloat(i / n);
			yTex2 = 1 - parseFloat((i + 1) / n);     

			buf[(54 + i * nn) + jIter * n * nn] = xleft;
			buf[(55 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((30.0 - 60.0 / n * i) * 0.0175);
			buf[(56 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((30.0 - 60.0 / n * i) * 0.0175);
			buf[(57 + i * nn) + jIter * n * nn] = 1.0;
			buf[(58 + i * nn) + jIter * n * nn] = 1.0;
			buf[(59 + i * nn) + jIter * n * nn] = 1.0;
			buf[(60 + i * nn) + jIter * n * nn] = 1.0;
			buf[(61 + i * nn) + jIter * n * nn] = 0.0;
			buf[(62 + i * nn) + jIter * n * nn] = yTex;

			buf[(63 + i * nn) + jIter * n * nn] = xleft;
			buf[(64 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(65 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(66 + i * nn) + jIter * n * nn] = 1.0;
			buf[(67 + i * nn) + jIter * n * nn] = 1.0;
			buf[(68 + i * nn) + jIter * n * nn] = 1.0;
			buf[(69 + i * nn) + jIter * n * nn] = 1.0;
			buf[(70 + i * nn) + jIter * n * nn] = 0.0;
			buf[(71 + i * nn) + jIter * n * nn] = yTex2;

			buf[(72 + i * nn) + jIter * n * nn] = xright;
			buf[(73 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((30 - 60.0 / n * i) * 0.0175);
			buf[(74 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((30.0 - 60.0 / n * i) * 0.0175);
			buf[(75 + i * nn) + jIter * n * nn] = 1.0;
			buf[(76 + i * nn) + jIter * n * nn] = 1.0;
			buf[(77 + i * nn) + jIter * n * nn] = 1.0;
			buf[(78 + i * nn) + jIter * n * nn] = 1.0;
			buf[(79 + i * nn) + jIter * n * nn] = 1.0;
			buf[(80 + i * nn) + jIter * n * nn] = yTex;

			buf[(81 + i * nn) + jIter * n * nn] = xright;
			buf[(82 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((30.0 - 60.0 / n * i) * 0.0175);
			buf[(83 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((30.0 - 60.0 / n * i) * 0.0175);
			buf[(84 + i * nn) + jIter * n * nn] = 1.0;
			buf[(85 + i * nn) + jIter * n * nn] = 1.0;
			buf[(86 + i * nn) + jIter * n * nn] = 1.0;
			buf[(87 + i * nn) + jIter * n * nn] = 1.0;
			buf[(88 + i * nn) + jIter * n * nn] = 1.0;
			buf[(89 + i * nn) + jIter * n * nn] = yTex;

			buf[(90 + i * nn) + jIter * n * nn] = xleft;
			buf[(91 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(92 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(93 + i * nn) + jIter * n * nn] = 1.0;
			buf[(94 + i * nn) + jIter * n * nn] = 1.0;
			buf[(95 + i * nn) + jIter * n * nn] = 1.0;
			buf[(96 + i * nn) + jIter * n * nn] = 1.0;
			buf[(97 + i * nn) + jIter * n * nn] = 0.0;
			buf[(98 + i * nn) + jIter * n * nn] = yTex2;

			buf[(99 + i * nn) + jIter * n * nn] = xright;
			buf[(100 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(101 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(102 + i * nn) + jIter * n * nn] = 1.0;
			buf[(103 + i * nn) + jIter * n * nn] = 1.0;
			buf[(104 + i * nn) + jIter * n * nn] = 1.0;
			buf[(105 + i * nn) + jIter * n * nn] = 1.0;
			buf[(106 + i * nn) + jIter * n * nn] = 1.0;
			buf[(107 + i * nn) + jIter * n * nn] = yTex2;
			//front down
			yTex = 1 - parseFloat(i / n);
			yTex2 = 1 - parseFloat((i + 1) / n);

			buf[(108 + i * nn) + jIter * n * nn] = xleft;
			buf[(109 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-30.0 - 60.0 / n * i) * 0.0175);
			buf[(110 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-30.0 - 60.0 / n * i) * 0.0175);
			buf[(111 + i * nn) + jIter * n * nn] = 1.0;
			buf[(112 + i * nn) + jIter * n * nn] = 1.0;
			buf[(113 + i * nn) + jIter * n * nn] = 1.0;
			buf[(114 + i * nn) + jIter * n * nn] = 1.0;
			buf[(115 + i * nn) + jIter * n * nn] = 0.0;
			buf[(116 + i * nn) + jIter * n * nn] = yTex;

			buf[(117 + i * nn) + jIter * n * nn] = xleft;
			buf[(118 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(119 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(120 + i * nn) + jIter * n * nn] = 1.0;
			buf[(121 + i * nn) + jIter * n * nn] = 1.0;
			buf[(122 + i * nn) + jIter * n * nn] = 1.0;
			buf[(123 + i * nn) + jIter * n * nn] = 1.0;
			buf[(124 + i * nn) + jIter * n * nn] = 0.0;
			buf[(125 + i * nn) + jIter * n * nn] = yTex2;

			buf[(126 + i * nn) + jIter * n * nn] = xright;
			buf[(127 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-30.0 - 60.0 / n * i) * 0.0175);
			buf[(128 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-30.0 - 60.0 / n * i) * 0.0175);
			buf[(129 + i * nn) + jIter * n * nn] = 1.0;
			buf[(130 + i * nn) + jIter * n * nn] = 1.0;
			buf[(131 + i * nn) + jIter * n * nn] = 1.0;
			buf[(132 + i * nn) + jIter * n * nn] = 1.0;
			buf[(133 + i * nn) + jIter * n * nn] = 1.0;
			buf[(134 + i * nn) + jIter * n * nn] = yTex;

			buf[(135 + i * nn) + jIter * n * nn] = xright;
			buf[(136 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-30.0 - 60.0 / n * i) * 0.0175);
			buf[(137 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-30.0 - 60.0 / n * i) * 0.0175);
			buf[(138 + i * nn) + jIter * n * nn] = 1.0;
			buf[(139 + i * nn) + jIter * n * nn] = 1.0;
			buf[(140 + i * nn) + jIter * n * nn] = 1.0;
			buf[(141 + i * nn) + jIter * n * nn] = 1.0;
			buf[(142 + i * nn) + jIter * n * nn] = 1.0;
			buf[(143 + i * nn) + jIter * n * nn] = yTex;

			buf[(144 + i * nn) + jIter * n * nn] = xleft;
			buf[(145 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(146 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(147 + i * nn) + jIter * n * nn] = 1.0;
			buf[(148 + i * nn) + jIter * n * nn] = 1.0;
			buf[(149 + i * nn) + jIter * n * nn] = 1.0;
			buf[(150 + i * nn) + jIter * n * nn] = 1.0;
			buf[(151 + i * nn) + jIter * n * nn] = 0.0;
			buf[(152 + i * nn) + jIter * n * nn] = yTex2;

			buf[(153 + i * nn) + jIter * n * nn] = xright;
			buf[(154 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(155 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-30.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(156 + i * nn) + jIter * n * nn] = 1.0;
			buf[(157 + i * nn) + jIter * n * nn] = 1.0;
			buf[(158 + i * nn) + jIter * n * nn] = 1.0;
			buf[(159 + i * nn) + jIter * n * nn] = 1.0;
			buf[(160 + i * nn) + jIter * n * nn] = 1.0;
			buf[(161 + i * nn) + jIter * n * nn] = yTex2;
			//backup
			yTex = 1 - parseFloat(i / n);
			yTex2 = 1 - parseFloat((i + 1) / n);

			buf[(162 + i * nn) + jIter * n * nn] = xleft;
			buf[(163 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((150.0 - 60.0 / n * i) * 0.0175);
			buf[(164 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((150.0 - 60.0 / n * i) * 0.0175);
			buf[(165 + i * nn) + jIter * n * nn] = 1.0;
			buf[(166 + i * nn) + jIter * n * nn] = 1.0;
			buf[(167 + i * nn) + jIter * n * nn] = 1.0;
			buf[(168 + i * nn) + jIter * n * nn] = 1.0;
			buf[(169 + i * nn) + jIter * n * nn] = 0.0;
			buf[(170 + i * nn) + jIter * n * nn] = yTex;

			buf[(171 + i * nn) + jIter * n * nn] = xleft;
			buf[(172 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((150.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(173 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((150.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(174 + i * nn) + jIter * n * nn] = 1.0;
			buf[(175 + i * nn) + jIter * n * nn] = 1.0;
			buf[(176 + i * nn) + jIter * n * nn] = 1.0;
			buf[(177 + i * nn) + jIter * n * nn] = 1.0;
			buf[(178 + i * nn) + jIter * n * nn] = 0.0;
			buf[(179 + i * nn) + jIter * n * nn] = yTex2;

			buf[(180 + i * nn) + jIter * n * nn] = xright;
			buf[(181 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((150.0 - 60.0 / n * i) * 0.0175);
			buf[(182 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((150.0 - 60.0 / n * i) * 0.0175);
			buf[(183 + i * nn) + jIter * n * nn] = 1.0;
			buf[(184 + i * nn) + jIter * n * nn] = 1.0;
			buf[(185 + i * nn) + jIter * n * nn] = 1.0;
			buf[(186 + i * nn) + jIter * n * nn] = 1.0;
			buf[(187 + i * nn) + jIter * n * nn] = 1.0;
			buf[(188 + i * nn) + jIter * n * nn] = yTex;

			buf[(189 + i * nn) + jIter * n * nn] = xright;
			buf[(190 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((150.0 - 60.0 / n * i) * 0.0175);
			buf[(191 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((150.0 - 60.0 / n * i) * 0.0175);
			buf[(192 + i * nn) + jIter * n * nn] = 1.0;
			buf[(193 + i * nn) + jIter * n * nn] = 1.0;
			buf[(194 + i * nn) + jIter * n * nn] = 1.0;
			buf[(195 + i * nn) + jIter * n * nn] = 1.0;
			buf[(196 + i * nn) + jIter * n * nn] = 1.0;
			buf[(197 + i * nn) + jIter * n * nn] = yTex;

			buf[(198 + i * nn) + jIter * n * nn] = xleft;
			buf[(199 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((150.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(200 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((150.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(201 + i * nn) + jIter * n * nn] = 1.0;
			buf[(202 + i * nn) + jIter * n * nn] = 1.0;
			buf[(203 + i * nn) + jIter * n * nn] = 1.0;
			buf[(204 + i * nn) + jIter * n * nn] = 1.0;
			buf[(205 + i * nn) + jIter * n * nn] = 0.0;
			buf[(206 + i * nn) + jIter * n * nn] = yTex2;

			buf[(207 + i * nn) + jIter * n * nn] = xright;
			buf[(208 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((150.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(209 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((150.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(210 + i * nn) + jIter * n * nn] = 1.0;
			buf[(211 + i * nn) + jIter * n * nn] = 1.0;
			buf[(212 + i * nn) + jIter * n * nn] = 1.0;
			buf[(213 + i * nn) + jIter * n * nn] = 1.0;
			buf[(214 + i * nn) + jIter * n * nn] = 1.0;
			buf[(215 + i * nn) + jIter * n * nn] = yTex2;
			//backmiddle
			yTex = 1 - parseFloat(i / n);
			yTex2 = 1 - parseFloat((i + 1) / n);

			buf[(216 + i * nn) + jIter * n * nn] = xleft;
			buf[(217 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((210.0 - 60.0 / n * i) * 0.0175);
			buf[(218 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((210.0 - 60.0 / n * i) * 0.0175);
			buf[(219 + i * nn) + jIter * n * nn] = 1.0;
			buf[(220 + i * nn) + jIter * n * nn] = 1.0;
			buf[(221 + i * nn) + jIter * n * nn] = 1.0;
			buf[(222 + i * nn) + jIter * n * nn] = 1.0;
			buf[(223 + i * nn) + jIter * n * nn] = 0.0;
			buf[(224 + i * nn) + jIter * n * nn] = yTex;

			buf[(225 + i * nn) + jIter * n * nn] = xleft;
			buf[(226 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((210.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(227 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((210.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(228 + i * nn) + jIter * n * nn] = 1.0;
			buf[(229 + i * nn) + jIter * n * nn] = 1.0;
			buf[(230 + i * nn) + jIter * n * nn] = 1.0;
			buf[(231 + i * nn) + jIter * n * nn] = 1.0;
			buf[(232 + i * nn) + jIter * n * nn] = 0.0;
			buf[(233 + i * nn) + jIter * n * nn] = yTex2;

			buf[(234 + i * nn) + jIter * n * nn] = xright;
			buf[(235 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((210.0 - 60.0 / n * i) * 0.0175);
			buf[(236 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((210.0 - 60.0 / n * i) * 0.0175);
			buf[(237 + i * nn) + jIter * n * nn] = 1.0;
			buf[(238 + i * nn) + jIter * n * nn] = 1.0;
			buf[(239 + i * nn) + jIter * n * nn] = 1.0;
			buf[(240 + i * nn) + jIter * n * nn] = 1.0;
			buf[(241 + i * nn) + jIter * n * nn] = 1.0;
			buf[(242 + i * nn) + jIter * n * nn] = yTex;

			buf[(243 + i * nn) + jIter * n * nn] = xright;
			buf[(244 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((210.0 - 60.0 / n * i) * 0.0175);
			buf[(245 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((210.0 - 60.0 / n * i) * 0.0175);
			buf[(246 + i * nn) + jIter * n * nn] = 1.0;
			buf[(247 + i * nn) + jIter * n * nn] = 1.0;
			buf[(248 + i * nn) + jIter * n * nn] = 1.0;
			buf[(249 + i * nn) + jIter * n * nn] = 1.0;
			buf[(250 + i * nn) + jIter * n * nn] = 1.0;
			buf[(251 + i * nn) + jIter * n * nn] = yTex;

			buf[(252 + i * nn) + jIter * n * nn] = xleft;
			buf[(253 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((210.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(254 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((210.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(255 + i * nn) + jIter * n * nn] = 1.0;
			buf[(256 + i * nn) + jIter * n * nn] = 1.0;
			buf[(257 + i * nn) + jIter * n * nn] = 1.0;
			buf[(258 + i * nn) + jIter * n * nn] = 1.0;
			buf[(259 + i * nn) + jIter * n * nn] = 0.0;
			buf[(260 + i * nn) + jIter * n * nn] = yTex2;

			buf[(261 + i * nn) + jIter * n * nn] = xright;
			buf[(262 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((210.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(263 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((210.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(264 + i * nn) + jIter * n * nn] = 1.0;
			buf[(265 + i * nn) + jIter * n * nn] = 1.0;
			buf[(266 + i * nn) + jIter * n * nn] = 1.0;
			buf[(267 + i * nn) + jIter * n * nn] = 1.0;
			buf[(268 + i * nn) + jIter * n * nn] = 1.0;
			buf[(269 + i * nn) + jIter * n * nn] = yTex2;
			/*back down*/
			yTex = 1 - parseFloat(i / n);
			yTex2 = 1 - parseFloat((i + 1) / n);

			buf[(270 + i * nn) + jIter * n * nn] = xleft;
			buf[(271 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-90.0 - 60.0 / n * i) * 0.0175);
			buf[(272 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-90.0 - 60.0 / n * i) * 0.0175);
			buf[(273 + i * nn) + jIter * n * nn] = 1.0;
			buf[(274 + i * nn) + jIter * n * nn] = 1.0;
			buf[(275 + i * nn) + jIter * n * nn] = 1.0;
			buf[(276 + i * nn) + jIter * n * nn] = 1.0;
			buf[(277 + i * nn) + jIter * n * nn] = 0.0;
			buf[(278 + i * nn) + jIter * n * nn] = yTex;

			buf[(279 + i * nn) + jIter * n * nn] = xleft;
			buf[(280 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(281 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(282 + i * nn) + jIter * n * nn] = 1.0;
			buf[(283 + i * nn) + jIter * n * nn] = 1.0;
			buf[(284 + i * nn) + jIter * n * nn] = 1.0;
			buf[(285 + i * nn) + jIter * n * nn] = 1.0;
			buf[(286 + i * nn) + jIter * n * nn] = 0.0;
			buf[(287 + i * nn) + jIter * n * nn] = yTex2;

			buf[(288 + i * nn) + jIter * n * nn] = xright;
			buf[(289 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-90.0 - 60.0 / n * i) * 0.0175);
			buf[(290 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-90.0 - 60.0 / n * i) * 0.0175);
			buf[(291 + i * nn) + jIter * n * nn] = 1.0;
			buf[(292 + i * nn) + jIter * n * nn] = 1.0;
			buf[(293 + i * nn) + jIter * n * nn] = 1.0;
			buf[(294 + i * nn) + jIter * n * nn] = 1.0;
			buf[(295 + i * nn) + jIter * n * nn] = 1.0;
			buf[(296 + i * nn) + jIter * n * nn] = yTex;

			buf[(297 + i * nn) + jIter * n * nn] = xright;
			buf[(298 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-90.0 - 60.0 / n * i) * 0.0175);
			buf[(299 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-90.0 - 60.0 / n * i) * 0.0175);
			buf[(300 + i * nn) + jIter * n * nn] = 1.0;
			buf[(301 + i * nn) + jIter * n * nn] = 1.0;
			buf[(302 + i * nn) + jIter * n * nn] = 1.0;
			buf[(303 + i * nn) + jIter * n * nn] = 1.0;
			buf[(304 + i * nn) + jIter * n * nn] = 1.0;
			buf[(305 + i * nn) + jIter * n * nn] = yTex;

			buf[(306 + i * nn) + jIter * n * nn] = xleft;
			buf[(307 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(308 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(309 + i * nn) + jIter * n * nn] = 1.0;
			buf[(310 + i * nn) + jIter * n * nn] = 1.0;
			buf[(311 + i * nn) + jIter * n * nn] = 1.0;
			buf[(312 + i * nn) + jIter * n * nn] = 1.0;
			buf[(313 + i * nn) + jIter * n * nn] = 0.0;
			buf[(314 + i * nn) + jIter * n * nn] = yTex2;

			buf[(315 + i * nn) + jIter * n * nn] = xright;
			buf[(316 + i * nn) + jIter * n * nn] = 0.68 * Math.sin((-90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(317 + i * nn) + jIter * n * nn] = 0.68 * Math.cos((-90.0 - 60.0 / n * (i + 1)) * 0.0175);
			buf[(318 + i * nn) + jIter * n * nn] = 1.0;
			buf[(319 + i * nn) + jIter * n * nn] = 1.0;
			buf[(320 + i * nn) + jIter * n * nn] = 1.0;
			buf[(321 + i * nn) + jIter * n * nn] = 1.0;
			buf[(322 + i * nn) + jIter * n * nn] = 1.0;
			buf[(323 + i * nn) + jIter * n * nn] = yTex2;
		}
		jIter++;
  }
  //console.log(buf.length)
  buf[buf.length] = -1.0
  buf[buf.length] = 1.0
  buf[buf.length] = 0.0
  buf[buf.length] = 1.0
  buf[buf.length] = 1.0
  buf[buf.length] = 1.0
  buf[buf.length] = 1.0
  buf[buf.length] = 1.0//0
  buf[buf.length] = 1.0//0
    
  buf[buf.length] =-1.0 
  buf[buf.length] =-1.0
  buf[buf.length] =0.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0//0
  buf[buf.length] =0.0//1
  
  buf[buf.length] =1.0
  buf[buf.length] =1.0
  buf[buf.length] =0.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0
  buf[buf.length] =1.0 
  buf[buf.length] =0.0//1
  buf[buf.length] =1.0//0
            
  buf[buf.length] =1.0 
	buf[buf.length] =1.0
	buf[buf.length] =0.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =0.0//1
	buf[buf.length] =1.0//0
	
  buf[buf.length] =-1.0
	buf[buf.length] =-1.0 
	buf[buf.length] =0.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0//0 
	buf[buf.length] =0.0//1
	
  buf[buf.length] =1.0
	buf[buf.length] =-1.0
	buf[buf.length] =0.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
	buf[buf.length] =1.0
  buf[buf.length] =0.0//1
	buf[buf.length] =0.0//1
    
  var vertexTexCoordBuffer = gl.createBuffer();
  if (!vertexTexCoordBuffer) {
    console.log('Failed to create the buffer object');
    return -1;
  }
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
  var bbuf = new Float32Array(buf)
  gl.bufferData(gl.ARRAY_BUFFER,bbuf, gl.STATIC_DRAW);
  var FSIZE = bbuf.BYTES_PER_ELEMENT;
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  if (a_Position < 0) {
    console.log('Failed to get the storage location of a_Position');
    return -1;
  }
  gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 9, 0);
  gl.enableVertexAttribArray(a_Position);
  var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
  if (a_Color < 0) {
    console.log('Failed to get the storage location of a_Color');
    return -1;
  }
  gl.vertexAttribPointer(a_Color, 4, gl.FLOAT, false, FSIZE * 9, FSIZE * 3);
  gl.enableVertexAttribArray(a_Color);
  var a_TexCoord = gl.getAttribLocation(gl.program, 'a_TexCoord');
  if (a_TexCoord < 0) {
    console.log('Failed to get the storage location of a_TexCoord');
    return -1;
  }
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 9, FSIZE * 7);
  gl.enableVertexAttribArray(a_TexCoord);
//end function
}
function requestCORSIfNotSameOrigin(img, url) {
  if ((new URL(url, window.location.href)).origin !== window.location.origin) {
    img.crossOrigin = "";
  }
}
function initTextures(gl) {
 texturefon = gl.createTexture();
  if (!texturefon) {
    console.log('Failed to create the texture object');
    return false;
  }
  var u_Sampler = gl.getUniformLocation(gl.program, 'u_Sampler');
  if (!u_Sampler) {
    console.log('Failed to get the storage location of u_Sampler');
    return false;
  }
  var fon = new Image();
  if (!fon) {
    console.log('Failed to create the image object');
    return false;
  }
  requestCORSIfNotSameOrigin(fon,'https://s6.imgcdn.dev/v7wfT.png');
  fon.onload = function(){ loadTexture(gl, texturefon, u_Sampler, fon,0); };
  fon.src ='https://s6.imgcdn.dev/v7wfT.png'
  LoadDrum(gl);
  return true;
  //'https://s6.imgcdn.dev/vzMFa.jpg'
}
function LoadDrum(gl){
 var paths_1="https://s6.imgcdn.dev/vzuCw.png";//auto1
  var paths_2='https://s6.imgcdn.dev/vz6vL.png';//auto2
  var paths_3='https://s6.imgcdn.dev/vzwnu.png';//auto3
  var paths_4="https://s6.imgcdn.dev/vz40t.png";//auto4
  var paths_5="https://s6.imgcdn.dev/vzC3T.png";//auto5
  var paths_6="https://s6.imgcdn.dev/vzNwD.png";//bonus
  var paths_7="https://s6.imgcdn.dev/vzQT9.png";//wild

  auto1=gl.createTexture();
  
  if (!auto1) {
      console.log('Failed to create the texture object');
      return false;
  }
  Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler2');
  if (!Sampler1 ) {
      console.log('Failed to get the storage location of u_Sampler2');
      return false;
  }
  image1= new Image();
  if (!image1) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(image1,paths_1);
    image1.onload = function(){ loadTexture(gl, auto1, Sampler1, image1,1); };
    image1.src = paths_1;
    auto2=gl.createTexture();
    if (!auto2) {
      console.log('Failed to create the texture object');
      return false;
    }
    Sampler2 = gl.getUniformLocation(gl.program, 'u_Sampler3');
  if (!Sampler2) {
      console.log('Failed to get the storage location of u_Sampler3');
      return false;
    }
    image2= new Image();
  if (!image2) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(image2,paths_2);
    image2.onload = function(){ loadTexture(gl, auto2, Sampler2, image2,2); };
    image2.src = paths_2;

    auto3=gl.createTexture();
    if (!auto3) {
      console.log('Failed to create the texture object');
      return false;
    }
    Sampler3 = gl.getUniformLocation(gl.program, 'u_Sampler4');
  if (!Sampler3) {
      console.log('Failed to get the storage location of u_Sampler4');
      return false;
    
    }
    image3= new Image();
    if (!image3) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(image3,paths_3);
    image3.onload = function(){ loadTexture(gl, auto3, Sampler3, image3,3); };
    image3.src = paths_3;

    auto4=gl.createTexture();
    if (!auto4) {
      console.log('Failed to create the texture object');
      return false;
    }
    Sampler4= gl.getUniformLocation(gl.program, 'u_Sampler5');
    if (!Sampler4){
      console.log('Failed to get the storage location of u_Sampler5');
      return false;
    }
    image4= new Image();
  if (!image4) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(image4,paths_4);
    image4.onload = function(){ loadTexture(gl, auto4, Sampler4,image4,4); };
    image4.src = paths_4;

    auto5=gl.createTexture();
    if (!auto5) {
      console.log('Failed to create the texture object');
      return false;
    }
    Sampler5= gl.getUniformLocation(gl.program, 'u_Sampler6');
    if (!Sampler5) {
      console.log('Failed to get the storage location of u_Sampler6');
      return false;
    }
    image5= new Image();
    if (!image5) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(image5,paths_5);
    image5.onload = function(){ loadTexture(gl, auto5, Sampler5,image5,5); };
    image5.src = paths_5;
  

    bonus=gl.createTexture();
    if (!bonus) {
      console.log('Failed to create the texture object');
      return false;
    }
    SamplerB= gl.getUniformLocation(gl.program, 'u_Sampler7');
    if (!SamplerB) {
      console.log('Failed to get the storage location of u_Sampler7');
      return false;
    
    }
    imageB= new Image();
    if (!imageB) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(imageB,paths_6);
    imageB.onload = function(){ loadTexture(gl, bonus, SamplerB,imageB,6); };
    imageB.src = paths_6;

    wild=gl.createTexture();
    if (!wild) {
      console.log('Failed to create the texture object');
      return false;
    }
    SamplerW= gl.getUniformLocation(gl.program, 'u_Sampler8');
    if (!SamplerW) {
      console.log('Failed to get the storage location of u_Sampler8');
      return false;
    
    }
    imageW= new Image();
    if (!imageW) {
      console.log('Failed to create the image object');
      return false;
    }
    requestCORSIfNotSameOrigin(imageW,paths_7);
    imageW.onload = function(){ loadTexture(gl, wild, SamplerW,imageW,7); };
    imageW.src = paths_7;
}
function loadTexture(gl, textureID, u_SamplerID, imageID,numID) {
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
  //
  gl.activeTexture(gl.TEXTURE0+numID);
  //console.log(gl.TEXTURE0+num);
  //console.log(gl.getError());
  gl.bindTexture(gl.TEXTURE_2D, textureID);
 // console.log(gl.getError());
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 // console.log(gl.getError());
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
 // console.log(gl.getError());
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
 // console.log(gl.getError());
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, imageID);
  /*
  if(gl.getError())
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, imageID);
  if(gl.getError())
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGBA, gl.UNSIGNED_BYTE, imageID);
  if(gl.getError())
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGB, gl.UNSIGNED_BYTE, imageID);
    */
  gl.uniform1i(u_SamplerID, numID);
  
  texturesVec.push(textureID);
}
function getTexture(num){
  switch(num)
    {
      case 0:
        {
          return texturefon;
          break;
        }
      case 1:
        {
          return auto1;
          break;
        }
      case 2:
        {
          return auto2;
          break;
        }
      case 3:
        {
          return auto3;
          break;
        }
      case 4:
        {
          return auto4;
          break;
        }
      case 5:
        {
          return auto5;
          break;
        }
      case 6:
        {
          return bonus;
          break;
        }
      case 7:
        {
          return wild;
          break;
        }
      default:
        {
          return 0;
          break;
        }
    }
}
function draw(gl, currentAngle, modelMatrix, u_ModelMatrix, u_ProjMatrix,projMatrix) {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.enable(gl.DEPTH_TEST);
  gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);
  if(startRotate)
    modelMatrix.setRotate(currentAngle, 1, 0, 0);
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
  var jj=-1;
  for(var j = 0; j < 5; j++)
  {
		gl.bindTexture(gl.TEXTURE_2D, getTexture(Drum[++jj]));
    for (var i = 0 + j * n; i < n + j * n; i++)     
      gl.drawArrays(gl.TRIANGLES, 36 * i, 6);
		gl.bindTexture(gl.TEXTURE_2D, getTexture(Drum[++jj]));
		for (var i = 0 + j * n; i < n + j * n; i++)
		  gl.drawArrays(gl.TRIANGLES, 36 * i + 6, 6);
    gl.bindTexture(gl.TEXTURE_2D, getTexture(Drum[++jj]));
		for (var i = 0 + j * n; i < n + j * n; i++)
		  gl.drawArrays(gl.TRIANGLES, 36 * i + 12, 6);
    gl.bindTexture(gl.TEXTURE_2D, getTexture(Drum[++jj]));
		for (var i = 0 + j * n; i < n + j * n; i++)
		 gl.drawArrays(gl.TRIANGLES, 36 * i + 18, 6);
    gl.bindTexture(gl.TEXTURE_2D, getTexture(Drum[++jj]));
		for (var i = 0 + j * n; i < n + j * n; i++)
		  gl.drawArrays(gl.TRIANGLES, 36 * i + 24, 6);
    gl.bindTexture(gl.TEXTURE_2D, getTexture(Drum[++jj]));
		for (var i = 0 + j * n; i < n + j * n; i++)
		  gl.drawArrays(gl.TRIANGLES, 36 * i + 30, 6);
    }
    modelMatrix.setRotate(0, 1, 0, 0);
    gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
		gl.bindTexture(gl.TEXTURE_2D, getTexture(0));
		gl.drawArrays(gl.TRIANGLES, 36*5*n, 6);
  }

              
            
!
999px

Console