转

用webgl绘制一个彩色旋转立方体

转载自：https://blog.csdn.net/qq_37338983/article/details/74502649今天给大家分享一个用webgl写的简单的三维场景：转动的交互式彩色立方体，其六个面的颜色都不一样。 上次绘制二维彩色矩形时讲到，二维是三维场景的特殊情况，所以由二维向三维拓展也并不难，webgl里面提供了画三角形的方法，立方体有6个面，一个面由两个三角形组成，共计需要12个三

转

WebGL画一个彩色矩形

转载自：https://blog.csdn.net/qq_37338983/article/details/73742119 今天和大家分享一个用WebGL画矩形(rectangle)的小Demo,也可用来绘制三角形(triangle)。本文适用于初学者掌握WebGL的基本绘图知识，WebGL是OpenGL的Web版本，所以它的绘图过程与OpenGL是一样的，这里不赘述，大家自行百度

转

第六节 WebGL画球算法

转载自：https://blog.csdn.net/qq_37338983/article/details/78643772很多学习WebGL的小伙伴，刚开始一直都是学怎么画立方体，等到立方体画的炉火纯青的时候，却被另一个东西难住了，那就是球。what,还会被一个球难住？。下面就给大家介绍一种画球的算法：我们的地球现在被划分为很多经线和纬线，如下图所示：由下面的图，我们来推导一下计算球面上点的坐标

转

第五节 WebGL绘制、鼠标与键盘交互实例

前几篇一直在讲一些基础性的内容，之前的介绍一直都是理论上的解释，理论总要与实际相结合，才能有所收获，知识也才能得到有效的应用。下面，就从一个实例开始讲解，这个实例绘制了一个彩色立方体，且实现了键盘与鼠标的交互，shift+鼠标左键或中建是旋转立方体，shift+鼠标右键是平移立方体，shift+鼠标滚轮缩放立方体，其效果图如下：接下来就详细地附上程序和注释。1 HTML文档其中，MV.js与cuo

转

第四节 WebGL中的图形变换：旋转、平移和缩放

在WebGL中，如果我们想实现更高级的动态场景，或者是对物体进行坐标变换，那么旋转、平移和缩放必不可少。这些变换所涉及的是一些矩阵运算，先从二维平面讲起，再推导至三维空间。下面分别对这几种变换进行一个讲解：1 旋转变换试想一下，如果当一个场景只是静态的，没有动画，那将是多么令人乏味的画面，而旋转变换的加入将会使场景的动画效果更具观赏性。如下图所示，表示点(x, y)绕原点旋转一定角度后到达新的位置

转

第三节 WebGL中使用gl.drawArrays()和gl.drawElements()绘制图形

我们可能都知道，很多三维模型构成的基本单位都是三角形（三角面片），例如.stl和.obj这两种应用广泛的三维模型文件格式。再复杂的模型都可以由三角面片来组成，由此可见三角形在图形学中的重要地位。而且WebGL里面除了支持点（gl.POINTS）、线（gl.LINES、gl.LINE_STRIP和gl.LINE_LOOP），就是三角形(gl.TRIANGLES、gl.TRIANGLE_STRIP、g

转

第二节 WebGL中着色器语言(GLSL ES)的简介

转载自：https://blog.csdn.net/qq_37338983/article/details/785560631.着色器简介着色器语言(GLSL ES)由OpenGL的着色器语言GLSL简化而来， 主要是为了适应目前的移动端手持设备，例如智能手机和平板电脑，由于这些手持设备受限于硬件条件，其性能远不如电脑。这意味着对这些手持设备硬件的利用和开销就要恰到好处，故由此催生了GLSL ES

转

第一节 关于WebGL的一些基础性介绍

1.什么是WebGL百度百科给出的解释是：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，而且不需要任何插件就可以在浏览器端运行。以上定义总结为三点： (1)

转

WebGL入门教程(一)-初识webgl

一、WebGL和传统网页的区别：普通网页组成成分：HTML、JavaScript；WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES)；二、WebGL采用H5中的<canvas>元素来定义绘图区域，然后通过JavaScript内嵌GLSL ES在canvas中绘制三维图形。canvas可以同时支持二维图形和三维图形，它不直接提供绘图