WebGL绘制正方体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
body {
margin: 0;
text-align: center;
}
#canvas {
margin: 0;
}
</style>
</head>
<body οnlοad="main()">
<canvas id="canvas" height="800" width="1200"></canvas>
</body>
<script src="lib/webgl-utils.js"></script>
<script src="lib/webgl-debug.js"></script>
<script src="lib/cuon-utils.js"></script>
<script src="lib/cuon-matrix.js"></script>
<script>
//顶点着色器
var VSHADER_SOURCE = "" +
"attribute vec4 a_Position;\n" +
"attribute vec4 a_Color;\n" +
"uniform mat4 u_ModelViewMatrix;\n" +
"varying vec4 v_Color;\n" +
"void main(){" +
" gl_Position = u_ModelViewMatrix * a_Position;\n" +
" v_Color = a_Color;\n" +
"}\n";
//片元着色器
var FSHADER_SOURCE = "" +
"#ifdef GL_ES\n" +
"precision mediump float;\n" +
"#endif\n" +
"varying vec4 v_Color;\n" +
"void main(){" +
" gl_FragColor = v_Color;\n" +
"}\n";
//声明js需要的相关变量
var canvas = document.getElementById("canvas");
var gl = getWebGLContext(canvas);
function main() {
if (!gl) {
console.log("你的浏览器不支持WebGL");
return;
}
//初始化着色器
if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
console.log("无法初始化着色器");
return;
}
var n = initVertexBuffers(gl);
if (n < 0) {
console.log("无法创建缓冲区");
return;
}
//设置视角矩阵的相关信息
var u_ModelViewMatrix = gl.getUniformLocation(gl.program, "u_ModelViewMatrix");
if (u_ModelViewMatrix < 0) {
console.log("无法获取矩阵变量的存储位置");
return;
}
//设置底色
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//进入场景初始化
draw(gl, n, u_ModelViewMatrix);
}
function draw(gl, n, u_ModelViewMatrix) {
//设置视角矩阵的相关信息（视点，视线，上方向）
var viewMatrix = new Matrix4();
viewMatrix.setLookAt(3,3,7,0,0,0,0,1,0);
//设置模型矩阵的相关信息
var modelMatrix = new Matrix4();
modelMatrix.setRotate(0, 0, 0, 1);
//设置透视投影矩阵
var projMatrix = new Matrix4();
projMatrix.setPerspective(30,canvas.width/canvas.height,1,100);
//计算出模型视图矩阵 viewMatrix.multiply(modelMatrix)相当于在着色器里面u_ViewMatrix * u_ModelMatrix
var modeViewMatrix = projMatrix.multiply(viewMatrix.multiply(modelMatrix));
//将试图矩阵传给u_ViewMatrix变量
gl.uniformMatrix4fv(u_ModelViewMatrix, false, modeViewMatrix.elements);
//开启隐藏面清除
gl.enable(gl.DEPTH_TEST);
//清空颜色和深度缓冲区
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//绘制图形
gl.drawElements(gl.TRIANGLES,n,gl.UNSIGNED_BYTE,0);
}
function initVertexBuffers(gl) {
// 创建一个立方体
// v6----- v5
// /| /|
// v1------v0|
// | | | |
// | |v7---|-|v4
// |/ |/
// v2------v3
var verticesColors = new Float32Array([
// 设置顶点和颜色（偷的顶点代码位置）
1.0, 1.0, 1.0, 1.0, 1.0, 1.0, // v0 White
-1.0, 1.0, 1.0, 1.0, 0.0, 1.0, // v1 Magenta
-1.0, -1.0, 1.0, 1.0, 0.0, 0.0, // v2 Red
1.0, -1.0, 1.0, 1.0, 1.0, 0.0, // v3 Yellow
1.0, -1.0, -1.0, 0.0, 1.0, 0.0, // v4 Green
1.0, 1.0, -1.0, 0.0, 1.0, 1.0, // v5 Cyan
-1.0, 1.0, -1.0, 0.0, 0.0, 1.0, // v6 Blue
-1.0, -1.0, -1.0, 0.0, 0.0, 0.0 // v7 Black
]);
//顶点索引
var indices = new Uint8Array([
0, 1, 2, 0, 2, 3, // 前
0, 3, 4, 0, 4, 5, // 右
0, 5, 6, 0, 6, 1, // 上
1, 6, 7, 1, 7, 2, // 左
7, 4, 3, 7, 3, 2, // 下
4, 7, 6, 4, 6, 5 // 后
]);
//创建缓冲区对象
var vertexColorBuffer = gl.createBuffer();
var indexBuffer = gl.createBuffer();
if (!vertexColorBuffer || !indexBuffer) {
console.log("无法创建缓冲区对象");
return -1;
}
//绑定缓冲区对象并写入数据
gl.bindBuffer(gl.ARRAY_BUFFER, vertexColorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
//获取数组中一个元素所占的字节数
var fsize = verticesColors.BYTES_PER_ELEMENT;
//获取顶点位置变量位置
var a_Position = gl.getAttribLocation(gl.program, "a_Position");
if (a_Position < 0) {
console.log("无法获取顶点位置的存储变量");
return -1;
}
//对位置的顶点数据进行分配，并开启
gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, fsize * 6, 0);
gl.enableVertexAttribArray(a_Position);
//获取顶点颜色的变量
var a_Color = gl.getAttribLocation(gl.program, "a_Color");
if (a_Color < 0) {
console.log("无法获取顶点位置的存储变量");
return -1;
}
//对位置的顶点数据进行分配，并开启
gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, fsize * 6, fsize * 3);
gl.enableVertexAttribArray(a_Color);
//将顶点索引数据写入缓冲区对象
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER,indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,indices,gl.STATIC_DRAW);
return indices.length;
}
</script>
</html>
WebGL绘制正方体的更多相关文章
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
- WebGL绘制有端头的线
关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...
- WebGL绘制有宽度的线
WebGL中有宽度的线一直都是初学者的一道门槛,因为在windows系统中底层的渲染接口都是D3D提供的,所以无论你的lineWidth设置为多少,最终绘制出来的只有一像素.即使在移动端可以设置有宽度 ...
- 一篇文章理清WebGL绘制流程
转自:https://www.jianshu.com/p/e3d8a244f3d9 目录 初始化WebGL环境 顶点着色器(Vertex Shader)与片元着色器(Fragment Shader) ...
- WebGL 绘制Line的bug(二)
上一篇文章简单介绍了WebGL绘制Line的bug,不少朋友给我发了私信,看来这个问题大家都遇上过哈.今天这篇文章会讲述解决这个问题的work around. 基本思路 上一篇文章结尾简单提了下解决的 ...
- WebGL 绘制Line的bug（一）
今天说点跟WebGL相关的事儿,不知道大家有没有碰到过类似的烦恼. 熟悉WebGL的同学都知道,WebGL绘制模式有点.线.面三种:通过点的绘制可以实现粒子系统等,通过线可以绘制一些连线关系:面就强大 ...
- WebGL入门教程(二)-webgl绘制三角形
前面已经介绍过了webgl,WebGL入门教程(一)-初识webgl(http://www.cnblogs.com/bsman/p/6128447.html),也知道了如何绘制一个点,接下来就用web ...
- ArcGIS JS 3.x使用webgl绘制热力图
ArcGIS Js Api 3.x 热力图在数据量达到三万左右的时候,绘制速度不尽人意,数据量再大些,缩放时候就会很卡,非常影响客户体验. 参考了一下网上webgl热力图,能达到更流畅 ...
- WebGL 绘制和变换
1.使用缓冲区对象向顶点着色器传入多个顶点的数据,需要遵循以下五个步骤: 1.1 创建缓冲区对象(gl.createBuffer()). 1.2 绑定缓冲区对象(gl.bindBuffer()). 1 ...
随机推荐
- 基于MHA的MYSQL高可用方案
一.MHA 简介 MHA (Master High Availability )目前在 MySQL 高可用方面是一个相对成熟的解决方案,它由日本 DeNA 公司的 youshimaton 员工(现就职 ...
- 一类Log-Gamma积分的一般形式
\[\Large\int_{0}^{z}x^{t}\ln\Gamma \left ( 1+x \right )\mathrm{d}x~,~z>0\, ,\, t\in N^{*}\] \(\La ...
- 【PAT甲级】1045 Favorite Color Stripe (30 分)（DP）
题意: 输入一个正整数N(<=200),代表颜色总数,接下来输入一个正整数M(<=200),代表喜爱的颜色数量,接着输入M个正整数表示喜爱颜色的编号(同一颜色不会出现两次),接下来输入一个 ...
- bootstrap标记说明
<span class="caret"> 这就是 一个倒三角
- row_number over ()排序函数
语法: row_number () over (排序规则) 计算每一行数据在结果集的行数 select ROW_NUMBER() over (order by FSalary) as 排序 ,* ...
- Shell函数！
1.作用:将命令序列按格式写在一起,可方便重复使用命令序列2.Shell 函数定义格式:[ function ] 函数名(){命令序列[ return x ]}3.调用函数的方法:函数名 [ 参数 1 ...
- [排错] SpringBoot 警告 Could not find acceptable representation
环境 Java 1.8 SpringBoot 2.1.9 Java 接口代码 @ResponseBody @RequestMapping(value = "cloud", meth ...
- [ DLPytorch ] 循环神经网络进阶&拟合问题&梯度消失与爆炸
循环神经网络进阶 BPTT 反向传播过程中,训练模型通常需要模型参数的梯度. \[ \frac{\partial L}{\partial \boldsymbol{W}_{qh}} = \sum_{t= ...
- ES Search API
Search API 搜索请求 SearchRequest用于与搜索文档.聚合.suggestions相关的任何操作,还提供了在结果文档上请求高亮的方法. 在最基本的表单中,我们可以向请求添加查询: ...
- C++中的内联函数
(1)定义.函数声明和定义时,在返回值类型前加inline关键字. (2)作用.避免调用时的额外开销. (3)使用情况.函数体很小,且频繁调用. (4)本质.通过牺牲代码段空间,来提高程序运行的时间效 ...