WebGL: 几个入门小例子

这篇具有很好参考价值的文章主要介绍了WebGL: 几个入门小例子。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本文通过WebGL例子,来帮助WebGL入门学习。

一、概述

WebGL (Web Graphics Library)是一组基于Open ES、在Web内渲染3D图形的Javascript APIs。

Ref. from Khronos Group: WebGL

WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element. 

二、配置WebGL开发环境

三、例子1:绘制三角形

<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>Draw a triangle</title>
		<meta charset="utf-8">
		<script type="text/javascript">
			var gl;
			var canvas;
			var shaderProgram;
			var vertexBuffer;
			function createGLContext(canvas)
			{
				var names = ["webgl", "experimental-webgl"];
				var context = null;
				for(var i = 0; i < names.length; i++)
				{
					try
					{
						context = canvas.getContext(names[i]);
					}
					catch(e)
					{
						if (context)
						{
							break;
						}
					}
				}
                if(context)
                {
                    context.viewportWidth = canvas.width;
                    context.viewportHeight = canvas.height;
                }
                else
                {
                    alert("Failed to create WebGL context!");
                }
                
                return context;
			}
            
            function loadShader(type, shaderSource)
            {
               var shader = gl.createShader(type);
               gl.shaderSource(shader, shaderSource);
               gl.compileShader(shader);
                
               if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
               {
                   alert("Error compiling shader" + gl.getShaderInfoLog(shader));
                   gl.deleteShader(shader);
                   return null
               }
                
               return shader;
            }
            
            function setupShaders()
            {
                var vertexShaderSource = 
                    "attribute vec3 aVertexPosition;				\n" +
                	"void main()									\n" + 
                	"{												\n" +
                    "	gl_Position = vec4(aVertexPosition, 1.0);	\n" + 
                    "}									            \n";
                
             	var fragmentShaderSource = 
                    "precision mediump float;						\n" +
                	"void main()									\n" + 
                	"{												\n" +
                    "	gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);	\n" + 
                    "}									            \n";
                
                var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
                var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
                
                shaderProgram = gl.createProgram();
                gl.attachShader(shaderProgram, vertexShader);
                gl.attachShader(shaderProgram, fragmentShader);
                
                gl.linkProgram(shaderProgram);
                
                if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
                {
                    alert("Failed to setup shaders!");
                }
                
                gl.useProgram(shaderProgram);
                
                shaderProgram.vertexPositionAttribute = 
                    gl.getAttribLocation(shaderProgram, "aVertexPosition");
            }
            
            function setupBuffers()
            {
                vertexBuffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
                
                var triangleVertices = [
                    0.0, 0.5, 0.0,
                    -0.5, -0.5, 0.0,
                    0.5, -0.5, 0.0
                ];
                gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
                vertexBuffer.itemSize = 3;
                vertexBuffer.numberOfItems = 3;
            }
            
            function draw()
            {
                gl.viewport(0,0, gl.viewportWidth, gl.viewportHeight);
                gl.clear(gl.COLOR_BUFFER_BIT);
                
                gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
                gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
                gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
            }

            function startup()
            {
                canvas = document.getElementById("myGLCanvas");
                gl = createGLContext(canvas);
                setupShaders();
                setupBuffers();
                gl.clearColor(0.0,0.0,0.0,1.0);

                draw();
            }
            
		</script>
	</head>
	<body onload="startup();">
		<canvas id="myGLCanvas" width="500" height="500"></canvas>
	</body>
</html>

参考资料

Andreas Anyuru. Professional WebGL Programming: Developing 3D Graphics for the Web.

Kouichi Matsuda, Rodger Lea. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL.

网络资料

WebGLhttps://www.khronos.org/webgl/

WebGL 2.0 Specificationhttps://registry.khronos.org/webgl/specs/latest/2.0/

Three.jshttps://threejs.org/

BabylonJShttps://www.babylonjs.com/文章来源地址https://www.toymoban.com/news/detail-636004.html

