WebGL示例应用程序介绍

WebGL是一种基于JavaScript的图形库，它可以在网页上绘制3D图形和动画。WebGL使用GPU加速渲染，因此性能比传统的Canvas和SVG要好得多。本文将介绍几个使用WebGL的示例应用程序。

立方体

立方体是最基本和最简单的3D图形。以下是一个WebGL绘制立方体的代码片段：

var gl = document.getElementById('canvas').getContext('webgl');

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, `
    attribute vec3 a_position;
    uniform mat4 u_modelViewMatrix;
    uniform mat4 u_projectionMatrix;

    void main() {
        gl_Position = u_projectionMatrix * u_modelViewMatrix * vec4(a_position, 1.0);
    }
`);
gl.compileShader(vertexShader);

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, `
    precision mediump float;

    void main() {
        gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    }
`);
gl.compileShader(fragmentShader);

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

var positionLocation = gl.getAttribLocation(program, 'a_position');
var modelViewMatrixLocation = gl.getUniformLocation(program, 'u_modelViewMatrix');
var projectionMatrixLocation = gl.getUniformLocation(program, 'u_projectionMatrix');

var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
     1.0,  1.0,  1.0,
    -1.0,  1.0,  1.0,
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
     1.0,  1.0, -1.0,
    -1.0,  1.0, -1.0,
    -1.0, -1.0, -1.0,
     1.0, -1.0, -1.0,
]), gl.STATIC_DRAW);

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

var modelViewMatrix = mat4.create();
mat4.translate(modelViewMatrix, modelViewMatrix, [-5, 0, -25]);
gl.uniformMatrix4fv(modelViewMatrixLocation, false, modelViewMatrix);

var projectionMatrix = mat4.create();
mat4.perspective(projectionMatrix, 45 * Math.PI / 180, 640 / 480, 0.1, 100.0);
gl.uniformMatrix4fv(projectionMatrixLocation, false, projectionMatrix);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

gl.useProgram(program);
gl.drawArrays(gl.LINE_LOOP, 0, 4);
gl.drawArrays(gl.LINE_LOOP, 4, 4);
gl.drawArrays(gl.LINES, 0, 2);
gl.drawArrays(gl.LINES, 2, 2);
gl.drawArrays(gl.LINES, 4, 2);
gl.drawArrays(gl.LINES, 6, 2);

在上述代码中，我们首先获取了一个WebGL上下文gl，然后创建了一个顶点着色器和一个片元着色器，并将它们编译、链接为一个WebGL程序。接着，我们创建了一个缓冲区positionBuffer，并将8个立方体的顶点数据存储到了缓冲区中。我们还创建了两个矩阵modelViewMatrix和projectionMatrix，用于设置立方体的位置和旋转，并将它们传递给了顶点着色器。最后，我们绘制了立方体的各个面。

地球仪

地球仪是WebGL中比较复杂的一个示例应用程序。以下是一个使用three.js库绘制地球仪的代码片段：

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, 640 / 480, 0.1, 1000);
camera.position.z = 5;

var renderer = new THREE.WebGLRenderer();
renderer.setSize(640, 480);
document.body.appendChild(renderer.domElement);

var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(1, 1, 1);
scene.add(light);

var earthGeometry = new THREE.SphereGeometry(1, 32, 32);
var earthTexture = new THREE.TextureLoader().load('earth.jpg');
var earthMaterial = new THREE.MeshPhongMaterial({map: earthTexture});
var earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);
scene.add(earthMesh);

var cloudGeometry = new THREE.SphereGeometry(1.01, 32, 32);
var cloudTexture = new THREE.TextureLoader().load('cloud.png');
var cloudMaterial = new THREE.MeshLambertMaterial({map: cloudTexture, transparent: true});
var cloudMesh = new THREE.Mesh(cloudGeometry, cloudMaterial);
scene.add(cloudMesh);

function animate() {
    requestAnimationFrame(animate);

    earthMesh.rotation.y += 0.01;
    cloudMesh.rotation.y += 0.01;

    renderer.render(scene, camera);
}

animate();

在上述代码中，我们首先创建了一个three.js的场景scene、一个透视相机camera和一个WebGL渲染器renderer，并将它们添加到了HTML文档中。接着，我们创建了一个方向光light和两个球体网格earthMesh和cloudMesh，分别表示地球和云层。最后，我们实现了一个渲染循环animate，每一帧都使地球和云层绕y轴旋转一定角度，并将场景渲染到renderer中。最终，我们可以看到一个绚丽的地球仪。