当前位置： 首页 > news >正文

WebGL: 几个入门例子

news 2026/4/10 10:33:54

本文罗列几个WebGL入门例子，用于帮助WebGL学习。

例子1：绘制三角形

<!DOCTYPE HTML>
<html loang="en"><head><title>Triangle</title><meta charset="utf-8"><script>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.getAttributeLocation(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);vertextBuffer.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);}</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.

网络资料

three.jshttps://threejs.org/

babylon.jsicon-default.png?t=N6B9https://www.babylonjs.com/

相关文章：

WebGL: 几个入门例子

本文罗列几个WebGL入门例子&#xff0c;用于帮助WebGL学习。 例子1&#xff1a;绘制三角形 <!DOCTYPE HTML> <html loang"en"><head><title>Triangle</title><meta charset"utf-8"><script>var gl;var canvas…...

编程日记 2023/8/5 5:42:26

App Cleaner Uninstaller for Mac 苹果电脑软件卸载工具

App Cleaner & Uninstaller 是一款非常有用的 Mac 应用程序清理和卸载工具。它可以彻底地清理系统中的应用程序、扩展和残留文件&#xff0c;以释放磁盘空间并优化系统性能。 此外&#xff0c;它还提供了磁盘空间监控和智能清理建议等功能&#xff0c;使用户可以轻松地管理…...

编程日记 2023/8/5 5:41:25

基于Yolov2深度学习网络的车辆检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1. 卷积神经网络&#xff08;CNN&#xff09; 4.2. YOLOv2 网络 4.3. 实现过程 4.4. 应用领域 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心…...

编程日记 2023/8/5 5:40:24

Java的I/O类库- NIO

Java NIO&#xff08;New I/O&#xff09;是Java平台提供的一种用于非阻塞I/O操作的API。它引入了一组新的Java类&#xff0c;用于实现高性能的、非阻塞的I/O操作&#xff0c;以替代传统的阻塞式I/O&#xff08;IO Blocking&#xff09;模型。Java NIO的核心是基于Channel&…...

编程日记 2023/8/5 5:39:22

【ASP.NET MVC】使用动软（三）（11）

一、问题 上文中提到&#xff0c;动软提供了数据库的基本操作功能&#xff0c;但是往往需要添加新的功能来解决实际问题&#xff0c;比如GetModel&#xff0c;通过id去查对象&#xff1a; 这个功能就需要进行改进&#xff1a;往往程序中获取的是实体的其他属性&#xff0c;比如…...

编程日记 2023/8/5 5:38:21

基于MATLAB长时间序列遥感数据植被物候提取与分析

MATLAB MATLAB是美国MathWorks公司出品的商业数学软件&#xff0c;用于数据分析、无线通信、深度学习、图像处理与计算机视觉、信号处理、量化金融与风险管理、机器人&#xff0c;控制系统等领域。 [1] MATLAB是matrix&laboratory两个词的组合&#xff0c;意为矩阵工厂&a…...

编程日记 2023/8/5 5:37:20

K8S deployment 重启的三种方法

一般重启deployment&#xff0c;常规操作是删掉对应的pod, 但如果有多个副本集的话&#xff0c;一个个删很麻烦。 除了删除pod&#xff0c;还可以&#xff1a; 方案一&#xff1a; 加上环境变量 kubectl patch deploy <deployment-name> -p {"spec":{"…...

编程日记 2023/8/5 5:36:18

解决Linux下PyCharm无法新建文件

一、问题描述 如图&#xff0c;在Ubuntu Linux系统中使用pycharm管理项目时&#xff0c;提示无法新建.py源文件&#xff1a; 二、问题解决 将问题定性为文件夹&#xff08;目录&#xff09;权限问题&#xff0c;在终端中打开项目文件夹的上级目录&#xff0c;将整个项目目录的…...

编程日记 2023/8/5 5:35:17

规则引擎技术解决方案

1 概述 1.1 规则引擎的背景 业务系统在应用过程中&#xff0c;常常包含着要处理“复杂、多变”的部分&#xff0c;这部分往往是“业务规则”或者是“数据的处理逻辑”。因此这部分的动态规则的问题&#xff0c;往往需要可配置&#xff0c;并对系统性能和热部署有一定的要求。从…...

编程日记 2023/8/5 5:34:14

2023奇安信天眼设备--面试题

1.在天眼分析平台网络协议中sip、dip、sport、dport字段表示的含义是什么&#xff1f; sip 源IP、dip 目的IP、sport 源端口、dport 目的端口 2.在天眼分析平台DNS协议中dns type字段表示的含义是? dns type表示DNS请求类型 0代表DNS请求&#xff0c;1代表DNS响应 3.dns_typ…...

