sprawdzenie kodu

0

Witam zaczynam swoją przygodę z webgl i mam problem. Stworzyłam kulkę która sobie lata albo pion albo poziomo ale ni cholery nie umiem zrobić dwóch naraz w różnych kolorach
najpierw kod działający

<HTML>
<script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 coordinates;
    attribute vec4 coordina;
    uniform float movex;
    uniform float scalef;
    void
    main()

    {
        gl_Position.x = coordina.x/scalef+movex;
        gl_Position.y = coordina.y/scalef;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;
        gl_Position.x = coordinates.x/scalef;
        gl_Position.y = coordinates.y/scalef+movex;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;
    }
 </script>
 <script id="fragment-shader" type="x-shader/x-fragment">
    precision mediump float;
    uniform vec4 kolor;
    void
    main()
   {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
       // kolor = gl_FragColor 
    }
 </script>
 <SCRIPT type="text/Javascript">
   var numTris1 = 100;
var vertices1 = [
     0.0,  0.0,  0.0,
     1.0,  0.0,  0.0
 ];

var degPerTri1 = (2 * Math.PI) / numTris1;

for(var i = 0; i < numTris1; i++) {
    var index1 = 2*3 + i*3
    var angle1 = degPerTri1 * (i+1);
    vertices1[index1] = Math.cos(angle1); 
    vertices1[index1+1] = Math.sin(angle1); 
    vertices1[index1+2] = 0;  }
var numTris = 10;
vertices = [
     0.0,  0.0,  0.0,
     1.0,  0.0,  0.0
  ];
var degPerTri = (2 * Math.PI) / numTris;
for(var i = 0; i < numTris; i++) {
    var index = 2*3 + i*3
    var angle = degPerTri * (i+1);
    vertices[index] = Math.cos(angle); 
   vertices[index+1] = Math.sin(angle); 
    vertices[index+2] = 0; 
  
  /*  vertices1[index] = Math.cos(angle); 

    vertices1[index+1] = Math.sin(angle); 

    vertices1[index+2] = 0;*/ 

}        
  var Xpos;
  var Xcor=0.0;
  var step=0.01;

//===================================================================================

// Opis funkcji

//===================================================================================

initShaders=function(gl, vertexShaderId, fragmentShaderId) {

		var vertShdr;

		var fragShdr;



		var vertElem = document.getElementById(vertexShaderId);

		if (!vertElem) {

				alert("Brak vertex shader " + vertexShaderId);

				return -1;

		} else {

				vertShdr = gl.createShader(gl.VERTEX_SHADER);

				gl.shaderSource(vertShdr, vertElem.text);

				gl.compileShader(vertShdr);

				if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS)) {

				var msg = "Vertex shader nie można skompilowć:" + "<pre>" + gl.getShaderInfoLog(vertShdr) + "</pre>";

						alert(msg);

						console.log(msg);

						return -1;

				}

		}



		var fragElem = document.getElementById(fragmentShaderId);

		if (!fragElem) {

				alert("Brak fragment shader " + fragmentShaderId);

				return -1;

		} else {

				fragShdr = gl.createShader(gl.FRAGMENT_SHADER);

				gl.shaderSource(fragShdr, fragElem.text);

				gl.compileShader(fragShdr);

				if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) {

						var msg = "Fragment shader nie można skompilowć:" + "<pre>" + gl.getShaderInfoLog(fragShdr) + "</pre>";

						alert(msg);

						console.log(msg);

						return -1;

				}

		}



		var program = gl.createProgram();

		gl.attachShader(program, vertShdr);

		gl.attachShader(program, fragShdr);

		gl.linkProgram(program);



		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

				var msg = "Shader program nie można zlinkować:" + "<pre>" + gl.getProgramInfoLog(program) + "</pre>";

				alert(msg);

				console.log(msg);

				return -1;

		}



		return program;

}



 //================================================================================

 // Opis

 //================================================================================

  InitGL=function(gl,canvas){

 

         var vertex_buffer = gl.createBuffer();

         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);

         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
          gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices1), gl.STATIC_DRAW);

         gl.bindBuffer(gl.ARRAY_BUFFER, null);         

         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);               

         var shaderProgram = initShaders( gl, "vertex-shader", "fragment-shader" );               

         gl.useProgram(shaderProgram);    

         Xpos=gl.getUniformLocation( shaderProgram, "movex" );

         Scale=gl.getUniformLocation( shaderProgram, "scalef" );         

         var coord = gl.getAttribLocation(shaderProgram, "coordinates");   
         var coord1 = gl.getAttribLocation(shaderProgram, "coordina");       

         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);                   

         gl.enableVertexAttribArray(coord);
        
          gl.vertexAttribPointer(coord1, 3, gl.FLOAT, false, 0, 0);                   

         gl.enableVertexAttribArray(coord1);


         //Ustawienie koloru tła 

         gl.clearColor(0.6,0.6,0.6,1.0);

         gl.viewport(0,0,canvas.width,canvas.height);             

  }

