webgl 服务器 apache - Shell-Bash (1)

📌 相关文章

📜 webgl 服务器 apache - Shell-Bash (1)

📅 最后修改于: 2023-12-03 15:05:55.205000 🧑 作者: Mango

WebGL服务器Apache - Shell / Bash

简介

WebGL是JavaScript API，用于在Web浏览器中呈现3D图形。它是一种跨平台的Web图形技术，可用于创建高质量，交互式3D应用程序。 Apache是用于Web服务器的流行开源软件，可用于在Web上托管和运行Web应用程序。在本文中，我们将介绍如何将这两个技术结合使用，从而创建一个WebGL服务器Apache。

实现

我们将使用Shell / Bash脚本来实现本文。我们将首先创建一个Apache服务器，然后将需要的WebGL文件添加到服务器中。最后，我们将在WebGL服务器Apache上运行WebGL应用程序。

创建Apache服务器

要创建Apache服务器，请按照以下步骤操作。

安装Apache。在Ubuntu上，您可以使用以下命令安装Apache。

sudo apt-get install apache2

启动Apache。使用以下命令启动Apache服务器。

sudo service apache2 start

验证Apache是否已成功启动。使用以下命令验证Apache服务器是否已成功启动。

sudo service apache2 status

获取服务器IP地址。使用以下命令获取服务器的IP地址。

ifconfig

Apache服务器已准备好在服务器上托管Web应用程序。

在服务器上添加WebGL文件

我们将添加WebGL文件以在Apache服务器上托管WebGL应用程序。我们将在/var/www/html目录下创建一个名为“WebGL”的文件夹，并添加所需的WebGL文件。您可以将您的WebGL文件放在此处。

cd /var/www/html

创建一个名为“WebGL”的文件夹。

sudo mkdir WebGL

将您的WebGL文件复制到此文件夹。

sudo cp /path/to/your/WebGL/files/* /var/www/html/WebGL/

现在，您的WebGL文件已在服务器上托管，并准备好在服务器上部署WebGL应用程序。

在WebGL服务器Apache上运行WebGL应用程序

您现在可以在WebGL服务器Apache上运行WebGL应用程序。要在服务器上部署WebGL应用程序，请按照以下步骤操作。

在/var/www/html/WebGL文件夹中创建一个名为“index.html”的文件。

sudo nano /var/www/html/WebGL/index.html

将以下WebGL代码粘贴到“index.html”文件中。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>WebGL Server Apache</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        canvas {
            background-color: #000000;
        }
    </style>
  </head>
  <body>
    <script src="./WebGLDemo.js"></script>
  </body>
</html>

保存并关闭“index.html”文件。
在/var/www/html/WebGL文件夹中创建一个名为“WebGLDemo.js”的文件。

sudo nano /var/www/html/WebGL/WebGLDemo.js

将以下WebGL代码粘贴到“WebGLDemo.js”文件中。

var gl;

function initGL(canvas) {
    try {
        gl = canvas.getContext("experimental-webgl");
        gl.viewportWidth = canvas.width;
        gl.viewportHeight = canvas.height;
    } catch (e) {
        console.log(e);
    }
    if (!gl) {
        alert("Could not initialise WebGL, sorry :-(");
    }
}

function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
        return null;
    }

    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }

    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }

    gl.shaderSource(shader, str);
    gl.compileShader(shader);

    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }

    return shader;
}

var shaderProgram;

function initShaders() {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");

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

    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }

    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
}

function handleLoadedTexture(texture) {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);
    gl.generateMipmap(gl.TEXTURE_2D);

    gl.bindTexture(gl.TEXTURE_2D, null);
}

var neheTexture;

function initTextures() {
    neheTexture = gl.createTexture();
    neheTexture.image = new Image();
    neheTexture.image.onload = function () {
        handleLoadedTexture(neheTexture)
    }

    neheTexture.image.src = "./nehe.gif";
}

var xRot = 0;
var yRot = 0;
var zRot = 0;

var squareVertexPositionBuffer;
var squareVertexColorBuffer;
var squareVertexTextureCoordBuffer;

function initBuffers() {
    squareVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    vertices = [
        1.0, 1.0, 0.0,
        -1.0, 1.0, 0.0,
        1.0, -1.0, 0.0,
        -1.0, -1.0, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    squareVertexPositionBuffer.itemSize = 3;
    squareVertexPositionBuffer.numItems = 4;

    squareVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
    colors = [
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        1.0, 1.0, 0.0, 1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    squareVertexColorBuffer.itemSize = 4;
    squareVertexColorBuffer.numItems = 4;

    squareVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexTextureCoordBuffer);
    var textureCoords = [
        1.0, 1.0,
        0.0, 1.0,
        1.0, 0.0,
        0.0, 0.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
    squareVertexTextureCoordBuffer.itemSize = 2;
    squareVertexTextureCoordBuffer.numItems = 4;
}

function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

    mat4.identity(mvMatrix);

    mat4.translate(mvMatrix, [0.0, 0.0, -7.0]);

    mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);
    mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);
    mat4.rotate(mvMatrix, degToRad(zRot), [0, 0, 1]);

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexTextureCoordBuffer);
    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, squareVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);

    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, neheTexture);
    gl.uniform1i(shaderProgram.samplerUniform, 0);

    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}

var mvMatrix = mat4.create();
var pMatrix = mat4.create();

function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

function degToRad(degrees) {
    return degrees * Math.PI / 180;
}

function webGLStart() {
    var canvas = document.getElementById("lesson04-canvas");
    initGL(canvas);
    initShaders();
    initBuffers();
    initTextures();

    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);

    setInterval(function() {
        xRot += 1;
        yRot += 1;
        zRot += 1;
    }, 10);

    drawScene();
}

保存并关闭“WebGLDemo.js”文件。

现在，您已经在服务器上部署了WebGL应用程序。您可以通过在浏览器中输入服务器IP地址，后跟“/WebGL”来访问WebGL应用程序。

结论

在本文中，我们介绍了如何将WebGL服务器Apache结合使用来创建WebGL应用程序。我们使用了Shell / Bash脚本来实现本文。我们创建了Apache服务器，并向服务器添加了WebGL文件。最后，我们在WebGL服务器Apache上运行了我们的WebGL应用程序。