Spring Boot WebGL小程序

最新推荐文章于 2024-09-03 16:00:22 发布
最新推荐文章于 2024-09-03 16:00:22 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： Study-Spring-Boot 文章标签： webgl spring jsp javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/webzhuce/article/details/54605276
版权

在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开发系列导航。

阿兵-AI医疗
关注
专栏目录
微信小程序 - 从 webgl 画布中截图放到 2d布中再保存成图片
灵台方寸山斜月三星洞
10-05 444
webgl 画布无法直接保存为图片，所以要转一手。先从 webgl 中取出像素，填充到 2d 画布。然后再从 2d画布保存图片。
springboot 访问 unity webGL 页面
qq_41862125的博客
02-09 381
修改index.html 中 TemplateData的地址 webGL生成的文件可以放在static 文件夹下 但不能放在html 文件夹下 会提示找不到文件即使路径对了也找不到。
推荐：pixijs 小程序 WebGL适配版——打造你的移动游戏梦！
gitblog_00071的博客
06-24 575
推荐：pixijs 小程序 WebGL适配版——打造你的移动游戏梦！ pixi-miniprogram项目地址:https://gitcode.com/gh_mirrors/pi/pixi-miniprogram 项目介绍 在追求高性能与丰富视觉效果的小程序开发领域，pixijs 小程序 WebGL 适配版无疑是一颗耀眼的新星。该项目由一群热心于技术创新的技术爱好者维护和升级，它基于流行的Pix...
webGL第一个3d小程序
redfivehit的专栏
05-03 1522
canvas { width: 100%; height: 100% }                 var scene = new THREE.Scene();                  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1,
微信小程序webgl 显示图片
最新发布
qq_21476953的博客
09-03 889
【代码】微信小程序webgl 显示图片。
微信小程序webgl+Three.js初试水（一）
sinat_33342614的博客
08-20 1万+
微信小程序webgl + Three.js初试水 最近公司找我提供一个demo，想要在微信小程序上实现一个大家在商场那些口红机会经常碰到的游戏—“转盘插刀”。 玩法很简单，屏幕中间有一个转盘一直在转，下方会出现一把刀或者其他柱状的物体，用户点击屏幕，刀就会直飞直到插到转盘，要是插的位置已经有其他刀或者物体了，就算作失败。 技术选型 看到这个需求的时候，脑子里第一想法是用canvas做，但是微信小程...
基于JAVA开发的在线装修设计小程序
03-29
【基于JAVA开发的在线装修设计小程序】 在当前的数字化时代，装修设计领域也逐渐与互联网技术相结合，催生出各种在线设计工具。其中，基于JAVA开发的在线装修设计小程序以其便捷性和交互性，深受用户和开发者青睐。...
面试官：什么是 YAML？和 Spring Boot 有什么关系？
yyyy11119的博客
12-27 641
1、什么是YAMLYAML是"YAML Ain’t a Markup Language"（YAML不是一种标记语言）的递归缩写。YAML的意思其实是：“Yet Another Markup Language”（仍是一种标记语言）。主要强度这种语音是以数据为中心，而不是以标记语言为重心，例如像xml语言就会使用大量的标记。YAML是一个可读性高，易于理解，用来表达数据序列化的格式。它的语法和其他高级...
网页练习烟花抖音小程序以及废旧手机显示主机性能.rar
12-27
【网页练习烟花抖音小程序以及废旧手机显示主机性能】 在标题中提到的“网页练习烟花抖音小程序”，我们可以推测这是一个关于Web开发的项目，其中包含了烟花效果的实现和与抖音相关的功能。烟花效果通常涉及到HTML5...
这是一个用java开发的秒杀系统的后台程序.zip
02-08
在Java开发中，为了实现秒杀系统，开发者可能使用了Spring Boot框架，它简化了Java应用程序的开发过程，并提供了自动配置、内嵌式Web服务器等功能。同时，基于微服务架构的设计可能被采用，将不同的业务功能拆分成...
一个简单的WebGL的demo，软件Chrome，硬件Google cardboard
08-28
This is a basic virtual reality experiment for Chrome, to be used with #Cardboard#. It uses WebGL and #Three.js# to handle the 3D graphics and camera controls. See inline comments for tips. This code is purely experimental, so please keep that in mind when developing. Want to create an Android app for Cardboard? #Learn how#. #Cardboard#:https://developers.google.com #Three.js#:http://threejs.org/ #Learn how#:https://developers.google.com/cardboard/overview
小程序 webgl 改变模型颜色
牛哞哞杂记
03-24 537
通过环境光来改变模型的颜色 代码： var hemisphereLight = new THREE.HemisphereLight(0xFFD700, 0xFFD700, 1); scene.add(hemisphereLight); 仅做记录，后续补充
webGL开发微信小游戏
defdsdddev的博客
11-22 447
微信小游戏本质上是在微信环境中运行的基于 Web 技术的应用，因此你可以使用 WebGL 来开发小游戏。以下是基于 WebGL 开发微信小游戏的一般步骤，希望对大家有所帮助。请注意，微信小游戏平台的政策和规定可能会影响你使用 WebGL 开发的小游戏，因此建议在开发过程中查阅微信小游戏的官方文档和最新政策。使用支持 WebGL 的开发工具，例如 Three.js，Babylon.js，或其他适用的 WebGL 框架。集成微信小游戏 API，处理微信登录、分享、支付等功能。保证游戏在移动设备上的友好性。
【愚公系列】2022年09月 微信小程序-WebGL动画的使用
热门推荐
时光隧道
09-11 1万+
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
WebGL快速入门及实例（一）
简简简简abc
09-27 3733
WebGL是什么？ WebGL就是web版的OpenGL。因为WebGL是基于OpengGL ES2.0设计的。 webgl运行效率高。 不需要专门搭建环境。甚至用editor也能开发。不过我更推荐你用WebStorm 可移植性好。成品就是js和html 教程资源多，比opengl学习门槛低。 WebGL程序结构 Html+Js+WebGL 实例源码： canvas：在H5之前，想在网页上实时
SpringBoot web工程发布配置
海涛高软
01-17 145
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4....
微信小游戏Unity WebGL适配方案指南
gitblog_01103的博客
08-08 526
微信小游戏Unity WebGL适配方案指南 minigame-unity-webgl-transform微信小游戏Unity引擎适配器文档。项目地址:https://gitcode.com/gh_mirrors/mi/minigame-unity-webgl-transform 1. 项目介绍 微信小游戏Unity WebGL适配方案（简称Unity WebGL小游适配）旨在降低将Unity游...
unitywebgl小程序打开摄像头
05-25
要在Unity WebGL中打开摄像头，您需要使用WebGL API的getUserMedia()函数。这将使您能够请求访问用户的摄像头和麦克风，并在用户确认后返回一个MediaStream对象。 以下是一个简单的示例代码，它演示了如何在Unity ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值