//===================================================================================

// Opis funkcji

//===================================================================================

startGL=function(){

   var canvas=document.getElementById("glid");

   

   gl = null;

   

   try{

      gl=canvas.getContext("experimental-webgl");

   }

   catch(e){

   }

   

   if(!gl){

     alert("Brak wsparcia sprzętowego dla OpenGL (WebGL)");

     return;

   }



   if(gl){

     InitGL(gl,canvas);

     render();   

   }



  }



//===================================================================================

// Opis funkcji

//===================================================================================

render=function() {

     gl.clear(gl.COLOR_BUFFER_BIT);

     

     if(Xcor>0.8)

       step=-step;



     if(Xcor<-0.8)

       step=-step;



    

       Xcor+=step;

      

     gl.uniform1f( Xpos, Xcor );

     gl.uniform1f( Scale, 12.0 );

     gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/3);

    gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices1.length/3);

     window.requestAnimationFrame(render);

  }

 </SCRIPT>

 </HEAD>



 <BODY onload="startGL()" bgcolor="white">

 <H1>Kółka w WebGL</H1>



 <canvas id="glid" width="640" height="640">

   Brak wsparcia dla technologii HTML5

 </canvas>



 </BODY>

</HTML>

no i nie działający w którym próbuje przekopiować elementy

 
<HTML>
<HEAD>
 <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<script id="vertex-shader" type="x-shader/x-vertex">
    attribute vec4 coordinates;
    attribute vec4 coordina;
    uniform float movex;
    uniform float scalef;
    void
    main()
    {
        gl_Position.x = coordina.x/scalef+movex;
        gl_Position.y = coordina.y/scalef;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;
        gl_Position.x = coordinates.x/scalef;
        gl_Position.y = coordinates.y/scalef+movex;
        gl_Position.z = 0.0;
        gl_Position.w = 1.0;
    }
 </script>
<script id="fragment-shader" type="x-shader/x-fragment">
   precision mediump float;
    uniform vec4 kolor;
    void
    main()
    {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
      // kolor = gl_FragColor 
    }
 </script>
 <SCRIPT type="text/Javascript">
   var numTris1 = 100;
var vertices1 = [
     0.0,  0.0,  0.0,
     1.0,  0.0,  0.0
];
var degPerTri1 = (2 * Math.PI) / numTris1;
for(var i = 0; i < numTris1; i++) {
    var index1 = 2*3 + i*3
    var angle1 = degPerTri1 * (i+1);
    vertices1[index1] = Math.cos(angle1); 
    vertices1[index1+1] = Math.sin(angle1); 
    vertices1[index1+2] = 0;  }
var numTris = 10;
vertices = [
     0.0,  0.0,  0.0,
     1.0,  0.0,  0.0
];

var degPerTri = (2 * Math.PI) / numTris;

for(var i = 0; i < numTris; i++) {
    var index = 2*3 + i*3
    var angle = degPerTri * (i+1);
    vertices[index] = Math.cos(angle); 
    vertices[index+1] = Math.sin(angle); 
    vertices[index+2] = 0; 
  /*  vertices1[index] = Math.cos(angle); 
    vertices1[index+1] = Math.sin(angle); 
    vertices1[index+2] = 0;*/ 
}        
  var Xpos;
  var Xcor=0.0;
  var step=0.01;
//===================================================================================

// Opis funkcji

//===================================================================================

