How to texture map a sphere in WebGL

How to texture map a sphere in WebGL - javascript

I'd like to be able to wrap an image of the Earth around my sphere. Using any stock image off of Google.
I've been looking around and I found only answers with three.js, and I'm looking for the most simple way to achieve my goal without that. Below is all of the documentation of a sphere I'd like to texture. If you copy and paste it you should be able to see a regular sphere with some shading on it.
From my WebGL book,
.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Point lighted sphere</title>
</head>
<body onload="main()">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="../lib/cuon-matrix.js"></script>
<script src="PointLightedSphere.js"></script>
</body>
</html>
.js
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
// 'attribute vec4 a_Color;\n' + // Defined constant in main()
'attribute vec4 a_Normal;\n' +
'uniform mat4 u_MvpMatrix;\n' +
'uniform mat4 u_ModelMatrix;\n' + // Model matrix
'uniform mat4 u_NormalMatrix;\n' + // Transformation matrix of the normal
'uniform vec3 u_LightColor;\n' + // Light color
'uniform vec3 u_LightPosition;\n' + // Position of the light source
'uniform vec3 u_AmbientLight;\n' + // Ambient light color
'varying vec4 v_Color;\n' +
'void main() {\n' +
' vec4 color = vec4(1.0, 1.0, 1.0, 1.0);\n' + // Sphere color
' gl_Position = u_MvpMatrix * a_Position;\n' +
// Calculate a normal to be fit with a model matrix, and make it 1.0 in length
' vec3 normal = normalize(vec3(u_NormalMatrix * a_Normal));\n' +
// Calculate world coordinate of vertex
' vec4 vertexPosition = u_ModelMatrix * a_Position;\n' +
// Calculate the light direction and make it 1.0 in length
' vec3 lightDirection = normalize(u_LightPosition - vec3(vertexPosition));\n' +
// The dot product of the light direction and the normal
' float nDotL = max(dot(lightDirection, normal), 0.0);\n' +
// Calculate the color due to diffuse reflection
' vec3 diffuse = u_LightColor * color.rgb * nDotL;\n' +
// Calculate the color due to ambient reflection
' vec3 ambient = u_AmbientLight * color.rgb;\n' +
// Add the surface colors due to diffuse reflection and ambient reflection
' v_Color = vec4(diffuse + ambient, color.a);\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE =
'#ifdef GL_ES\n' +
'precision mediump float;\n' +
'#endif\n' +
'varying vec4 v_Color;\n' +
'void main() {\n' +
' gl_FragColor = v_Color;\n' +
'}\n';
function main() {
// Retrieve <canvas> element
var canvas = document.getElementById('webgl');
// Get the rendering context for WebGL
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize shaders
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log('Failed to intialize shaders.');
return;
}
// Set the vertex coordinates, the color and the normal
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the vertex information');
return;
}
// Set the clear color and enable the depth test
gl.clearColor(0, 0, 0, 1);
gl.enable(gl.DEPTH_TEST);
// Get the storage locations of uniform variables and so on
var u_ModelMatrix = gl.getUniformLocation(gl.program, 'u_ModelMatrix');
var u_MvpMatrix = gl.getUniformLocation(gl.program, 'u_MvpMatrix');
var u_NormalMatrix = gl.getUniformLocation(gl.program, 'u_NormalMatrix');
var u_LightColor = gl.getUniformLocation(gl.program, 'u_LightColor');
var u_LightPosition = gl.getUniformLocation(gl.program, 'u_LightPosition');
var u_AmbientLight = gl.getUniformLocation(gl.program, 'u_AmbientLight');
if (!u_MvpMatrix || !u_NormalMatrix || !u_LightColor || !u_LightPosition　|| !u_AmbientLight) {
console.log('Failed to get the storage location');
return;
}
// Set the light color (white)
gl.uniform3f(u_LightColor, 0.8, 0.8, 0.8);
// Set the light direction (in the world coordinate)
gl.uniform3f(u_LightPosition, 5.0, 8.0, 7.0);
// Set the ambient light
gl.uniform3f(u_AmbientLight, 0.2, 0.2, 0.2);
var modelMatrix = new Matrix4(); // Model matrix
var mvpMatrix = new Matrix4(); 　 // Model view projection matrix
var normalMatrix = new Matrix4(); // Transformation matrix for normals
// Pass the model matrix to u_ModelMatrix
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
// Calculate the view projection matrix
mvpMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
mvpMatrix.lookAt(0, 0, 6, 0, 0, 0, 0, 1, 0);
mvpMatrix.multiply(modelMatrix);
// Pass the model view projection matrix to u_MvpMatrix
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
// Calculate the matrix to transform the normal based on the model matrix
normalMatrix.setInverseOf(modelMatrix);
normalMatrix.transpose();
// Pass the transformation matrix for normals to u_NormalMatrix
gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
// Clear color and depth buffer
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Draw the cube(Note that the 3rd argument is the gl.UNSIGNED_SHORT)
gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
}
function initVertexBuffers(gl) { // Create a sphere
var SPHERE_DIV = 13;
var i, ai, si, ci;
var j, aj, sj, cj;
var p1, p2;
var positions = [];
var indices = [];
// Generate coordinates
for (j = 0; j <= SPHERE_DIV; j++) {
aj = j * Math.PI / SPHERE_DIV;
sj = Math.sin(aj);
cj = Math.cos(aj);
for (i = 0; i <= SPHERE_DIV; i++) {
ai = i * 2 * Math.PI / SPHERE_DIV;
si = Math.sin(ai);
ci = Math.cos(ai);
positions.push(si * sj); // X
positions.push(cj); // Y
positions.push(ci * sj); // Z
}
}
// Generate indices
for (j = 0; j < SPHERE_DIV; j++) {
for (i = 0; i < SPHERE_DIV; i++) {
p1 = j * (SPHERE_DIV+1) + i;
p2 = p1 + (SPHERE_DIV+1);
indices.push(p1);
indices.push(p2);
indices.push(p1 + 1);
indices.push(p1 + 1);
indices.push(p2);
indices.push(p2 + 1);
}
}
// Write the vertex property to buffers (coordinates and normals)
// Same data can be used for vertex and normal
// In order to make it intelligible, another buffer is prepared separately
if (!initArrayBuffer(gl, 'a_Position', new Float32Array(positions), gl.FLOAT, 3)) return -1;
if (!initArrayBuffer(gl, 'a_Normal', new Float32Array(positions), gl.FLOAT, 3)) return -1;
// Unbind the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, null);
// Write the indices to the buffer object
var indexBuffer = gl.createBuffer();
if (!indexBuffer) {
console.log('Failed to create the buffer object');
return -1;
}
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
return indices.length;
}
function initArrayBuffer(gl, attribute, data, type, num) {
// Create a buffer object
var buffer = gl.createBuffer();
if (!buffer) {
console.log('Failed to create the buffer object');
return false;
}
// Write date into the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// Assign the buffer object to the attribute variable
var a_attribute = gl.getAttribLocation(gl.program, attribute);
if (a_attribute < 0) {
console.log('Failed to get the storage location of ' + attribute);
return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
// Enable the assignment of the buffer object to the attribute variable
gl.enableVertexAttribArray(a_attribute);
gl.bindBuffer(gl.ARRAY_BUFFER, null);
return true;
}

Related

Add Texture to sphere

I need help figuring out how to add textures to my basketball.
What should i add to my vertex and fragment shaders.
Fragment shader
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
struct MaterialProperties {
vec4 diffuseColor;
vec3 specularColor;
vec3 emissiveColor;
float specularExponent;
};
struct LightProperties {
bool enabled;
vec4 position;
vec3 color;
};
uniform MaterialProperties material; // do two-sided lighting, but assume front and back materials are the same
uniform LightProperties lights[4];
uniform mat3 normalMatrix;
varying vec3 v_normal;
varying vec3 v_eyeCoords;
vec3 lightingEquation( LightProperties light, MaterialProperties material,
vec3 eyeCoords, vec3 N, vec3 V ) {
// N is normal vector, V is direction to viewer.
vec3 L, R; // Light direction and reflected light direction.
if ( light.position.w == 0.0 ) {
L = normalize( light.position.xyz );
}
else {
L = normalize( light.position.xyz/light.position.w - v_eyeCoords );
}
if (dot(L,N) <= 0.0) {
return vec3(0.0);
}
vec3 reflection = dot(L,N) * light.color * material.diffuseColor.rgb;
R = -reflect(L,N);
if (dot(R,V) > 0.0) {
float factor = pow(dot(R,V),material.specularExponent);
reflection += factor * material.specularColor * light.color;
}
return reflection;
}
void main() {
vec3 normal = normalize( normalMatrix*v_normal );
vec3 viewDirection = normalize( -v_eyeCoords); // (Assumes a perspective projection.)
vec3 color = material.emissiveColor;
for (int i = 0; i < 4; i++) {
if (lights[i].enabled) {
if (gl_FrontFacing) {
color += lightingEquation( lights[i], material, v_eyeCoords,
normal, viewDirection);
}
else {
color += lightingEquation( lights[i], material, v_eyeCoords,
-normal, viewDirection);
}
}
}
gl_FragColor = vec4(color,material.diffuseColor.a);
}
The function "world()" is being draw in my "Draw ()" function. The world consist of a scene, but for the sake of readability i will just like the ball i want to add texture to.
function world() {
// Ground
pushMatrix();
mat4.translate(modelview,modelview,[-1,-3,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[9,9,0.5]);
currentColor = [0.0,0.7,0.0,1];
cube.render();
popMatrix();
//Basketball
pushMatrix();
mat4.translate(modelview,modelview,[xval,yval,3]);//
mat4.scale(modelview,modelview,[0.15,0.15,0.15]);
currentColor = [1,0.3,0,1];
sphere.render();
popMatrix();
}
I have a createModel function that holds all my buffers.
I have a createProgram function that creates a program using the vertex and fragment shaders.
I have a initGL function that initializes the webgl context and gets attributes and uniform locations.
I have a init function that is called when the page is loaded.
Complete version of my code:
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<!--
A demo of lighting and hierarchical modeling using WebGL.
Emissive color is used to make the lights seem to glow yellow when
they are turned on.
Derived from code available from Diskworld-2.html
The Shaders are still complex but have been simplified slightly.
-->
<head>
<title>Project 4 - Shooting basketball</title>
<style>
body {
background-color: #EEEEEE;
}
label {
white-space: pre;
margin-left: 25px;
}
</style>
<!-- This shader is exactly as provided -->
<script type="x-shader/x-vertex" id="vshader-source">
attribute vec3 a_coords;
attribute vec3 a_normal;
uniform mat4 modelview;
uniform mat4 projection;
varying vec3 v_normal;
varying vec3 v_eyeCoords;
void main() {
vec4 coords = vec4(a_coords,1.0);
vec4 eyeCoords = modelview * coords;
gl_Position = projection * eyeCoords;
v_normal = normalize(a_normal);
v_eyeCoords = eyeCoords.xyz/eyeCoords.w;
}
</script>
<!-- This shader has simplified lighting model and equation
Notice the light only has 3 properties now -->
<script type="x-shader/x-fragment" id="fshader-source">
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
struct MaterialProperties {
vec4 diffuseColor;
vec3 specularColor;
vec3 emissiveColor;
float specularExponent;
};
struct LightProperties {
bool enabled;
vec4 position;
vec3 color;
};
uniform MaterialProperties material; // do two-sided lighting, but assume front and back materials are the same
uniform LightProperties lights[4];
uniform mat3 normalMatrix;
varying vec3 v_normal;
varying vec3 v_eyeCoords;
vec3 lightingEquation( LightProperties light, MaterialProperties material,
vec3 eyeCoords, vec3 N, vec3 V ) {
// N is normal vector, V is direction to viewer.
vec3 L, R; // Light direction and reflected light direction.
if ( light.position.w == 0.0 ) {
L = normalize( light.position.xyz );
}
else {
L = normalize( light.position.xyz/light.position.w - v_eyeCoords );
}
if (dot(L,N) <= 0.0) {
return vec3(0.0);
}
vec3 reflection = dot(L,N) * light.color * material.diffuseColor.rgb;
R = -reflect(L,N);
if (dot(R,V) > 0.0) {
float factor = pow(dot(R,V),material.specularExponent);
reflection += factor * material.specularColor * light.color;
}
return reflection;
}
void main() {
vec3 normal = normalize( normalMatrix*v_normal );
vec3 viewDirection = normalize( -v_eyeCoords); // (Assumes a perspective projection.)
vec3 color = material.emissiveColor;
for (int i = 0; i < 4; i++) {
if (lights[i].enabled) {
if (gl_FrontFacing) {
color += lightingEquation( lights[i], material, v_eyeCoords,
normal, viewDirection);
}
else {
color += lightingEquation( lights[i], material, v_eyeCoords,
-normal, viewDirection);
}
}
}
gl_FragColor = vec4(color,material.diffuseColor.a);
}
</script>
<script src="gl-matrix-min.js"></script>
<script src="trackball-rotator.js"></script>
<script src="basic-object-models-IFS.js"></script>
<script>
"use strict";
var gl; // The webgl context.
var xval= 1.3;
var yval= -1.8;
var kval = 0; // Kick leg start
var a_coords_loc; // Location of the a_coords attribute variable in the shader program.
var a_normal_loc; // Location of a_normal attribute
var a_texCoords_loc;
// var texture;
var u_modelview; // Locations for uniform matrices
var u_projection;
var u_normalMatrix;
var u_material; // An object tolds uniform locations for the material.
var u_lights; // An array of objects that holds uniform locations for light properties.
var projection = mat4.create(); // projection matrix
var modelview; // modelview matrix; value comes from rotator
var normalMatrix = mat3.create(); // matrix, derived from modelview matrix, for transforming normal vectors
var rotator; // A TrackballRotator to implement rotation by mouse.
var frameNumber = 0; // frame number during animation (actually only goes up by 0.5 per frame)
var torus, sphere, cone, cylinder, disk, ring, cube; // basic objects, created using function createModel
var matrixStack = []; // A stack of matrices for implementing hierarchical graphics.
var currentColor = [1,1,1,1]; // The current diffuseColor; render() functions in the basic objects set
// the diffuse color to currentColor when it is called before drawing the object.
// Other color properties, which don't change often are handled elsewhere.
var textureURLs = [
"textures/basketball.jpg" // array to hold textures
];
/**
* Draws the image, which consists of either the "world" or a closeup of the "car".
*/
function draw() {
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(projection, Math.PI/4, 1, 1, 50);
gl.uniformMatrix4fv(u_projection, false, projection );
modelview = rotator.getViewMatrix();
lights();
world();
}
function setLightPosition( u_position_loc, modelview, lightPosition ) {
var transformedPosition = new Float32Array(4);
vec4.transformMat4(transformedPosition, lightPosition, modelview);
gl.uniform4fv(u_position_loc, transformedPosition);
}
function lights() {
gl.uniform1i( u_lights[0].enabled, 1 );
gl.uniform4f( u_lights[0].position, 0,0,1,0 );
gl.uniform3f( u_lights[0].color, 0.15,0.15,0.15 );
// Sun light
gl.uniform1i( u_lights[1].enabled, 1 );
gl.uniform3f( u_lights[1].color, 1,0.3,0.0 );
//Lamp at night
gl.uniform1i( u_lights[2].enabled, 1 );
gl.uniform3f( u_lights[2].color, 0.35, 0.35, 0.1 ); // light 1 is the lamp at night
gl.uniform1f( u_lights[2].attenuation, 2 );
gl.uniform1i( u_lights[3].enabled, 1 );
gl.uniform3f( u_lights[3].color, 0.35, 0.35, 0.1 ); // light 1 is the lamp at night
gl.uniform1f( u_lights[3].attenuation, 2 );
currentColor = [ 0.3, 0.3, 0.3, 1 ];
//SunSetlight
pushMatrix();
mat4.translate(modelview,modelview,[7,-3,-10]);//
mat4.scale(modelview,modelview,[0.8,0.8,0.8]);
setLightPosition(u_lights[1].position, modelview, [1,0,0,0]);
gl.uniform3f( u_material.emissiveColor, 1.5,0.4, 0 );
sphere.render();
gl.uniform3f( u_material.emissiveColor, 0, 0, 0 );
popMatrix();
// lamp for night
pushMatrix();
mat4.translate(modelview,modelview,[-1,-0.8,3]);
mat4.scale(modelview,modelview,[0.4,0.1,0.1]);
setLightPosition(u_lights[2].position, modelview, [0,0,0,1]);
gl.uniform3f( u_material.emissiveColor, 1, 1, 0 );
cube.render();
gl.uniform3f( u_material.emissiveColor, 0, 0, 0 );
popMatrix();
pushMatrix();
mat4.translate(modelview,modelview,[-1,-0.8,-3]);
mat4.scale(modelview,modelview,[0.4,0.1,0.1]);
setLightPosition(u_lights[3].position, modelview, [0,0,0,1]);
gl.uniform3f( u_material.emissiveColor, 1, 1, 0 );
cube.render();
gl.uniform3f( u_material.emissiveColor, 0, 0, 0 );
popMatrix();
}
/**
* Draws a boxman figure using transformation from cubes and cylinders.
* Note for every push their should be a pop. This resets the transformations
*/
function world() {
// Ground
pushMatrix();
mat4.translate(modelview,modelview,[-1,-3,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[9,9,0.5]);
currentColor = [0.0,0.7,0.0,1];
cube.render();
popMatrix();
// Street lamp
pushMatrix();
mat4.translate(modelview,modelview,[-0.8,-4.7,3]);
mat4.scale(modelview,modelview,[0.5,0.5,0.5]);
streetLight();
popMatrix();
// Street lamp
pushMatrix();
mat4.translate(modelview,modelview,[-0.8,-4.7,-3]);
mat4.scale(modelview,modelview,[0.5,0.5,0.5]);
streetLight();
popMatrix();
// Basketball court
pushMatrix();
mat4.translate(modelview,modelview,[2,-2.75,3]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[3,3,0.1]);
currentColor = [0.2,0.2,0.2,1];
cube.render();
popMatrix();
//Road
pushMatrix();
mat4.translate(modelview,modelview,[-2,-2.75,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[2,9,0.1]);
currentColor = [0.2,0.2,0.2,1];
cube.render();
popMatrix();
//Road
pushMatrix();
mat4.translate(modelview,modelview,[-2,-2.72,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.2,9,0.1]);
currentColor = [1,1,1,1];
cube.render();
popMatrix();
//Basketball
pushMatrix();
mat4.translate(modelview,modelview,[xval,yval,3]);//
mat4.scale(modelview,modelview,[0.15,0.15,0.15]);
currentColor = [1,0.3,0,1];
sphere.render();
popMatrix();
// BasketBall Player
// Player 1
pushMatrix();
mat4.translate(modelview,modelview,[1,-2.2,3]);
mat4.scale(modelview,modelview,[0.15,0.15,0.15]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[0,1,0]);
// Arms
pushMatrix();
mat4.translate(modelview,modelview,[0,-0.5,-2]);
mat4.rotate(modelview,modelview,(-45)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.5,0.5,3]);
currentColor = [0.7,0.4,0.1,1];
cylinder.render();
popMatrix();
pushMatrix();
mat4.translate(modelview,modelview,[-2,-0.5,-2]);
mat4.rotate(modelview,modelview,(-45)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.5,0.5,3]);
currentColor = [0.7,0.4,0.1,1];
cylinder.render();
popMatrix();
player();
popMatrix();
// PLayer 2
pushMatrix();
pushMatrix();
mat4.translate(modelview,modelview,[2.4,-2.2,3.2]);
mat4.scale(modelview,modelview,[0.2,0.2,0.2]);
mat4.rotate(modelview,modelview,(-90)/180*Math.PI,[0,1,0]);
// Arms
pushMatrix();
mat4.translate(modelview,modelview,[0,1.2,-3]);
mat4.rotate(modelview,modelview,(kval)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.5,0.5,3]);
currentColor = [0.7,0.4,0.1,1];
cylinder.render();
popMatrix();
pushMatrix();
mat4.translate(modelview,modelview,[-2,1.2,-3]);
mat4.rotate(modelview,modelview,(kval)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.5,0.5,3]);
currentColor = [0.7,0.4,0.1,1];
cylinder.render();
popMatrix();
player();
popMatrix();
//baskethoop
pushMatrix();
mat4.translate(modelview,modelview,[3,-4.3,3]);
mat4.scale(modelview,modelview,[0.5,0.5,0.5]);
basketballhoop();
popMatrix();
//Houses
pushMatrix();
mat4.translate(modelview,modelview,[-4,-2,2]);
mat4.scale(modelview,modelview,[0.6,0.6,0.6]);
house();
popMatrix();
pushMatrix();
mat4.translate(modelview,modelview,[-4,-2,-2.3]);
mat4.scale(modelview,modelview,[0.6,0.6,0.6]);
house();
popMatrix();
}
function streetLight(){
pushMatrix();
mat4.translate(modelview,modelview,[0,0,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[-1,0,0]);
mat4.scale(modelview,modelview,[0.2,0.2,4]);
cylinder.render();
popMatrix();
}
function house(){
pushMatrix();
currentColor = [0.5,0.4,0.2,1];
mat4.scale(modelview,modelview,[2,2,2]);
cube.render();
popMatrix();
pushMatrix();
currentColor = [0.5,0.4,0.2,1];
mat4.translate(modelview,modelview,[0,-0.5,1.6]);
mat4.scale(modelview,modelview,[1.3,1.3,1.3]);
cube.render();
popMatrix();
pushMatrix();
currentColor = [0.2,0.2,0.2,1];
mat4.translate(modelview,modelview,[0,1,0.0]);
mat4.scale(modelview,modelview,[4,1.5,4]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[-1,0,0]);
cone.render();
popMatrix();
}
function basketballhoop(){
pushMatrix();
currentColor = [0.1,0.1,0.1,1];
mat4.translate(modelview,modelview,[0,0,0]);
mat4.scale(modelview,modelview,[0.2,3,0.2]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[-1,0,0]);
cylinder.render();
popMatrix();
pushMatrix();
currentColor = [0.5,0.5,0.5,1];
mat4.scale(modelview,modelview,[0.15,0.15,0.15]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[-1,0,0]);
mat4.translate(modelview,modelview,[-4.5,0,43]);
ring.render();
popMatrix();
pushMatrix();
currentColor = [0,0,0.5,1];
mat4.scale(modelview,modelview,[0.1,1.5,2]);
mat4.translate(modelview,modelview,[0,4.4,0]);
cube.render();
popMatrix();
}
function player(){
pushMatrix();
//Head
mat4.translate(modelview,modelview,[-1,3,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.5,0.4,0.8]);
currentColor = [0.7,0.4,0.1,1];
sphere.render();
popMatrix();
// Neck
pushMatrix();
mat4.translate(modelview,modelview,[-1,2.5,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.3,0.4,0.3]);
currentColor = [0.7,0.4,0.1,1];
cylinder.render();
popMatrix();
// Body
pushMatrix();
mat4.translate(modelview,modelview,[-1,1.0,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[1.3,1,2]);
currentColor = [0.0,0.0,0.9,1];
cube.render();
popMatrix();
// Legs
pushMatrix();
mat4.translate(modelview,modelview,[-1.3,3.1,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.6,0.6,3.0]);
currentColor = [0.0,0.0,1,1];
cylinder.render();
popMatrix();
pushMatrix();
mat4.translate(modelview,modelview,[-0.7,3.1,0]);
mat4.rotate(modelview,modelview,(90)/180*Math.PI,[1,0,0]);
mat4.scale(modelview,modelview,[0.6,0.6,3.0]);
currentColor = [0.0,0.0,1,1];
cylinder.render();
popMatrix();
}
/**
* Push a copy of the current modelview matrix onto the matrix stack.
*/
function pushMatrix() {
matrixStack.push( mat4.clone(modelview) );
}
/**
* Restore the modelview matrix to a value popped from the matrix stack.
*/
function popMatrix() {
modelview = matrixStack.pop();
}
<!-- As is no changes -->
/**
* Create one of the basic objects. The modelData holds the data for
* an IFS using the structure from basic-objects-IFS.js. This function
* creates VBOs to hold the coordinates, normal vectors, and indices
* from the IFS, and it loads the data into those buffers. The function
* creates a new object whose properties are the identifies of the
* VBOs. The new object also has a function, render(), that can be called to
* render the object, using all the data from the buffers. That object
* is returned as the value of the function. (The second parameter,
* xtraTranslate, is there because this program was ported from a Java
* version where cylinders were created in a different position, with
* the base on the xy-plane instead of with their center at the origin.
* The xtraTranslate parameter is a 3-vector that is applied as a
* translation to the rendered object. It is used to move the cylinders
* into the position expected by the code that was ported from Java.)
*/
function createModel(modelData, xtraTranslate) {
var model = {};
model.coordsBuffer = gl.createBuffer();
model.normalBuffer = gl.createBuffer();
model.indexBuffer = gl.createBuffer();
model.count = modelData.indices.length;
if (xtraTranslate)
model.xtraTranslate = xtraTranslate;
else
model.xtraTranslate = null;
gl.bindBuffer(gl.ARRAY_BUFFER, model.coordsBuffer);
gl.bufferData(gl.ARRAY_BUFFER, modelData.vertexPositions, gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, model.normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, modelData.vertexNormals, gl.STATIC_DRAW);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, model.indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, modelData.indices, gl.STATIC_DRAW);
model.render = function() { // This function will render the object.
// Since the buffer from which we are taking the coordinates and normals
// change each time an object is drawn, we have to use gl.vertexAttribPointer
// to specify the location of the data. And to do that, we must first
// bind the buffer that contains the data. Similarly, we have to
// bind this object's index buffer before calling gl.drawElements.
gl.bindBuffer(gl.ARRAY_BUFFER, this.coordsBuffer);
gl.vertexAttribPointer(a_coords_loc, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, this.normalBuffer);
gl.vertexAttribPointer(a_normal_loc, 3, gl.FLOAT, false, 0, 0);
gl.uniform4fv(u_material.diffuseColor, currentColor);
if (this.xtraTranslate) {
pushMatrix();
mat4.translate(modelview,modelview,this.xtraTranslate);
}
gl.uniformMatrix4fv(u_modelview, false, modelview );
mat3.normalFromMat4(normalMatrix, modelview);
gl.uniformMatrix3fv(u_normalMatrix, false, normalMatrix);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.indexBuffer);
gl.drawElements(gl.TRIANGLES, this.count, gl.UNSIGNED_SHORT, 0);
if (this.xtraTranslate) {
popMatrix();
}
}
return model;
}
/* Creates a program for use in the WebGL context gl, and returns the
* identifier for that program. If an error occurs while compiling or
* linking the program, an exception of type String is thrown. The error
* string contains the compilation or linking error. If no error occurs,
* the program identifier is the return value of the function.
* The second and third parameters are the id attributes for <script>
* elementst that contain the source code for the vertex and fragment
* shaders.
*/
function createProgram(gl, vertexShaderID, fragmentShaderID) {
function getTextContent( elementID ) {
// This nested function retrieves the text content of an
// element on the web page. It is used here to get the shader
// source code from the script elements that contain it.
var element = document.getElementById(elementID);
var node = element.firstChild;
var str = "";
while (node) {
if (node.nodeType == 3) // this is a text node
str += node.textContent;
node = node.nextSibling;
}
return str;
}
try {
var vertexShaderSource = getTextContent( vertexShaderID );
var fragmentShaderSource = getTextContent( fragmentShaderID );
}
catch (e) {
throw "Error: Could not get shader source code from script elements.";
}
var vsh = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource(vsh,vertexShaderSource);
gl.compileShader(vsh);
if ( ! gl.getShaderParameter(vsh, gl.COMPILE_STATUS) ) {
throw "Error in vertex shader: " + gl.getShaderInfoLog(vsh);
}
var fsh = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource(fsh, fragmentShaderSource);
gl.compileShader(fsh);
if ( ! gl.getShaderParameter(fsh, gl.COMPILE_STATUS) ) {
throw "Error in fragment shader: " + gl.getShaderInfoLog(fsh);
}
var prog = gl.createProgram();
gl.attachShader(prog,vsh);
gl.attachShader(prog, fsh);
gl.linkProgram(prog);
if ( ! gl.getProgramParameter( prog, gl.LINK_STATUS) ) {
throw "Link error in program: " + gl.getProgramInfoLog(prog);
}
return prog;
}
/* Initialize the WebGL context. Called from init() */
function initGL() {
var prog = createProgram(gl,"vshader-source","fshader-source");
gl.useProgram(prog);
gl.enable(gl.DEPTH_TEST);
/* Get attribute and uniform locations */
a_coords_loc = gl.getAttribLocation(prog, "a_coords");
a_normal_loc = gl.getAttribLocation(prog, "a_normal");
gl.enableVertexAttribArray(a_coords_loc);
gl.enableVertexAttribArray(a_normal_loc);
u_modelview = gl.getUniformLocation(prog, "modelview");
u_projection = gl.getUniformLocation(prog, "projection");
u_normalMatrix = gl.getUniformLocation(prog, "normalMatrix");
u_material = {
diffuseColor: gl.getUniformLocation(prog, "material.diffuseColor"),
specularColor: gl.getUniformLocation(prog, "material.specularColor"),
emissiveColor: gl.getUniformLocation(prog, "material.emissiveColor"),
specularExponent: gl.getUniformLocation(prog, "material.specularExponent")
};
u_lights = new Array(4);
for (var i = 0; i < 4; i++) {
u_lights[i] = {
enabled: gl.getUniformLocation(prog, "lights[" + i + "].enabled"),
position: gl.getUniformLocation(prog, "lights[" + i + "].position"),
color: gl.getUniformLocation(prog, "lights[" + i + "].color")
};
}
gl.uniform3f( u_material.specularColor, 0.1, 0.1, 0.1 ); // specular properties don't change
gl.uniform1f( u_material.specularExponent, 16 );
gl.uniform3f( u_material.emissiveColor, 0, 0, 0); // default, will be changed temporarily for some objects
for (var i = 1; i < 4; i++) { // set defaults for lights
gl.uniform1i( u_lights[i].enabled, 0 );
gl.uniform4f( u_lights[i].position, 0, 0, 1, 0 );
gl.uniform3f( u_lights[i].color, 1,1,1 );
}
// Lights are set on in the draw() method
} // end initGL()
//--------------------------------- animation framework ------------------------------
var animating = false;
/*
This is where you control the animation by changing positions,
and rotations values as needed.
Trial and error works on the numbers. Graph paper design is more efficient.
*/
function frame() {
if (animating) {
frameNumber += 1;
// Positions of the soccer ball
xval += 0.05;
yval += 0.05;
// Rotation of kick leg
// Not perfect by anymeans but Okay for at least one viewing angle.
kval -= 1.5;
if (xval > 8.5 || yval < -8.5) {
xval= 1.3;
yval= -1.8;
kval = 0;
}
if (kval < -90) {
kval = -90; // Don't overextend the soccer all
}
draw();
requestAnimationFrame(frame);
}
}
function setAnimating(run) {
if (run != animating) {
animating = run;
if (animating)
requestAnimationFrame(frame);
}
}
//-------------------------------------------------------------------------
/**
* initialization function that will be called when the page has loaded
*/
function init() {
try {
var canvas = document.getElementById("webglcanvas");
gl = canvas.getContext("webgl") ||
canvas.getContext("experimental-webgl");
if ( ! gl ) {
throw "Browser does not support WebGL";
}
}
catch (e) {
document.getElementById("message").innerHTML =
"<p>Sorry, could not get a WebGL graphics context.</p>";
return;
}
try {
initGL(); // initialize the WebGL graphics context
}
catch (e) {
document.getElementById("message").innerHTML =
"<p>Sorry, could not initialize the WebGL graphics context:" + e + "</p>";
return;
}
document.getElementById("animCheck").checked = false;
document.getElementById("reset").onclick = function() {
rotator.setView(17,[0,1,2]);
frameNumber = 0;
// Initialize soccer ball positions
xval = 1.5;
yval = -1.5;
animating = false;
document.getElementById("animCheck").checked = false;
draw();
}
// Not really using all of these
// As you create your scene use these or create from primitives
torus = createModel(uvTorus(0.5,1,16,8)); // Create all the basic objects.
sphere = createModel(uvSphere(1));
cone = createModel(uvCone(),[0,0,.5]);
cylinder = createModel(uvCylinder(),[0,0,1.5]);
disk = createModel(uvCylinder(5.5,0.5,64),[0,0,.25]);
ring = createModel(ring(3.3,4.8,40));
cube = createModel(cube());
// This controls the zoom and initial placement
rotator = new TrackballRotator(canvas,function() {
if (!animating)
draw();
},17,[0,1,2]);
draw();
}
</script>
</head>

