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>