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放在栈区,实际上是可…...
web vue 项目 Docker化部署
Web 项目 Docker 化部署详细教程 目录 Web 项目 Docker 化部署概述Dockerfile 详解 构建阶段生产阶段 构建和运行 Docker 镜像 1. Web 项目 Docker 化部署概述 Docker 化部署的主要步骤分为以下几个阶段： 构建阶段（Build Stage）：…...
React 第五十五节 Router 中 useAsyncError的使用详解
前言 useAsyncError 是 React Router v6.4 引入的一个钩子，用于处理异步操作（如数据加载）中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误：捕获在 loader 或 action 中发生的异步错误替…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
【配置 YOLOX 用于按目录分类的图片数据集】
现在的图标点选越来越多，如何一步解决，采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集（每个目录代表一个类别，目录下是该类别的所有图片），你需要进行以下配置步骤&#x…...
工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
招商蛇口 | 执笔CID，启幕低密生活新境
作为中国城市生长的力量，招商蛇口以“美好生活承载者”为使命，深耕全球111座城市，以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子，招商蛇口始终与城市发展同频共振，以建筑诠释对土地与生活的…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性： 隐藏字段的实现细节 提供对字段的受控访问 访问控制： 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性： 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑： 可以…...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
用鸿蒙HarmonyOS5实现中国象棋小游戏的过程
下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...