WebGL Resetting vertex positions

I am creating a simple webgl program that puts 3 random vertices on the canvas and connects them into a triangle. I tried to add translation to move the triangle to the right (increase the X value of each vertex), but of course if it goes forever, the triangle will go out of the canvas. Does anyone know how to detect if the vertex has an x value above 1 and if yes, reset the position of the given vertex because my solution doesnt seem to do anything, its like it doesnt even trigger
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
gl.clearColor(0.1, 0.2, 0.2, 1.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
var indices = [0, 0, 0, 0, 0, 0];
for (var points = 0; points < 6; points++) {
indices[points] = (Math.random() * 2) - 1;
//indices[points + 1] = Math.random() < 0.5 ? -1 : 1;
}
var buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices),
gl.STATIC_DRAW);
var vert = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vert, `
precision mediump float;
attribute vec2 position;
uniform vec2 translation;
void main(){
gl_Position = vec4(position + translation, 0.0, 1.0);
}
`);
gl.compileShader(vert);
var success1 = gl.getShaderParameter(vert, gl.COMPILE_STATUS);
if (!success1) {
// Something went wrong during compilation; get the error
throw gl.getShaderInfoLog(vert);
}
var frag = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(frag, `
precision mediump float;
void main(){
gl_FragColor = vec4(0.3, 0.6, 0.4, 1.0);
}
`);
gl.compileShader(frag);
var success2 = gl.getShaderParameter(frag, gl.COMPILE_STATUS);
if (!success2) {
// Something went wrong during compilation; get the error
throw gl.getShaderInfoLog(frag);
}
var program = gl.createProgram();
gl.attachShader(program, vert);
gl.attachShader(program, frag);
gl.linkProgram(program);
var vertLoc = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(vertLoc, 2, gl.FLOAT, gl.FALSE, 0, 0);
gl.enableVertexAttribArray(vertLoc);
gl.useProgram(program);
var trans = gl.getUniformLocation(program, "translation");
var translation = [0.0, 0.0];
gl.uniform2fv(trans, translation);
gl.drawArrays(gl.TRIANGLES, 0, 3);
function loop() {
gl.clearColor(0.1, 0.2, 0.2, 1.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
translation[0] += 0.01;
gl.uniform2fv(trans, translation);
gl.drawArrays(gl.TRIANGLES, 0, 3);
for (var points = 0; points < 6; points++) {
if (indices[points] % 2 == 0) {
if (indices[points] + translation[0] > 1) {
indices[points] = (Math.random() * 2) - 1;
}
}
//indices[points + 1] = Math.random() < 0.5 ? -1 : 1;
}
requestAnimationFrame(loop);
}
loop();
<canvas id="canvas"></canvas>

To achieve this, consider making the following changes to your code:
remove placement of vertices by translation in your vertex shader to give you "per-vertex" control over placement of the geometry (the translation effectivly means "object-level" placement which isn't what your want here)
when you iterate over the points in your loop(), you checking modulo over the vertex coordinate. You should be performing that check on the iteration index like this: if (points % 2 == 0)
now that the translation concept is gone, update the position of the vertex coordinate, rather the translation array after the modulo check: indices[points] += 0.01;
finally, seeing you're updating the indices vertex data, you'll need to update the webgl buf to ensure your changes are reflected when the next frame is rendered:
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW);
Here's the updated script in full:
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
gl.clearColor(0.1, 0.2, 0.2, 1.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
var indices = [0, 0, 0, 0, 0, 0];
for (var points = 0; points < 6; points++) {
indices[points] = (Math.random() * 2) - 1;
}
var buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices),
gl.STATIC_DRAW);
var vert = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vert, `
precision mediump float;
attribute vec2 position;
void main(){
gl_Position = vec4(position, 0.0, 1.0);
}
`);
gl.compileShader(vert);
var success1 = gl.getShaderParameter(vert, gl.COMPILE_STATUS);
if (!success1) {
throw gl.getShaderInfoLog(vert);
}
var frag = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(frag, `
precision mediump float;
void main(){
gl_FragColor = vec4(0.3, 0.6, 0.4, 1.0);
}
`);
gl.compileShader(frag);
var success2 = gl.getShaderParameter(frag, gl.COMPILE_STATUS);
if (!success2) {
throw gl.getShaderInfoLog(frag);
}
var program = gl.createProgram();
gl.attachShader(program, vert);
gl.attachShader(program, frag);
gl.linkProgram(program);
var vertLoc = gl.getAttribLocation(program, "position");
gl.vertexAttribPointer(vertLoc, 2, gl.FLOAT, gl.FALSE, 0, 0);
gl.enableVertexAttribArray(vertLoc);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 3);
function loop() {
gl.clearColor(0.1, 0.2, 0.2, 1.0);
gl.clear(gl.DEPTH_BUFFER_BIT | gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);
// Update the vertex data, causing the vertex x coordinate to increase per-frame
for (var points = 0; points < 6; points++) {
// Only process x coordinate
if (points % 2 == 0) {
// Increase x coordinate per-frame
indices[points] += 0.01;
// If x position > 1 reset it to a new random value
if (indices[points] > 1) {
indices[points] = (Math.random() * 2) - 1;
}
}
}
// Update webgl vertex buffer so that updated indices data is rendered
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW);
requestAnimationFrame(loop);
}
loop();
<canvas id="canvas"><canvas>