initShaders=function(gl, vertexShaderId, fragmentShaderId) {

		var vertShdr;

		var fragShdr;



		var vertElem = document.getElementById(vertexShaderId);

		if (!vertElem) {

				alert("Brak vertex shader " + vertexShaderId);

				return -1;

		} else {

				vertShdr = gl.createShader(gl.VERTEX_SHADER);

				gl.shaderSource(vertShdr, vertElem.text);

				gl.compileShader(vertShdr);

				if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS)) {

				var msg = "Vertex shader nie można skompilowć:" + "<pre>" + gl.getShaderInfoLog(vertShdr) + "</pre>";

						alert(msg);

						console.log(msg);

						return -1;

				}

		}



		var fragElem = document.getElementById(fragmentShaderId);

		if (!fragElem) {

				alert("Brak fragment shader " + fragmentShaderId);

				return -1;

		} else {

				fragShdr = gl.createShader(gl.FRAGMENT_SHADER);

				gl.shaderSource(fragShdr, fragElem.text);

				gl.compileShader(fragShdr);

				if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) {

						var msg = "Fragment shader nie można skompilowć:" + "<pre>" + gl.getShaderInfoLog(fragShdr) + "</pre>";

						alert(msg);

						console.log(msg);

						return -1;

				}

		}



		var program = gl.createProgram();

		gl.attachShader(program, vertShdr);

		gl.attachShader(program, fragShdr);

		gl.linkProgram(program);



		if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {

				var msg = "Shader program nie można zlinkować:" + "<pre>" + gl.getProgramInfoLog(program) + "</pre>";

				alert(msg);

				console.log(msg);

				return -1;

		}
		return program;
}
 //================================================================================

 // Opis

 //================================================================================

  InitGL=function(gl,canvas){
         var vertex_buffer = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);         
         gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);               
         var shaderProgram = initShaders( gl, "vertex-shader", "fragment-shader" );               
         gl.useProgram(shaderProgram);    
         Xpos=gl.getUniformLocation( shaderProgram, "movex" );
         Scale=gl.getUniformLocation( shaderProgram, "scalef" );         
         var coord = gl.getAttribLocation(shaderProgram, "coordinates");   
         gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);                   
         gl.enableVertexAttribArray(coord);
         var v_b = gl.createBuffer();
         gl.bindBuffer(gl.ARRAY_BUFFER, v_b);
         gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices1), gl.STATIC_DRAW);
         gl.bindBuffer(gl.ARRAY_BUFFER, null);         
        gl.bindBuffer(gl.ARRAY_BUFFER, v_b);               
         var sP = initShaders( gl, "vertex-shader", "fragment-shader" );               
         gl.useProgram(sP);    
         Xpos=gl.getUniformLocation( sP, "movex" );
         Scale=gl.getUniformLocation( shP, "scalef" );         
         var coord1 = gl.getAttribLocation(sP, "coordina");       
     
          gl.vertexAttribPointer(coord1, 3, gl.FLOAT, false, 0, 0);                   
         gl.enableVertexAttribArray(coord1); 
         //Ustawienie koloru tła 
         gl.clearColor(0.6,0.6,0.6,1.0);
         gl.viewport(0,0,canvas.width,canvas.height);             

  }

//===================================================================================

// Opis funkcji

//===================================================================================

startGL=function(){
   var canvas=document.getElementById("glid");
  gl = null;
   try{
      gl=canvas.getContext("experimental-webgl");
   }
   catch(e){
   }
  if(!gl){
     alert("Brak wsparcia sprzętowego dla OpenGL (WebGL)");
     return;
   }
   if(gl){
     InitGL(gl,canvas);
     render();   
   }
  }
//===================================================================================

// Opis funkcji

//===================================================================================

render=function() {
     gl.clear(gl.COLOR_BUFFER_BIT);
     if(Xcor>0.8)
       step=-step;
     if(Xcor<-0.8)
      step=-step;
       Xcor+=step;  
     gl.uniform1f( Xpos, Xcor );
     gl.uniform1f( Scale, 12.0 );
     gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices.length/3);
    gl.drawArrays(gl.TRIANGLE_FAN, 0, vertices1.length/3);
    window.requestAnimationFrame(render);
  }
 </SCRIPT>
 </HEAD>
 <BODY onload="startGL()" bgcolor="white">
 <H1>Kółka w WebGL</H1>
 <canvas id="glid" width="640" height="640">
   Brak wsparcia dla technologii HTML5
 </canvas>
 </BODY>
</HTML>
0

No właśnie nie umiem pisać i dochodzę w mękach mają być dwie kulki jedna ruch w poziomie druga ruch w pionie a jest jedna. Dzięki za link będę walczyć dalej bo chyba się "zapętliłam".

1 użytkowników online, w tym zalogowanych: 0, gości: 1