Create GlSl Sphere with wave
by yiiBoy
HTML
<!--
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
<canvas id="canvas" width="640" height="480"></canvas>
JavaScript
function createShader(gl, type, source) {
const shader = gl.createShader(type);
gl.shaderSource(shader, source);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error('Shader compilation error:', gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
function createProgram(gl, vertexShader, fragmentShader) {
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Program linking error:', gl.getProgramInfoLog(program));
gl.deleteProgram(program);
return null;
}
return program;
}
function createSphere(gl, radius, latitudeBands, longitudeBands) {
const vertices = [];
const indices = [];
for (let lat = 0; lat <= latitudeBands; lat++) {
const theta = lat * Math.PI / latitudeBands;
const sinTheta = Math.sin(theta);
const cosTheta = Math.cos(theta);
for (let lon = 0; lon <= longitudeBands; lon++) {
const phi = lon * 2 * Math.PI / longitudeBands;
const sinPhi = Math.sin(phi);
const cosPhi = Math.cos(phi);
const x = cosPhi * sinTheta;
const y = cosTheta;
const z = sinPhi * sinTheta;
vertices.push(radius * x);
vertices.push(radius * y);
vertices.push(radius * z);
}
}
for (let lat = 0; lat < latitudeBands; lat++) {
for (let lon = 0; lon <...