Mandelbrot set zoom limit

I've recently started learning Javascript/ WebGL and I've learned enough to put together a simple Mandelbrot fractal renderer. The program works fine but for some reason it won't let me zoom in more than about 20 times, and it starts looking pixellated if I zoom in more. I've had this problem before in other fractal drawing programs I've made, but it usually doesn't become noticeable until about 2^45 zoom. I was thinking maybe it has to do with the max float size in GLSL, but I'm really not sure what the problem is or even how to go about finding the problem. I was just wondering if anyone knows what the cause of this zoom limit is and if there's any way I can increase it? Here's my HTML/ GLSL code:
<html>
<head>
<title>Mandelbrot Set</title>
<style>
body {
margin = 0;
padding = 0;
}
</style>
</head>
<body>
<h3>Click on the fractal to zoom in.</h3>
<canvas id = "canvas" width = "500" height = "500" onclick = "drawFractal();">
Sorry, your browser does not support HTML5.
</canvas>
<script id = "vertexshader" type = "vertexshader">
attribute vec2 a_position;
void main(){
gl_Position = vec4(a_position, 0, 0);
}
</script>
<script id = "fragmentshader" type = "fragmentshader">
precision mediump float;
uniform vec2 u_resolution;
uniform vec2 u_zoomCenter;
uniform float u_zoom;
uniform int u_maxIterations;
uniform float u_colorDiversity;
vec2 f(vec2 z, vec2 c)
{
return vec2(z.x*z.x - z.y*z.y, z.x*z.y*2.0) + c;
}
// Credit to hughsk on GitHub for this hsv to rgb converter
vec3 hsv2rgb(vec3 c) {
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
void main(){
vec2 zeroToOne = gl_FragCoord.xy / u_resolution;
vec2 c = u_zoomCenter + (zeroToOne * 4.0 - vec2(2.0)) / u_zoom;
vec2 z = vec2(0.0);
bool escaped = false;
float iterations = 0.0;
for (int i = 0; i < 100000; i++)
{
if (i > u_maxIterations) break;
z = f(z, c);
if (length(z) > 2.0)
{
escaped = true;
iterations = float(i);
break;
}
}
gl_FragColor = escaped ? vec4(hsv2rgb(vec3(iterations * u_colorDiversity, 1.0, 1.0)), 1.0) : vec4(vec3(0.0), 1.0);
}
</script>
<script src = "webgl.js"></script>
</body>
</html>
Here's my "webgl.js" file:
// Compile and link shaders and create program
function createShader(gl, type, source){
var shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS)) return shader;
console.log(gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
alert("Error: failed to create shader. Check the console for more information.");
}
function createProgram(gl, vertexShader, fragmentShader){
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (gl.getProgramParameter(program, gl.LINK_STATUS)) return program;
console.log(gl.getProgramInfoLog(program));
gl.deleteProgram(program);
alert("Error: failed to create program. Check the console for more information.");
}
// WebGL setup
var canvas = document.getElementById("canvas");
var gl = canvas.getContext("webgl");
if (!gl){
var gl = canvas.getContext("experimental-webgl");
console.log("WebGL not supported, falling back on experimental WebGL.");
}
if (!gl){
console.log("Experimental WebGL not supported.");
alert("Your browser does not support WebGL. Check the console for more information.");
}
// Create shaders and program
var vertexShaderSource = document.getElementById("vertexshader").text;
var fragmentShaderSource = document.getElementById("fragmentshader").text;
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
var program = createProgram(gl, vertexShader, fragmentShader);
gl.useProgram(program);
// Set up position buffer
var screen = new Float32Array([
-1, -1,
1, -1,
1, 1,
1, 1,
-1, 1,
-1, -1]);
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, screen, gl.STATIC_DRAW);
// Set up position attribute in vertex shader
var a_positionLocation = gl.getAttribLocation(program, "a_position");
gl.enableVertexAttribArray(a_positionLocation);
gl.vertexAttribPointer(a_positionLocation, 2, gl.FLOAT, false, 0, 0);
// Set up WebGL window
gl.viewport(0, 0, 500, 500);
gl.clearColor(0, 0, 0, 0);
// Set up uniforms in fragment shader
var u_resolutionLocation = gl.getUniformLocation(program, "u_resolution");
var u_zoomCenterLocation = gl.getUniformLocation(program, "u_zoomCenter");
var u_zoomLocation = gl.getUniformLocation(program, "u_zoom");
var u_maxIterationsLocation = gl.getUniformLocation(program, "u_maxIterations");
var u_colorDiversityLocation = gl.getUniformLocation(program, "u_colorDiversity");
gl.uniform2f(u_resolutionLocation, 500, 500);
// Set up some global variables
var offset_x = 0;
var offset_y = 0;
var zoom = 1;
var iterations = 10000;
var colorDiversity = 0.01;
// Update uniforms based on global variables
function updateUniforms()
{
gl.uniform2f(u_zoomCenterLocation, offset_x, offset_y);
gl.uniform1f(u_zoomLocation, zoom);
gl.uniform1i(u_maxIterationsLocation, iterations);
gl.uniform1f(u_colorDiversityLocation, colorDiversity);
}
// Get mouse position
function getMousePos() {
var rect = canvas.getBoundingClientRect();
return [(event.clientX - rect.left - 250) / 125, (event.clientY - rect.top - 250) / 125];
}
// Draw the fractal
function drawFractal() {
mousePos = getMousePos();
offset_x += mousePos[0] / zoom;
offset_y -= mousePos[1] / zoom;
zoom *= 2;
updateUniforms();
gl.drawArrays(gl.TRIANGLES, 0, 6);
}
// Draw fractal when the page loads
updateUniforms();
gl.drawArrays(gl.TRIANGLES, 0, 6);

