页游逆袭，WebGL让网页游戏终于用上本地显卡了！

最新推荐文章于 2024-07-26 00:25:37 发布
最新推荐文章于 2024-07-26 00:25:37 发布
阅读量6.2k 收藏 1
点赞数 1
分类专栏： Web开发 文章标签： webgl javascript html5 网页游戏 web开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jbcoko/article/details/51263440
版权

网页游戏一直以来就给人们留下了画面差，游戏简单无聊的印象。归根结底还是因为网页游戏在浏览器中运行，不能使用本地丰富的硬件资源，最重要的就是本地显卡。但是现在随着Web技术的飞速发展，特别是HTML5的Canvas让HTML已经不是从前单纯的超文本标记语言，它已经有了绘图的功能。

WebGL是一种3D绘图标准，这种绘图标准把JavaScript和OpenGL ES 2.0结合在了一起，为HTML5 Canvas提供硬件3D加速渲染，Web开发人员终于可以借助系统显卡在浏览器里更流畅地运行3D画面了。WebGL技术标准免去了开发网页专用渲染插件的麻烦（比如flash和unity3d），可以用于创建具有复杂3D结构的网站页面，更重要的是用来设计大型3D网页游戏等。

目前支持WebGL的浏览器有Mozilla Firefox、Apple Safari以及开发者预览版Google Chrome等浏览器。

接下来，让我们来领略一下WebGL网页游戏的不可思议！(点击标题进入游戏)

1. Pearl Boy



2. Cube Slam




【查看作者更多原创文章http://www.w3layouts.cn/article/article_2.html】【w3好奇者】

