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.
网络资料
WebGL
https://www.khronos.org/webgl/
WebGL 2.0 Specificationhttps://registry.khronos.org/webgl/specs/latest/2.0/
Three.jshttps://threejs.org/
BabylonJShttps://www.babylonjs.com/
相关文章：
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-lev…...
刷题指南 —— 第一弹)
PAT(Advanced Level)刷题指南 —— 第一弹
一、1001 A+B Format 1. 问题重述 给两个整数，输出这两个数的加和的结果，每三位用逗号分隔。 2. Sample Input -1000000 93. Sample Output -999,9914. 题解 思路：直接将两个整数相加，判断是否为负，是负数则直接输出负号并转为正数；然后将正数转为字符串，按规则每…...
【BASH】回顾与知识点梳理（九）
【BASH】回顾与知识点梳理 九 九. 扩展正则表达式(延伸正规表示法)9.1 egrep命令语法匹配指定模式的行(用法和grep相同)忽略大小写匹配(用法和grep相同)反向匹配(用法和grep相同)显示行号(用法和grep相同)递归搜索目录(用法和grep相同)匹配整词(用法和grep相同)统计匹配行数(用…...
Android 版本 对应的 API版本
Android 14（开发者预览版） 如需详细了解平台变更，请参阅 Android 14 文档。 Android 13（API 级别 33） 如需详细了解平台变更，请参阅 Android 13 文档。 Android 12（API 级别 31、32…...
Django 异常信息 E302 expected 2 blank lines, found 1
在Django中，PEP 8风格指南建议在任何类定义之前都应该有两个空白行，包括视图（views）。错误信息"E302 expected 2 blank lines, found 1"表示在类定义之前只有一个空白行，而Django希望有两个空白行。 要修复…...
2019年09月《全国青少年软件编程等级考试》Python一级真题解析
一、单选题 第1题 关于Python的编程环境，下列的哪个表述是正确的？ A：Python的编程环境是图形化的； B：Python只有一种编程环境ipython； C：Python自带的编程环境是IDLE； D&#…...
mybatis如何防止SQL注入
阅读正文： mybatis是如何防止SQL注入的 1、首先看一下下面两个sql语句的区别： <select id"selectByNameAndPassword" parameterType"java.util.Map" resultMap"BaseResultMap"> select id, usernam…...
DoIP学习笔记系列：（三）用CAPL脚本过“安全认证”，$27服务实现
文章目录 1. 如何调用接口通过安全认证？如何新建CAPL工程，在此不再赘述，本章主要分享一下如何在CAPL中调用DoIP接口、diag接口进行DoIP和诊断的测试。 注意：CANoe工具本身的使用没什么难的，所谓会者不难难者不会，各位小伙伴有疑问要多问，多交流，往往难事都只是一层窗户…...
【Linux】多路转接 -- select函数
文章目录 1. 认识select函数2. select函数原型3. socket就绪条件4. select工作流程5. select服务器6. select的优缺点 首先我们要了解一下，什么是多路转接？ 多路转接也叫多路复用，是一种用于管理多个IO通道的技术。它能实现同时监听和处理多个…...
ospf于mgre中应用（直连与星型拓扑）
题目 地址配置 R1： R2： R3： R4： R5： ISP： R1/2/3的星型拓扑结构 R1配置： interface Tunnel0/0/0 ip address 192.168.6.1 255.255.255.0 tunnel-protocol gre p2mp source 200.1.1.1 ospf …...
Web压测工具http_load原理分析
01、前言 http_load是一款测试web服务器性能的开源工具，从下面的网址可以下载到最新版本的http_load： http://www.acme.com/software/http_load/ 这个软件一直在保持着更新（不像webbench，已经是十年的老古董了。 webbench的源…...
flask------消息闪现 flash
1介绍 flask提供了一个非常有用的flash()函数，它可以用来“闪现”需要提示给用户的消息，比如当用户登录成功后显示“欢迎回来！”。在视图函数调用flash()函数，传入消息内容，flash（）函数把消息存…...
【C++】数据结构与算法：常用查找算法
😏★,:.☆(￣▽￣)/$:.★ 😏 这篇文章主要介绍常用查找算法。 学其所用，用其所学。——梁启超 欢迎来到我的博客，一起学习，共同进步。 喜欢的朋友可以关注一下，下次更新不迷路…...
【Spring Cloud 六】Hystrix熔断
这里写目录标题 系列文章目录背景一、Hystrix是什么服务雪崩服务容错的相关概念熔断器降级超时控制限流 二、会什么要有Hystrix三、如何使用Hystrix进行熔断处理整体项目代码服务提供者pom文件yml配置文件启动类controller 服务消费者pom文件yml配置文件启动类feignhystrixcont…...
FTP使用教程
FTP使用教程 目录 一．FTP简介二．FTP搭建三．FTP使用 一．FTP简介 FTP中文为文件传输协议，简称为文传协议。它也是一个应用程序，不同的操作系统有不同的FTP应用程序，这些应用程序都遵守同一种协议以…...
网络安全（黑客技术）自学
1.网络安全是什么 网络安全可以基于攻击和防御视角来分类，我们经常听到的 “红队”、“渗透测试” 等就是研究攻击技术，而“蓝队”、“安全运营”、“安全运维”则研究防御技术。 2.网络安全市场 一、是市场需求量高； 二、则是发展相对成熟…...
使用公式与格式控制Excel快速实现计划甘特图
项目中都会遇到做任务计划的需求，有的客户要求需要有甘特图的形式本文介绍如何使用excel 单元格实现甘特图显示，调整任务时间自动填充单元格填色实现甘特图效果。废话不多说，先看效果。 准备工作先创建两列开始时间与完成时间，这…...
ChatGPT即将取代程序员
W...Y的主页 相信ChatGPT大家已经都不陌生，我们经常会在工作和学习中应用。但是ChatGPT的发展速度飞快。功能也越来越全面。ChatGPT的文章也是层次不穷的出现，ChatGPT即将取代程序员的消息也铺天盖地。那ChatGPT真的会取代程序员吗？我们是否…...
opencv-33 图像平滑处理-中值滤波cv2.medianBlur()
中值滤波是一种常见的图像处理滤波技术，用于去除图像中的噪声。它的原理是用一个滑动窗口（也称为卷积核）在图像上移动，对窗口中的像素值进行排序，然后用窗口中像素值的中值来替换中心像素的值。这样，中值滤…...
跟CZY一起深入理解C++(1)-一些基础知识
跟CZY一起深入理解C些基础知识 常量constconstexpr 初始化枚举与枚举类分离编译 常量 const 常量亦即不可改变的量(实际上可以暴力破解),那么常量在C中主要有以下几种应用场景 定义常量变量 //如果有以下情况,在GCC上能够破解,而在MSVC上不会改变 // int放在栈区,实际上是可…...
。】2022-5-15)
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下： struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
)
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学（Elliptic Curve Cryptography）是基于椭圆曲线数学理论的公钥密码系统，由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA，ECC在相同安全强度下密钥更短（256位ECC ≈ 3072位RSA…...
【OSG学习笔记】Day 18: 碰撞检测与物理交互
物理引擎（Physics Engine） 物理引擎 是一种通过计算机模拟物理规律（如力学、碰撞、重力、流体动力学等）的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互，广泛应用于 游戏开发、动画制作、虚…...
Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）
概述 在 Swift 开发语言中，各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过，在涉及到多个子类派生于基类进行多态模拟的场景下，…...
关于nvm与node.js
1 安装nvm 安装过程中手动修改 nvm的安装路径， 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解，但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后，通常在该文件中会出现以下配置&…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块，用户不点击提交按钮，只要输入框失去焦点，就会提前提示验证码是否正确。 一，模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
Spring Boot+Neo4j知识图谱实战：3步搭建智能关系网络！
一、引言 在数据驱动的背景下，知识图谱凭借其高效的信息组织能力，正逐步成为各行业应用的关键技术。本文聚焦 Spring Boot与Neo4j图数据库的技术结合，探讨知识图谱开发的实现细节，帮助读者掌握该技术栈在实际项目中的落地方法。 …...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...