Maximal possible zoom depends on the precision of the floating point number you use and your algorithm.
You can increase precision using arbitrary precision numbers, for example mpfr, mpc or arb library

draw point on circumference of circle in webgl

I am able to draw a circle
I want to pick a arbitary point on circle and draw a shape like a triangle or
a simple point of the circumference
Now what I am understanding is vertexData array has that points
so I can pick a point from vertexData
But, how do I proceed with drawing the point to that location
If its only about drawing a point on canvas
I understand that in vertexShader I can
declare
attribute vec4 a_Position
and then gl_Position = a_Position
but on circumference of circle I am not understanding
please guide here
Thanks
<script>
var vertexShaderText = [
'uniform vec2 u_resolution;',
'',
'attribute vec2 a_position;',
'',
'void main()',
'{',
'',
'vec2 clipspace = a_position / u_resolution * 1.0 ;',
'',
'gl_Position = vec4(clipspace * vec2(1, -1), 0, 1);',
'}'
].join("\n");
var fragmentShaderText = [
'precision mediump float;',
'',
'void main(void)',
'{',
'',
'gl_FragColor = vec4(1.0, 0, 0, 0);',
'',
'}'
].join("\n");
var uni = function(){
var canvas = document.getElementById("game-surface");
var gl = canvas.getContext("webgl",{antialias: true});
console.log("This is working");
gl.clearColor(0.412,0.412,0.412,1);
gl.clear(gl.COLOR_BUFFER_BIT);
var vertextShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertextShader,vertexShaderText);
gl.shaderSource(fragmentShader,fragmentShaderText);
gl.compileShader(vertextShader);
gl.compileShader(fragmentShader);
if(!gl.getShaderParameter(vertextShader,gl.COMPILE_STATUS)){
console.error("Error with vertexshader",gl.getShaderInfoLog(vertextShader));
return;
}
if(!gl.getShaderParameter(fragmentShader,gl.COMPILE_STATUS)){
console.error("Error with fragmentShader",gl.getShaderInfoLog(fragmentShader));
return;
}
var program =gl.createProgram();
gl.attachShader(program,vertextShader);
gl.attachShader(program,fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
if(!gl.getProgramParameter(program,gl.LINK_STATUS)){
console.error("Error linking program",gl.getProgramInfoLog(program));
return;
}
gl.validateProgram(program);
if(!gl.getProgramParameter(program,gl.VALIDATE_STATUS)){
console.error("Error validating",gl.getProgramInfoLog(program));
}
var circle = {x: 0, y:0, r: 500};
var ATTRIBUTES = 2;
var numFans = 64;
var degreePerFan = (2* Math.PI) / numFans;
var vertexData = [circle.x, circle.y];
// console.log(gl_Position)
for(var i = 0; i <= numFans; i++) {
var index = ATTRIBUTES * i + 2; // there is already 2 items in array
var angle = degreePerFan * (i+0.1);
//console.log(angle)
vertexData[index] = circle.x + Math.cos(angle) * circle.r;
vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
}
//console.log(vertexData);
var vertexDataTyped = new Float32Array(vertexData);
var buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);
var resolutionLocation = gl.getUniformLocation(program, "u_resolution");
gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
gl.enableVertexAttribArray(positionLocation);
var positionLocation = gl.getAttribLocation(program, "a_position");
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);
};
uni();
</script>