到了这里,关于WebGL: 几个入门小例子的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 5个 Istio 访问外部服务流量控制最常用的例子,你知道几个?

    5 个 Istio 访问外部服务的流量控制常用例子,强烈建议 收藏 起来,以备不时之需。 部署 sleep 服务,作为发送请求的测试源: 在 Istio 外部,使用 Nginx 搭建 duckling 服务的v1和v2两个版本,访问时显示简单的文本: 执行如下命名访问外部服务 httpbin.org : 返回结果如下: 此时的

    2024年02月08日
    浏览(40)
  • 云原生CAx软件:gRPC

    gRPC是Google基于HTTP/2协议开发的一套开源、跨平台的高性能RPC框架,可用于连接微服务架构内的各种服务,亦可以连接客户端与后端服务。 Ref. from gRPC  gRPC is a modern open source high performance Remote Procedure Call (RPC) framework that can run in any environment. It can efficiently connect services in and a

    2024年02月05日
    浏览(34)
  • WebGL入门之基于WebGL的3D可视化引擎介绍

    WebGL(Web Graphics Library)是一个JavaScript API,用于在任何兼容的Web浏览器中渲染高性能交互式3D和2D图形,而无需使用插件。WebGL通过引入一个非常符合OpenGL ES 2.0的API来实现这一点,该API可以在HTML 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。WebGL完全集

    2024年02月11日
    浏览(51)
  • WebGL入门

    WebGL采用HTML5中新引入的 canvas元素(标签) ,它定义了网页上的绘图区域。 在HTML5出现之前,如果你想在网页上显示图像,只能使用HTML提供的原生方案img标签。用这个标签显示图像虽然简单,但只能显示静态的图片,不能进行实时绘制和渲染。HTML5引入了canvas标签,允许Jav

    2024年04月09日
    浏览(64)
  • WebGL 入门:开启三维网页图形的新篇章(上)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(47)
  • WPF入门实例 WPF完整例子 WPF DEMO WPF学习完整例子 WPF实战例子 WPF sql实例应用 WPF资料源码

    WPF 和 WinForms 都是用于创建 Windows 桌面应用程序的开发框架,它们有一些相似之处,但也有很多不同之处。 在开发速度方面,这取决于具体情况。如果您熟悉 WinForms 开发并且正在开发简单的界面应用程序,则可能会比使用 WPF 更快速地完成任务。然而,在设计和实现复杂的用

    2024年02月06日
    浏览(54)
  • WebGL+Three.js入门与实战——给画布换颜色、绘制一个点、三维坐标系

    个人简介 👀 个人主页: 前端杂货铺 🙋‍♂️ 学习方向: 主攻前端方向,正逐渐往全干发展 📃 个人状态: 研发工程师,现效力于中国工业软件事业 🚀 人生格言: 积跬步至千里,积小流成江海 🥇 推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒

    2024年02月04日
    浏览(62)
  • java web mvc-05-JSF JavaServer Faces 入门例子

    Spring Web MVC-00-重学 mvc mvc-01-Model-View-Controller 概览 web mvc-03-JFinal web mvc-04-Apache Wicket web mvc-05-JSF JavaServer Faces web mvc-06-play framework intro web mvc-07-Vaadin web mvc-08-Grails The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.(手写简易版 mybatis) 以下是一个简单的JavaServer F

    2024年01月24日
    浏览(35)
  • 区块链入门的几个基本问题

    当我们在提到区块链的时候,很多人都知道这是个跟金融,就是跟money有关的东西,与其说区块链,我们常用的词应该是区块链技术,这种说法其实就揭露了其本质——技术。那与区块链相关联的另一个名词又是什么呢?那当然就是大名鼎鼎的比特币(BitCoin)。 比特币,你可

    2023年04月09日
    浏览(30)
  • iClient3D for Cesium&WebGL入门之使用vscode以服务方式运行调试

    作者:超图研究院技术支持中心-于丁 iClient3D for CesiumWebGL入门之使用vscode以服务方式运行调试 相信大家第一次使用SuperMap iClient3D for Cesium或SuperMap iClient3D for WebGL的时候,都遇到过和我一样的事情: 在文件夹中直接打开html的示例代码文件于浏览器中; 或者使用vscode安装open

    2024年02月04日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包