当前位置:网站首页>Getting started with webgl (1)
Getting started with webgl (1)
2022-07-07 15:38:00 【Vegetable chicken on the road】
1. What is? webGL?
webgl Is to draw and render graphics on Web pages (3D graphics ), And allow users to interact with it ;
2. Why do I learn webGL?
Optimize performance in game development , It's in web You can develop and directly view the effect , Easy to translate into game development to understand .
3. The simplest webGL Program ( Clear plot area )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03 Draw and transform </title>
</head>
<body onload="main()">
<canvas id = "webgl",width = "400" , height="400"></canvas>
<script src="libs/webgl-utils.js"></script>
<script src="libs/webgl-debug.js"></script>
<script src="libs/cuon-utils.js"></script>
<script src = "RotateTriangle.js"></script>
</body>
</html>
<RotateTriangle.js>
function main() {
// obtain <canvas> Elements
var canvas = document.getElementById('webgl');
// obtain WebGL Rendering context
var gl = getWebGLContext(canvas);
if (!gl) {
console.log('Failed to get the rendering context for WebGL');
return;
}
// Specify empty <canvas> The color of the
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// Empty <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
}
Library address referenced above :https://gitee.com/JingEra/web-gl-common-library, Please download by yourself .
Of course, if you don't want to use the encapsulated library, you can write it yourself , Let me also put a reference project below . Address :https://gitee.com/JingEra/web-gl-common-library/tree/master/03
I am because some method calls of the encapsulated library are more convenient in the process of reading and learning .
4. understand
There seems to be nothing to explain , Mainly :
边栏推荐
- 摘抄的只言片语
- Steps to create P8 certificate and warehousing account
- Why do we use UTF-8 encoding?
- Nacos一致性协议 CP/AP/JRaft/Distro协议
- 【数字IC验证快速入门】18、SystemVerilog学习之基本语法5(并发线程...内含实践练习)
- 2. 堆排序『较难理解的排序』
- What is data leakage
- Configure mongodb database in window environment
- [quick start of Digital IC Verification] 26. Ahb-sramc of SystemVerilog project practice (6) (basic points of APB protocol)
- Database exception resolution caused by large table delete data deletion
猜你喜欢
【数字IC验证快速入门】25、SystemVerilog项目实践之AHB-SRAMC(5)(AHB 重点回顾,要点提炼)
Ctfshow, information collection: Web3
【數據挖掘】視覺模式挖掘:Hog特征+餘弦相似度/k-means聚類
Ctfshow, information collection: web7
CTFshow,信息搜集:web6
【数据挖掘】视觉模式挖掘:Hog特征+余弦相似度/k-means聚类
【数字IC验证快速入门】19、SystemVerilog学习之基本语法6(线程内部通信...内含实践练习)
Niuke real problem programming - day20
Starting from 1.5, build a microservice framework link tracking traceid
[follow Jiangke University STM32] stm32f103c8t6_ PWM controlled DC motor_ code
随机推荐
Connecting FTP server tutorial
Comparable and comparator of sorting
The download button and debug button in keil are grayed out
数学建模——什么是数学建模
Starting from 1.5, build a microservice framework link tracking traceid
Configure mongodb database in window environment
[deep learning] semantic segmentation experiment: UNET network /msrc2 dataset
有一头母牛,它每年年初生一头小母牛。每头小母牛从第四个年头开始,每年年初也生一头小母牛。请编程实现在第n年的时候,共有多少头母牛?
Ctfshow, information collection: web2
What is data leakage
Summer safety is very important! Emergency safety education enters kindergarten
leetcode 241. Different ways to add parentheses design priority for operational expressions (medium)
HW primary flow monitoring, what should we do
【目标检测】YOLOv5跑通VOC2007数据集
使用cpolar建立一个商业网站(2)
TypeScript 发布 4.8 beta 版本
Niuke real problem programming - day20
Whether runnable can be interrupted
[deep learning] image hyperspectral experiment: srcnn/fsrcnn
写一篇万字长文《CAS自旋锁》送杰伦的新专辑登顶热榜