You're using a triangle fan to draw this circle, so drawing an additional shape requires a second draw call. This isn't going to scale well, since draw calls are expensive, more likely you're going to want some method to draw multiple shapes in a single draw call.
That said, as a simple example, you can add the following code to the bottom of your uni function, after the end of the first draw call at the end of the existing function, to place a second, smaller circle on the circumference of the first one using a second draw call. Given your fragment shader, this will also be a red circle, so you may want to modify the shader to use a different color.
// Insert this code at the end of the uni() function, it will make
// use of variables and GL state already declared earlier in that function.
// Pick a point along circumference, range 1 to 63
var selectedPointIndex = 8;
circle.x = vertexData[selectedPointIndex * 2];
circle.y = vertexData[selectedPointIndex * 2 + 1];
circle.r = 50;
vertexData = [circle.x, circle.y];
for(var i = 0; i <= numFans; i++) {
var index = ATTRIBUTES * i + 2; // there is already 2 items in array
var angle = degreePerFan * (i+0.1);
vertexData[index] = circle.x + Math.cos(angle) * circle.r;
vertexData[index + 1] = circle.y + Math.sin(angle) * circle.r;
}
vertexDataTyped = new Float32Array(vertexData);
buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexDataTyped, gl.STATIC_DRAW);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
gl.drawArrays(gl.TRIANGLE_FAN, 0, vertexData.length/ATTRIBUTES);

