Spring Boot WebGL小程序

最新推荐文章于 2024-09-03 16:00:22 发布

原创最新推荐文章于 2024-09-03 16:00:22 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webgl #spring #jsp #javascript

Study-Spring-Boot 专栏收录该内容

27 篇文章

订阅专栏

在Spring Boot应用连接数据库MySQL 基础上实现一个WebGL的小程序。

添加JS文件

在/webapp/static/js目录下添加glMatrix-0.9.5 .js文件。glMatrix-0.9.5 下载地址

添加图片

在/webapp/static/images目录下一个webgl.jpg图片，图片内容随意。

编写JSP文件

在/webapp/WEB-INF/jsp目录下新建一个名为webgl的jsp文件。代码如下：

<!DOCTYPE html >
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%> 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="/static/js/glMatrix-0.9.5.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
        attribute vec3 v3Position;
        uniform mat4 um4Rotate;
        varying vec2 v_texCoord;
       void main(void)
       {
             vec4 v4pos = um4Rotate * vec4(v3Position, 1.0);
                v_texCoord = vec2((v4pos.x+1.0)/2.0, 1.0-(v4pos.y+1.0)/2.0);
                gl_Position = v4pos;
            //v_texCoord = vec2((v3Position.x+1.0)/2.0, 1.0-(v3Position.y+1.0)/2.0);
            //gl_Position = um4Rotate * vec4(v3Position, 1.0);
        }
</script>

    <script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif
uniform sampler2D s_texture;
varying vec2 v_texCoord;

void main(void)
{
    gl_FragColor = texture2D(s_texture, v_texCoord);
}
    </script>

<script>
function ShaderSourceFromScript(scriptID)
{
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";

    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child)
    {
        if (child.nodeType == child.TEXT_NODE ) sourceCode += child.textContent;
        child = child.nextSibling;
    }

    return sourceCode;
}

var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var triangleBuffer = null; 
var v3PositionIndex = 0;
var textureObject = null;
var samplerIndex = -1;
var interval = 300;
var angle = 0;
var um4RotateIndex = -1;

function LoadData()
{
    var jsArrayData = [
        0.0, 0.5, 0.0,//上顶点
        -0.5, -0.5, 0.0,//左顶点
        0.5, 0.0, 0.0];//右顶点

    triangleBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);

    textureObject = webgl.createTexture();
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    var img = document.getElementById('myTexture');
    webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, img);

    return 0;
}

function RenderScene()
{
    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);

    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer); 
    webgl.enableVertexAttribArray(v3PositionIndex); 
    webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);

    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);

    webgl.activeTexture(webgl.TEXTURE0);
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    webgl.uniform1i(samplerIndex, 0);

    var m4Rotate = mat4.create();
    mat4.identity(m4Rotate);
    mat4.rotateZ(m4Rotate, angle*Math.PI/180);
    webgl.uniformMatrix4fv(um4RotateIndex, false, m4Rotate);

    webgl.drawArrays(webgl.TRIANGLES, 0, 3);
}

function RotateTriangle()
{
 angle += 10;
 if(angle >= 360) angle -= 360;

 RenderScene();
}

function Init()
{
    var myCanvasObject = document.getElementById('myCanvas');
    webgl = myCanvasObject.getContext("experimental-webgl");

    webgl.viewport(0, 0, myCanvasObject.clientWidth, myCanvasObject.clientHeight);

    vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
    fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

    webgl.shaderSource(vertexShaderObject, ShaderSourceFromScript("shader-vs"));
    webgl.shaderSource(fragmentShaderObject, ShaderSourceFromScript("shader-fs"));

    webgl.compileShader(vertexShaderObject);
    webgl.compileShader(fragmentShaderObject);

    if(!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(vertexShaderObject));return;}
    if(!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(fragmentShaderObject));return;}

    programObject = webgl.createProgram();

    webgl.attachShader(programObject, vertexShaderObject);
    webgl.attachShader(programObject, fragmentShaderObject);

    webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

    webgl.linkProgram(programObject);
    if(!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)){alert(webgl.getProgramInfoLog(programObject));return;}

    samplerIndex = webgl.getUniformLocation(programObject, "s_texture");
    um4RotateIndex = webgl.getUniformLocation(programObject, "um4Rotate");

    webgl.useProgram(programObject);

    if(LoadData() != 0){alert("error:LoadData()!");return;}
    window.setInterval("RotateTriangle()", interval);
}
</script>
    </head>
    <body  onload='Init()'>
        <img id = "myTexture" src ="/static/images/webgl.jpg" style = "display:None"/>
        <canvas id="myCanvas" style="border:1px solid red;" width='600px' height='450px'></canvas>
    </body>
    <script src="/static/js/jquery-3.1.1.min.js"></script>
</html>

编写控制器Controller

在一个控制器类添加下面代码。

@RequestMapping("/webgl")
public String testWebGL() {
    return "webgl";
}

运行

网页的显示框动态变化，下面是截图：
这里写图片描述

这里写图片描述

返回 Java EE Web开发系列导航。