jbcoko
关注
专栏目录
HTML5+CSS+WEBGL网页3D游戏开发
01-23
HTML5+CSS+WEBGL网页3D游戏开发，经典教程
webGl技术实现的H5游戏-飞机
08-23
国外大神分享的一款H5游戏源码，整体浏览非常流畅，交互也很酷
WebAssembly 游戏开发实用指南（一）
龙哥盟
07-26 1071
WebAssembly 是一项将在未来几年改变网络的技术。WebAssembly 承诺了一个世界，网络应用程序以接近本机速度运行。这是一个你可以用任何喜欢的语言为网络编写应用程序，并将其编译为本机平台以及网络的世界。对于 WebAssembly 来说，现在还处于早期阶段，但这项技术已经像火箭一样起飞。如果你对网络的未来和现在一样感兴趣，那就继续阅读吧！我写这本书是为了反映我喜欢学习新技能的方式。我将带领你通过使用 WebAssembly 及其所有相关技术开发游戏。
龙芯平台的html5网页游戏，基于webgl打造
ciji4412的博客
06-09 422
cut the rope 割绳子 https://www.gamepix.com/play/cut-the-rope/ cut the rope 2 割绳子2 https://www.gamepix.com/play/cut-the-rope-2-html5/ cut the...
webgl未使用独立显卡报告
netcy的专栏
03-14 1590
webgl，显卡
webgl 游戏_前端WebGL技术应用入门
weixin_39951396的博客
12-06 640
5G时代到来，静态资源加载“速度”与“体积”的概念将被逐渐淡化，前端GUI(Graphical User Interface)编程，应用创新技术(WebGL)提升界面“可交互性”、“灵活性”和“表达能力”提升交互转化与传达率的优势与诉求逐渐显现，本篇文章会通过一次实际的项目落地带你了解WebGL的工作流程，希望能帮各位读者入门WebGL的应用：通过此次业务场景落地，我们以一个前端GUI展...
WebGL游戏 - 战争的天空「WebGL Game - Skies of War」-crx插件
03-16
你喜欢玩战争游戏吗？你可以在这里！你可以玩更多的游戏这个附加 新标签页Chrome中的Warframe壁纸和背景。 这个新的扩展程序在每个新选项卡上都提供了精美的图像，并且是为所有游戏主题/ Warframe壁纸的粉丝制作的。如何使用：只需单击“添加到Chrome”即可安装扩展程序，然后将安装W​​arframe HD墙纸和背景。 浏览时玩游戏！ 如何删除：1.单击Chrome浏览器右上角提供的图标。 2.转到“设置”选项。 3.单击“扩展名”选项。 4.找到要卸载的扩展名。 5.找到要删除的扩展名后，单击“启用”右边的垃圾箱图标。 6.扩展名已删除。 支持语言:Bahasa Indonesia,Bahasa Melayu,Deutsch,English,Français,Kiswahili,Nederlands,Norsk,Tiếng Việt,Türkçe,català,dansk,eesti,español,hrvatski,italiano,latviešu,magyar,polski,română,slovenský,slovenščina,suomi,svenska,čeština,Ελληνικά,Српски,български,русский,українська,עברית,فارسی‎,हिन्दी,বাংলা,ગુજરાતી,ಕನ್ನಡ,ไทย,‫العربية,日本語,한국어
Duet-WebGL：Duet（2015年最佳游戏）用WebGl重写！
02-04
WebGL版本的Duet（2013年最佳游戏）！ 从汲取灵感！ 屏幕截图 作为在Node-Webkit下运行的应用程序： 现场观看！ 演示： : 产品特点 WebGL与Phaser和Google Polymer的集成 球爆炸和重建动画 基于承诺的逻辑，可...
Unity浏览本地webgl网页的工具
05-30
exe放入webgl的index.html同级目录下，直接运行exe即可调用浏览器打开网页
Unity-WebGL-Record:由于unitywebgl上不能用Microphone类，所以使用网页接口来实现
05-09
由于unitywebgl上不能用Microphone类，所以使用网页接口来实现 关键交互在于调用plugins中的WebGLRecorder.jslib 参考： output中是发布的项目，发布后需要把index.html中加一行[removed][removed] 来引用recorder....
UnityWebgl网页弹窗播放实时视频.zip
07-01
Unity WebGL 是一个强大的游戏开发平台，它允许开发者创建交互式3D和2D内容，并能在浏览器上无缝运行。本项目“UnityWebgl网页弹窗播放实时视频”是针对Unity WebGL的一项应用，它提供了在网页中播放实时视频的功能...
基于WebGL的游戏引擎PlayCanvas.zip
07-18
一般来讲，游戏开发与web应用完全是两码事。但先试试，游戏世界的很多工具都可以被用于在网站中增加华丽界面。PlayCanvas就是一个基于WebGL的游戏引擎，结合了物理、光影、音效等工具用于创建一个复杂的界面。 示例代码： // Create a PlayCanvas application var canvas = document.getElementById("application-canvas"); var app = new pc.fw.Application(canvas, {}); app.start(); // Fill the available space at full resolution app.setCanvasFillMode(pc.fw.FillMode.FILL_WINDOW); app.setCanvasResolution(pc.fw.ResolutionMode.AUTO); // Create box entity var cube = new pc.fw.Entity(); app.context.systems.model.addComponent(cube, {     type: "box" }); // Create camera entity var camera = new pc.fw.Entity(); app.context.systems.camera.addComponent(camera, {     clearColor: new pc.Color(0.1, 0.1, 0.1) }); // Create directional light entity var light = new pc.fw.Entity(); app.context.systems.light.addComponent(light); // Add to hierarchy app.context.root.addChild(cube); app.context.root.addChild(camera); app.context.root.addChild(light); // Set up initial positions and orientations camera.setPosition(0, 0, 3); light.setEulerAngles(45, 0, 0); // Register an update event app.on("update", function (deltaTime) {     cube.rotate(10 * deltaTime, 20 * deltaTime, 30 * deltaTime); }); 标签：PlayCanvas
webGL直接写的2d火爆射击游戏
01-08
效果请见https://blog.csdn.net/vily_lei/article/details/86097324 直接用webgl接口写的高效2d渲染表现的火爆射击小游戏,可以在任何支持webGL的移动或者PC端运行。
Unity Webgl本地打开的配置文件
09-08
unity打包webgl在本地浏览器打不开？可以查看我的文档，并下载此配置文件即可实现本地浏览unity网页
webgl 基础渲染demo_Webgl水平不能老停留十年之前
weixin_39737051的博客
11-25 238
前些日子客户都会转这个人工智能大会的webgl,老泪纵横，在webgl搞了那么多年之后，组织上终于想起这玩意了么？终于捡起来当噱头了么 https://ai.worldaic.com.cn/pre但翻了一下之后，脸色逐渐严肃，这个水平任重而道远啊，你基本可以一眼就看出来浓浓的国产气质，和十年前quest3d时代的水平近似。康托还是得从技术层面分析分析，啥是好的，啥是精致细腻，这东西还是有标准的，并...
webgl 游戏_30个令人惊叹的WebGL示例和演示
weixin_39765869的博客
12-04 3390
WebGl仍在增长，尽管大多数现代浏览器都支持它，但它也可能需要在旧的浏览器上工作。在本文中，我遇到了很多WebGL的示例和演示，它们可以增进您对这项新技术的理解。因此，请坐下来放松身心，使用最新的浏览器，并查看这些令人惊叹的WebGL演示。水族馆由Greggman和Human Engines创建。水族馆几乎完全基于时钟运行。这意味着，如果它们的时钟同步，则摄像机和每条鱼的位置在机器上都相同。在联...
webgl 游戏_「WebGL基础教程」：第三部分
weixin_39697660的博客
12-07 194
欢迎回到第三部分，也是我们的迷你WebGL教程系列的最后一部分。如果你错过了前两部分，可以点击此链接进行查看「WebGL基础」：第一部分,「WebGL基础」：第二部分。 在此课程中，我们会会介绍光照和添加2D对象到场景中。新的内容很多，我们还是直接开始吧。光照光照可能是3D应用中最技术化和最难理解的部分了。牢固地掌握光照知识绝对是非常基本的。 光照是如何工作的？在我们介绍不同类型的光照，和编码技术...
基于WebGL HTML5 的场景小游戏
HT for Web 3D
04-25 3277
为了实现一个基于 HTML5 的场景小游戏，我采用了 HT for Web 来实现，短短200行代码，我就能实现用“第一人称”来操作前进后退上下左右，并且实现了碰撞检测。 先来看下实现的效果： http://www.hightopo.com/guide/guide/core/3d/examples/example_collision.html 或者 http://v.youku.com/v_sho...
探索创新游戏开发：BirdWar - 一款基于WebGL的多人在线对战游戏
gitblog_00073的博客
04-02 333
探索创新游戏开发：BirdWar - 一款基于WebGL的多人在线对战游戏 项目地址:https://gitcode.com/matchvs/BirdWar BirdWar 是一个开源的WebGL项目，它展示了现代浏览器技术在创建实时、互动且引人入胜的游戏体验方面的潜力。在这个项目中，开发者利用WebGL和WebSockets构建了一个多人在线对战游戏，让玩家可以在浏览器中直接体验飞行射击的乐趣。...
如何在网页上使用webgl
最新发布
09-20
WebGL（Web Graphics Library）是HTML5的一部分，它提供了一个低级的API，让你能在浏览器中直接操作GPU进行图形渲染，实现了3D图形在Web上的实时渲染。以下是在网页上使用WebGL的基本步骤： 1. **兼容性检查**： 确保你的浏览器支持WebGL，大部分现代浏览器如Chrome、Firefox、Safari和Edge都内置了WebGL支持。你可以使用`window.WebGLRenderingContext`检测。 2. **创建canvas元素**： 在HTML中添加一个`<canvas>`元素，用于绘制3D场景，例如： ```html <canvas id="myCanvas" width="500" height="500"></canvas> ``` 3. **获取context**： JavaScript中，使用`document.getElementById('myCanvas').getContext('webgl')`来获取`WebGLRenderingContext`对象。 4. **初始化渲染上下文**： 创建一个`WebGLProgram`对象并设置顶点着色器和片段着色器。通常需要加载并编译两个文件：`.vert`（顶点）和`.frag`（像素）文件。 ```javascript var gl = canvas.getContext('webgl'); var program = createShaderProgram(gl, 'vertexShader.vert', 'fragmentShader.frag'); ``` 5. **设置缓冲区**： 声明顶点数组，可能还需要颜色和纹理坐标等信息。 6. **设置视口和模型矩阵**： `gl.viewport()`设置视口大小，`gl.matrixMode()`切换到相应模式设置矩阵。 7. **渲染循环**： 使用`drawArrays()`或`drawElements()`调用命令，定期清空颜色缓冲，然后执行渲染逻辑。 8. **处理事件**： 可能需要监听鼠标和键盘事件，以控制3D场景的行为。 ```javascript function animate() { requestAnimationFrame(animate); // 渲染代码... } document.addEventListener('DOMContentLoaded', function() { animate(); }); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值