Why doesn't my sphere render complete?

I'm trying to render a sphere in webgl, im using a method from webglfundamentals but somehow in my programm the sphere is just rendered to 20%. In chrome i get this error: L ERROR :GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1
var canvas;
var gl;
var index = 0;
var pointsArray = [];
var normalsArray = [];
var indexArray = [];
var colorArray = [];
var near = -10;
var far = 10;
var radius = 1.5;
var theta = 0.0;
var phi = 0.0;
var dr = 5.0 * Math.PI/180.0;
var left = -3.0;
var right = 3.0;
var ytop =3.0;
var bottom = -3.0;
var va = vec4(0.0, 0.0, -1.0,1);
var vb = vec4(0.0, 0.942809, 0.333333, 1);
var vc = vec4(-0.816497, -0.471405, 0.333333, 1);
var vd = vec4(0.816497, -0.471405, 0.333333,1);
var lightPosition = vec4(0.0, 1.0, 1.0, 0.0 );
var lightAmbient = vec4(0.2, 0.2, 0.2, 1.0 );
var lightDiffuse = vec4( 1.0, 1.0, 1.0, 1.0 );
var lightSpecular = vec4( 1.0, 1.0, 1.0, 1.0 );
var materialAmbient = vec4( 1.0, 0.0, 1.0, 1.0 );
var materialDiffuse = vec4( 1.0, 0.0, 0.0, 1.0 );
var materialSpecular = vec4( 1.0, 0.8, 0.0, 1.0 );
var materialShininess = 100.0;
var ctm;
var ambientColor, diffuseColor, specularColor;
var texture;
var modelViewMatrix, projectionMatrix;
var modelViewMatrixLoc, projectionMatrixLoc;
var eye;
var at = vec3(0.0, 0.0, 0.0);
var up = vec3(0.0, 1.0, 0.0);
var iBuffer;
function createSphereVertices(
radius,
subdivisionsAxis,
subdivisionsHeight,
opt_startLatitudeInRadians,
opt_endLatitudeInRadians,
opt_startLongitudeInRadians,
opt_endLongitudeInRadians) {
if (subdivisionsAxis <= 0 || subdivisionsHeight <= 0) {
throw Error('subdivisionAxis and subdivisionHeight must be > 0');
}
opt_startLatitudeInRadians = opt_startLatitudeInRadians || 0;
opt_endLatitudeInRadians = opt_endLatitudeInRadians || Math.PI;
opt_startLongitudeInRadians = opt_startLongitudeInRadians || 0;
opt_endLongitudeInRadians = opt_endLongitudeInRadians || (Math.PI * 2);
var latRange = opt_endLatitudeInRadians - opt_startLatitudeInRadians;
var longRange = opt_endLongitudeInRadians - opt_startLongitudeInRadians;
// We are going to generate our sphere by iterating through its
// spherical coordinates and generating 2 triangles for each quad on a
// ring of the sphere.
// var numVertices = (subdivisionsAxis + 1) * (subdivisionsHeight + 1);
var positions = [];
// var normals = webglUtils.createAugmentedTypedArray(3, numVertices);
// var texCoords = webglUtils.createAugmentedTypedArray(2 , numVertices);
// Generate the individual vertices in our vertex buffer.
for (var y = 0; y <= subdivisionsHeight; y++) {
for (var x = 0; x <= subdivisionsAxis; x++) {
// Generate a vertex based on its spherical coordinates
var u = x / subdivisionsAxis;
var v = y / subdivisionsHeight;
var theta = longRange * u;
var phi = latRange * v;
var sinTheta = Math.sin(theta);
var cosTheta = Math.cos(theta);
var sinPhi = Math.sin(phi);
var cosPhi = Math.cos(phi);
var ux = cosTheta * sinPhi;
var uy = cosPhi;
var uz = sinTheta * sinPhi;
positions.push(vec4(radius * ux, radius * uy, radius * uz,1.0));
normalsArray.push(vec4(ux, uy, uz,1.0));
// texCoords.push(1 - u, v);
}
}
var numVertsAround = subdivisionsAxis + 1;
// var indices = webglUtils.createAugmentedTypedArray(3, subdivisionsAxis * subdivisionsHeight * 2, Uint16Array);
for (var x = 0; x < subdivisionsAxis; x++) {
for (var y = 0; y < subdivisionsHeight; y++) {
// Make triangle 1 of quad.
pointsArray.push(positions[(y + 0) * numVertsAround + x]);
pointsArray.push(positions[(y + 0) * numVertsAround + x + 1]);
pointsArray.push(positions[(y + 1) * numVertsAround + x]);
// Make triangle 2 of quad.
pointsArray.push(positions[(y + 1) * numVertsAround + x]);
pointsArray.push(positions[(y + 0) * numVertsAround + x + 1]);
pointsArray.push(positions[(y + 1) * numVertsAround + x + 1]);
index +=6;
}
}
}
window.onload = function init() {
canvas = document.getElementById( "gl-canvas" );
gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }
gl.viewport( 0, 0, canvas.width, canvas.height );
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
gl.enable(gl.DEPTH_TEST);
//
// Load shaders and initialize attribute buffers
//
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );
createSphereVertices(1,12,12);
ambientProduct = mult(lightAmbient, materialAmbient);
diffuseProduct = mult(lightDiffuse, materialDiffuse);
specularProduct = mult(lightSpecular, materialSpecular);
var nBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, nBuffer);
gl.bufferData( gl.ARRAY_BUFFER, flatten(normalsArray), gl.STATIC_DRAW );
var vNormal = gl.getAttribLocation( program, "vNormal" );
gl.vertexAttribPointer( vNormal, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vNormal);
var vBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);
var vPosition = gl.getAttribLocation( program, "vPosition");
gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);
modelViewMatrixLoc = gl.getUniformLocation( program, "modelViewMatrix" );
projectionMatrixLoc = gl.getUniformLocation( program, "projectionMatrix" );
gl.uniform4fv( gl.getUniformLocation(program,
"ambientProduct"),flatten(ambientProduct) );
gl.uniform4fv( gl.getUniformLocation(program,
"diffuseProduct"),flatten(diffuseProduct) );
gl.uniform4fv( gl.getUniformLocation(program,
"specularProduct"),flatten(specularProduct) );
gl.uniform4fv( gl.getUniformLocation(program,
"lightPosition"),flatten(lightPosition) );
gl.uniform1f( gl.getUniformLocation(program,
"shininess"),materialShininess );
render();
}
function render() {
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
eye = vec3(radius*Math.sin(theta)*Math.cos(phi),
radius*Math.sin(theta)*Math.sin(phi), radius*Math.cos(theta));
modelViewMatrix = lookAt(eye, at , up);
projectionMatrix = ortho(left, right, bottom, ytop, near, far);
gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(modelViewMatrix) );
gl.uniformMatrix4fv(projectionMatrixLoc, false, flatten(projectionMatrix) );
for( var i=0; i<index; i+=3)
gl.drawArrays( gl.TRIANGLES, i, 3);
window.requestAnimFrame(render);
}
project1.html
<!DOCTYPE html>
<html>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vNormal;
varying vec3 N, L, E;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
uniform vec4 lightPosition;
void main()
{
vec3 pos = -(modelViewMatrix * vPosition).xyz;
vec3 light = lightPosition.xyz;
L = normalize( light - pos );
E = -pos;
N = normalize( (modelViewMatrix*vNormal).xyz);
gl_Position = projectionMatrix * modelViewMatrix * vPosition;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
uniform vec4 ambientProduct;
uniform vec4 diffuseProduct;
uniform vec4 specularProduct;
uniform float shininess;
varying vec3 N, L, E;
void main()
{
vec4 fColor;
vec3 H = normalize( L + E );
vec4 ambient = ambientProduct;
float Kd = max( dot(L, N), 0.0 );
vec4 diffuse = Kd*diffuseProduct;
float Ks = pow( max(dot(N, H), 0.0), shininess );
vec4 specular = Ks * specularProduct;
if( dot(L, N) < 0.0 ) specular = vec4(0.0, 0.0, 0.0, 1.0);
fColor = ambient + diffuse +specular;
fColor.a = 1.0;
gl_FragColor = fColor;
}
</script>
<script type="text/javascript" src="./Common/webgl-utils.js"></script>
<script type="text/javascript" src="./Common/initShaders.js"></script>
<script type="text/javascript" src="./Common/MV.js"></script>
<script type="text/javascript" src="project1.js"></script>
<body>
<canvas id="gl-canvas" width="512" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
</body>
</html>
This is what i get only a unfinished sphere:

I don't know this is actual correct answer since I didn't check this by running codes.
But, I just guess why this error occured.
Major reason of "out of range in attribute variable"
Basically, this will happen when the buffer you passed didn't have enough length.
Therefore, you need to check the count of buffer source you created.
And your error is ":GL_INVALID_OPERATION : glDrawArrays: attempt to access out of range vertices in attribute 1". In this case, attribute 1 in the error message means "vNormal" attribute in your GLSL code.
Because it is 2nd attribute variable in your GLSL code.
(If the error code says attribute 0, this problem should be made by vPosition)
As long as I saw your code, I think there is mismatch of length with normal buffer and position buffer.
Surface count in your code : Subdivision Height * Subdivision Axis * 2
Position element count in your code:Subdivision Height * Subdivision Axis *6
Normal element count in your code: Subdivision Height * Subdivision Axis * 4
I guess this is the reason of the problem.
Each vertex must have position and normal in this case, so your normal element count must be Subdivision Height * Subdivision Axis * 6
2nd argument in gl.vertexAttribPointer
I think you have mistake about 2nd argument in gl.vertexAttribPointer.
This is the count which means how many float elements needs to be passed each vertex.
In this case, you pushed 3 float elements for each vertex. So, you needs to specify 3 as argument for vPosition even if you used vec4 in your GLSL code.
By this argument, GPU can split these buffers for each vertex and pass them into vertex shader parallely.
4th element in vector
This is not strongly related to your question.But I found the code can be a reason of bug.
positions.push(vec4(radius * ux, radius * uy, radius * uz,1.0));
normalsArray.push(vec4(ux, uy, uz,1.0));
You need to understand what the meaning of 4th element in vec4. When this vector means coordinates, 4th element must be 1.However, when this vector means directions, 4th element must be 0.
Because, if this means directions, direction can not be affected by translation transform. ( I suggest you to learn affine transform to understand this)
So, you need to rewrite that code like this.
positions.push(vec4(radius * ux, radius * uy, radius * uz,1.0));
normalsArray.push(vec4(ux, uy, uz,0));
I hope this answer could help you...

We Keep Coding

JavaScript is the programming language of the Web.