编程日记 2023/8/5 5:33:13

【剑指Offer 58】 左旋转字符串，Java解密。

LeetCode 剑指Offer 75道练习题 文章目录 剑指Offer：左旋转字符串示例：限制：解题思路：剑指Offer：左旋转字符串 【题目描述】 字符串的左旋转操作是把字符串前面的若干个字符转移到字符串的尾部。请定义一个函数实现字符串左旋转操作的功能。比如，输入字符串"abcdef…...

编程日记 2023/8/5 5:32:12

Python SMTP发送邮件

Python SMTP发送邮件 SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则&#xff0c;由它来控制信件的中转方式。 python的smtplib提供了一种很方便的途径发送电子邮件。它对smtp协议进行了简单的…...

编程日记 2023/8/5 5:31:11

Jmeter-获取接口响应头（Response headers）信息进行关联

文章目录 Jmeter-获取接口响应头&#xff08;Response headers&#xff09;信息进行关联使用正则表达式提取器将Set-Cookie的值提取出来在其余接口中关联该提取信息运行查看关联是否成功 Jmeter-获取接口响应头&#xff08;Response headers&#xff09;信息进行关联 获取某一…...

编程日记 2023/8/5 5:30:09

解密爬虫ip是如何被识别屏蔽的

在当今信息化的时代&#xff0c;网络爬虫已经成为许多企业、学术机构和个人不可或缺的工具。然而&#xff0c;随着网站安全防护的升级&#xff0c;爬虫ip往往容易被识别并屏蔽&#xff0c;给爬虫工作增加了许多困扰。在这里&#xff0c;作为一家专业的爬虫ip供应商&#xff0c;…...

编程日记 2023/8/5 5:29:08

GPIO实验

一、GPIO GPIO&#xff08;General-purpose input/output&#xff09;即通用型输入输出&#xff0c;GPIO可以控制连接在其之上的引脚实现信号的输入和输出 芯片的引脚与外部设备相连&#xff0c;从而实现与外部硬件设备的通讯、控制及信号采集等功能 LED实验步骤 最终目的&am…...

编程日记 2023/8/5 5:28:07

Docker-Compose编排与部署（lnmp实例）

第四阶段 时 间&#xff1a;2023年8月3日 参加人&#xff1a;全班人员 内 容&#xff1a; Docker-Compose编排与部署 目录 一、Docker Compose &#xff08;一&#xff09;概述 &#xff08;二&#xff09;Compose适用于所有环境&#xff1a; &#xff08;三&#xf…...

编程日记 2023/8/5 5:27:06

Docker 网络模型使用详解 （1）Dockers网络基础

目录 环境准备 Dockers 网络基础 1.端口映射 查看随机映射端口范围 -p可以指定映射到本地端口 映射指定地址和指定端口 映射指定地址 宿主机端口随机分配 指定传输协议 端口暴露 容器互联 自定义网络 现在把container7加入到demo_net中 在启动一个容器加入到demo_net…...

编程日记 2023/8/5 5:26:04

【Spring】（四）Bean 的作用域和生命周期

文章目录 前言一、Bean 的作用域1.1 被修改的 Bean 案例1.2 作用域的定义1.3 Bean 的六种作用域1.4 Bean 作用域的设置 二、Spring 的执行流程 和 Bean 的生命周期2.1 Spring 的执行流程2.2 Bean 的生命周期2.3 Bean 生命周期的演示 前言 Bean 是 Spring 框架中的一个核心概念…...

编程日记 2023/8/5 5:25:03

卷积神经网络【图解CNN】

文章目录 1.卷积运算2.池化3.全连接层 卷积神经网络可以看作一个函数或者黑箱&#xff0c;输入就是图片的像素阵列&#xff0c;输出就是这个图片是什么&#xff1f; 图片是X&#xff0c;那么就输出‘x’&#xff0c;图片是‘O’,那么就输出O&#xff1b; 在计算机眼中&#xff…...

编程日记 2023/8/5 5:23:00

命令模式 Command Pattern 《游戏设计模式》学习笔记

对于一般的按键输入&#xff0c;我们通常这么做&#xff0c;直接if按了什么键&#xff0c;就执行相应的操作 在这里我们是将用户的输入和程序行为硬编码在一起&#xff0c;这是我们很自然就想到的最快的做法。 但是如果这是一个大型游戏&#xff0c;往往我们需要实现一个按键…...

编程日记 2023/8/5 5:21:58

Felgo框架在QmlBook中的应用：快速构建企业级应用

Felgo框架在QmlBook中的应用&#xff1a;快速构建企业级应用 【免费下载链接】qmlbook The source code for the upcoming qml book 项目地址: https://gitcode.com/gh_mirrors/qm/qmlbook Felgo框架是QmlBook中推荐的企业级应用开发解决方案&#xff0c;它基于Qt框架扩…...

编程新知 2026/4/10 8:52:31

vLLM-v0.17.1：从MATLAB算法到生产部署的桥梁

vLLM-v0.17.1&#xff1a;从MATLAB算法到生产部署的桥梁 1. 科研与生产的鸿沟 在算法研发领域&#xff0c;MATLAB长期占据着不可替代的地位。它的矩阵运算能力、丰富的工具箱和直观的语法&#xff0c;使其成为科研人员和算法工程师的首选工具。然而&#xff0c;当这些精心设计…...

编程新知 2026/4/10 6:39:43

LumiPixel Canvas Quest光影魔法：不同光照条件下的人像生成效果

LumiPixel Canvas Quest光影魔法&#xff1a;不同光照条件下的人像生成效果 1. 光影的魅力&#xff1a;用光绘画的艺术 摄影圈有句老话&#xff1a;"摄影是用光的艺术"。这句话在AI生成领域同样适用。LumiPixel Canvas Quest通过精准的光照控制&#xff0c;让创作者…...

编程新知 2026/4/10 6:09:16

真机部署仅需几小时！PhyAgentOS开源项目，实现零代码跨本体迁移

开箱即用、零代码跨本体、多机协同、决策可追溯的全链路开发底座 ——具身智能自进化操作系统 目录 01 PhyAgentOS 是什么 核心创新&#xff1a;认知—物理解耦 hal_watchdog&#xff1a;那个关键的‘看门狗’ 四层架构&#xff1a;模块化、可插拔 自进化能力&#xff…...

编程新知 2026/4/10 5:35:39

福建钳压式声测管：桩基检测利器

钳压式声测管的定义http://jsoc9409b6b.isitestar.vip/ 钳压式声测管是一种用于桩基检测的预埋管件&#xff0c;通过钳压连接方式实现快速安装。其核心功能是在混凝土灌注桩中形成通道&#xff0c;便于超声波检测仪探测桩身完整性。 主要特点 连接方式&#xff1a;采用钳压工…...

编程新知 2026/4/10 5:08:15

游戏洞察力 | 为什么塔防游戏总能赚钱？从玩法设计看品类底层逻辑

在上一篇内容中&#xff0c;我们深入剖析了塔防游戏的商业价值核心&#xff0c;发现其凭借低门槛、高覆盖的用户基础、可深度挖掘的策略空间以及强兼容的玩法框架&#xff0c;成为天然适配广告变现的优质手游品类&#xff0c;也理解了这一经典品类能够长期稳居市场的底层逻辑。…...

编程新知 2026/4/10 4:18:24

【数据库系统】数据库系统概论——第十二章 数据库管理系统

第十二章 数据库管理系统 文章目录 第十二章 数据库管理系统 12.1数据库管理系统的基本功能 12.2数据库管理系统的系统结构 12.2.1数据库管理系统的层次结构 12.2.2关系数据库管理系统的运行过程示例 12.3语言处理层 12.3.1语言处理层的任务和工作步骤 12.3.2解释方法 12.3.3预…...

编程新知 2026/4/10 3:55:32

从春晚到AWE：追觅与扫地机器人市场的“冰与火之歌”

2026年开年，扫地机器人行业呈现出耐人寻味的两极图景：一边是追觅凭借春晚效应交出全渠道市占第一的成绩单，另一边是洛图科技发布的行业数据显示，1-2月中国扫地机器人线上销量同比下降22.2%。在行业大盘承压的背景下，追觅为何能逆势增长？春晚这个国民级舞台，究竟如何改写…...

编程新知 2026/4/10 3:49:31

Pi0模型快速体验：一键启动Web演示，免配置玩转机器人控制

Pi0模型快速体验&#xff1a;一键启动Web演示&#xff0c;免配置玩转机器人控制 1. 项目概述 Pi0是一个创新的视觉-语言-动作流模型&#xff0c;专为通用机器人控制设计。这个项目最吸引人的地方在于它提供了一个开箱即用的Web演示界面&#xff0c;让用户无需复杂的配置就能体…...

编程新知 2026/4/10 2:50:26

RVStarArduino：RISC-V架构下的Arduino兼容开发框架

1. RVStarArduino&#xff1a;面向RISC-V架构的Arduino兼容开发框架RVStarArduino是专为Nuclei RVStar开发板设计的Arduino兼容开发框架&#xff0c;其核心目标是将Arduino生态的易用性与RISC-V架构的硬件特性深度融合。该框架并非简单的代码移植&#xff0c;而是基于Nuclei SD…...

编程新知 2026/4/10 0:24:43