webgl
58 WebGL在平面绘制透视纹理效果
webgl 点击数： 3184问题原因我公司里有一个项目，需要能够一个矩形的四个顶点能够随意移动，而且上面还绘制的纹理。然后，我按照以前的方式书写，问题来了，由于一个矩形是由两个三角形组成的，然后就出
查看详情
57 WebGL纹理贴图报错texture bound to texture unit 0 is not renderable.
webgl 点击数： 1521简介问题在本人刚学纹理渲染的时候，发现控制台经常提示这样的错误：WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incomp
查看详情
56 WebGL处理响应上下文丢失
webgl 点击数： 1070WebGL使用了计算机的图形硬件，而这部分资源是被操作系统管理，由包括浏览器在内的多个应用程序共享。在某些特殊情况下，入另一个程序接管了图形硬件，或者操作系统进入休眠，浏览器
查看详情
55 WebGL加载三维模型
webgl 点击数： 3655迄今为止，示例程序都是在代码中显式定位三维模型的顶点坐标，并保存在Float32Array类型的数组中。然而，大部分三维程序都是从模型文件中读取三维模型的顶点坐标和颜色数据，而模
查看详情
54 WebGL实现阴影效果
webgl 点击数： 1206实现阴影的基本思想是：太阳看不见阴影。如果在光源处放置以为观察者，其视线方向与光线一致，那么观察者也看不到阴影。他看到的每一处都在光的照射下，而那些背后的，他没有看到的
查看详情
53 WebGL将渲染图形贴到另一个物体上面
webgl 点击数： 1461WebGL的另一项强大的技术，使用WebGL渲染三维图形，然后将渲染结果作为纹理贴到另一个三维物体上去。实际上，把渲染结果作为纹理使用，就是动态地生成图像，而不是向服务器请求加载
查看详情
52 WebGL不使用任何方法绘制矩形
webgl 点击数： 538由于上一个项目需要使用多个程序对象，而突然发现自己使用了好长时间的教程内置的方法，缺没有独立的写过相关的方法。故今天自己手动写了一个最原生的矩形。也发现了很多自己
查看详情
51 WebGL切换着色器
webgl 点击数： 1442到目前为止，以前的程序都是用了一个着色器（顶点着色器和片元着色器），如果一个着色器就能绘制出场景中所有的物体，那就没有问题。然而事实是，对不同物体经常需要使用不同的着色器来
查看详情
50 WebGL透明与不透明物体共存
webgl 点击数： 702上一章里面说过，如果我们是绘制的立方体图形，在里面加入了相关的代码，不会起作用。而且还是普通的立方体效果。如果我们把： [javascript] view plain copy gl.enable(gl.DE
查看详情
49 WebGL绘制透明的图形
webgl 点击数： 774颜色中的 α 分量，（即RGBA中的A，alpha）控制着颜色的透明度。如果一个物体的颜色的α分量值为0.5，该物体为半透明，透过它可以看到该物体背后的其他物体。如果物体颜色的
查看详情
48 WebGL绘制圆形的点
webgl 点击数： 632为了绘制一个圆点，我们需要将原先的方点“削”成圆形的。在以前的时候说过，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元
查看详情
47 WebGL雾化（大气效果）
webgl 点击数： 1321在三维图形学中，术语雾化（fog）用来描述远处的物体看上去较为模糊的现象。在现实中，任何介质中的物体都可能表现出雾化现象，比如水下的物体。如何实现雾化：实现雾化的方式有很多种
查看详情
46 WebGL网页上显示三维物体
webgl 点击数： 1727想要把三维物体显示到网页上面，很简单，只要会css，懂得盒子模型，定位，就可以在网页上面随意放置模型，控制canvas位置就可以。这次的案例直接body添加了一个背景，然后看到的效果就是
查看详情
45 WebGL在页面上添加hud显示
webgl 点击数： 1468平视显示器（head up display）简称HUD，最早用于飞机驾驶。平视显示器将一些重要信息投射到飞机驾驶舱前方的一块玻璃上，飞行员能够将外界的影像和这些重要的信息融合在一起，而不
查看详情
44 WebGL通过点击获取到点击面的下标
webgl 点击数： 624这是教程里面的一个案例，里面就是交给我们如何通过点击实现获取到哪个面。里面有趣的是有一个判断。这里与上一节的案例代码区别不大，别的不再讲解。我们直接从mousedown事件
查看详情
43 WebGL绘制一个自动旋转的立方体盒子，点击获取点击位置颜色
webgl 点击数： 667在本案例中，注册了一个点击事件，获取点击位置的颜色的方法gl.readPixels() 指定上面的错误，找到错误了，上图说xy是针对于左上角，经过测试和观看代码发现，其实方法是针对的左下角，
查看详情
42 WebGL的插件Matrix插件的相关方法
webgl 点击数： 317Matrix4是由<<WebGL编程指南>>作者写的提供WebGL的4*4矩阵操作的方法库，简化我们编写的代码。下面罗列了Matrix4库的所有方法： [javascript] view plain copy 1.setIdent
查看详情
40 WebGL着色器和着色器程序对象：initShader()函数的内部流程
webgl 点击数： 321initShaders()函数将调用createProgram()函数，后者负责创建一个连接好的程序对象。 createProgram()函数则又会调用loadShader()函数，后者负责创建一个编译好的着色器对象。
查看详情
39 WebGL着色器和着色器程序对象：initShader()函数的作用
webgl 点击数： 494这一节，我们研究一下以前一直使用的辅助函数initShader()。之前教程当中故意把这个函数中留到最后讲解，是为了确保学习initShaders()函数中的复杂细节时，对WebGL已经有了比较
查看详情
38 WebGL针对单独的顶点坐标绘制组成模型
webgl 点击数： 610这一节和上一节绘制的模型是一模一样的效果，就是区别是这一节，对每个模型都定义了单独的一组顶点数据，并存储在了一个单独的缓存区中。通常，一个部件的顶点数据包括坐标、法向
查看详情
37 WebGL多个模型组成一个复杂的模型
webgl 点击数： 1435相对于上一节的代码，着色器部分一点都没有修改。在keydown()事件中，增加了新增部件的旋转角度变量，并相应的增加了鼠标控制的事件。在draw()函数内，将额外增加的结构也相应的绘
查看详情
36 WebGL两个简单模型组合成一个具有交互效果的模型
webgl 点击数： 686左右键，整个沿y轴旋转，上下键，沿joint1进行z轴旋转 首先需要说一下需求，通过需求进行代码的书写。需要绘制两个立柱，然后两个立柱是连接在一起的具有，模仿两节胳膊，运行程序，用户可
查看详情
35 WebGL物体的点光源的效果（逐片元处理光源光照效果）
webgl 点击数： 432对比两个案例，就会发现逐片元由于内插的效果，过渡的时候，会更加的柔和。与上节相比也只是顶点着色器和片元着色器进行了修改，将处理代码通过varying变量传值到了片元着色器处理
查看详情
34 WebGL物体的点光源的效果（逐顶点处理光源光照效果）
webgl 点击数： 548和上面一节的代码最大的变化发生在顶点着色器中。首先使用模型矩阵变化顶点坐标，获得顶点在世界坐标系中的坐标（即变换后的坐标），以便计算点光源光在顶点处的方向。点光源向四
查看详情
33 WebGL运动中的物体的光照效果（逆转置矩阵）
webgl 点击数： 654很多场景中，物体有可能会动，观察者的视角也很有可能会改变，我们必须考虑这种情况。首先，我们先看一下物体变动时，法向量的情况：~平移变换不会改变法向量，因为平移不会改变物体的方
查看详情
32 WebGL环境光下的漫反射光的计算
webgl 点击数： 355现实生活中，我们看物体不单单有平行光（太阳光）和点光源的照射，还有环境光。所以，背面的颜色也不会达到和上一节一样黑的程度，也会有一定的变亮的效果，所以，这一节我们将环境光的漫
查看详情
31 WebGL平行光下的漫反射光的计算
webgl 点击数： 438通过上一节的介绍，我们可以知道，平行光下的漫反射光的颜色可以由一下式子得出：<漫反射光颜色>=<入射光颜色>x<表面基底色>x cos θ所以，我们要计算出来漫反射的光的颜色需
查看详情
30 WebGL光照的概念
webgl 点击数： 423光照原理：现实世界中的物体呗光纤照射时，会反射一部分光。只有当反射光纤进入你的眼睛时，你才能够看到物体并辨认出它的颜色。比如，白色的盒子会反射白光，当白光进入你的眼睛时，
查看详情
29 WebGL绘制立方体并为立方体每个表面指定颜色
webgl 点击数： 754顶点着色器进行的是逐顶点的计算，接收的是逐顶点的信息。如果我们要指定表面的颜色，需要将颜色定义给顶点。比如，我们要定义一个三角形为一种颜色，必须三个顶点的颜色都为一种
查看详情
28 WebGL绘制立方体
webgl 点击数： 1073到现在为止，一直学的都是绘制一些简单的三角形。下面，我们将学习如何绘制如图所示的一个立方体，目标：如果按以前所学的知识，制作这个正方体就需要使用三角形两个拼一个矩形，最后
查看详情
27 WebGL的正确处理对象的前后关系
webgl 点击数： 501正常的话，前面的图形挡住后面的图形，这是正常的人眼看到的效果，但是图形绘制出来，不会考虑这些前后关系什么的，只是会按照绘制的前后拜访而已。如果我们将前面案例的三角形最后
查看详情
26 WebGL的透视投影矩阵
webgl 点击数： 522上一章讲的盒状投影矩阵，主要用于精度需求度高的工业。而这一节的透视投影矩阵，更符合我们正常人的视觉，也是就近大远小的感觉。我们需要实现的效果就是同样大小的图形，距离视
查看详情
25 WebGL的盒状可视投影
webgl 点击数： 582通过鼠标的上下左右键修改near和far的值： 在上一节的案例中，会发现在移动中的时候，会发现有时候再某些位置三角形的角会消失。原因就是我们没有指定可视范围，即实际观察得到的区
查看详情
24 WebGL从指定视点观察旋转后的三角形
webgl 点击数： 424键盘上下左右键修改观察者视角： 举个例子，默认情况下视点在原点，实现沿着Z轴负方向进行观察。假如我们将视点移动到(0,0,1)，如图所示。这时，视点与被观察的三角形的距离增加了1.0
查看详情
23 WebGL的视点和视线
webgl 点击数： 650强烈建议大家再往后看的时候，把本人更新的GLSL ES语言相关的内容先查看一遍，然后再继续本内容及以后内容的学习。这一节往后，我们就开始接触3d相关的信息了，所以，今天，先接触一下
查看详情
22 WebGL使用多幅纹理
webgl 点击数： 1137这次案例选用了两张不同格式的图片，一张jpg和一张gif格式的，这节的案例和20节的案例相比区别在三个地方： （1）第一部分在片元着色器里能访问两个纹理。由于20节的案例只使用一个
查看详情
21 WebGL进一步理解纹理映射
webgl 点击数： 811为了更好的对纹理相关的内容的理解，我们修改上一节的案例进行更加深入的了解。接下来，我们将76行的纹理坐标进行了修改： [javascript] view plain copy var verticesSizes
查看详情
20 WebGL使用纹理贴图
webgl 点击数： 1811WebGL中纹理的限制WebGL中的纹理需要注意一点，所使用的图片数据的大小必须是2的阶乘，横竖的像素长度大小必须是32x32，128x128等2的阶乘的形式。 当然，做一些处理的话，不是2的阶
查看详情
19 WebGL几何图形的装配和光栅化
webgl 点击数： 580图形装配的任务：将孤立的顶点坐标装配成几何图形。几何图形的类别由gl.drwaArrays()函数的第一个参数决定的。光栅化过程的任务：将装配好的几何图片转化为片元。gl_Position
查看详情
18 WebGL使用varying变量从顶点着色器向片元着色器传值
webgl 点击数： 469这一篇主要介绍的就是varying变量的使用，由于将颜色信息传入片元着色器的uniform变量是固定的，不变的。所以，我们准备了一种新的变量varying可变的，实际上，varying变量的作用是
查看详情
17 WebGL在缓冲区中存入顶点的多个类型数据
webgl 点击数： 511看一下代码思路：在声明顶点着色器的时候，声明了两个attribute变量，一个代表顶点位置，一个代表顶点大小。然后再看initVertexBuffers()函数里面：（1）首先声明了一个Float32Array类型
查看详情
16 使用requestAnimationFrame()方法制作WebGL简单动画
webgl 点击数： 756制作简单动画首先需要就是将只需要指定一次值得变量设置方法都在main()方法里面完成，上面的js代码可以分为两部分来看：第一部分：48行到89行的main()方法，里面获取了WebGL的上下
查看详情
15 使用矩阵变换库进行图形变换
webgl 点击数： 545今天我更新一个一个比较简单的方法设置矩阵，就是使用教程里面封装好的矩阵库，就可以很简单的实现矩阵转换了。这一节的内容与上一节不同之处就是，我们自己不用Float32Array方
查看详情
14 WebGL 使用矩阵实现图形 旋转+平移并解释一下缩放
webgl 点击数： 1238具体操作，wasd键控制缩放，上下左右键控制图形的位置，图形自动旋转。 简单的变换，我们可以用数学表达式实现。但是，情形复杂的情况下，数学表达式就不是一种很好的选择了，好在我们可
查看详情
13 WebGL移动、旋转和缩放的 旋转和缩放
webgl 点击数： 851相对于平移来说，WebGL的选择就复杂一些，能够旋转，首先你要指明：1.旋转轴：你要指明通过哪个轴进行旋转2.旋转方向：逆时针还是顺时针旋转3.旋转的角度如下图这种，逆时针选择通过z轴
查看详情
12 WebGL移动、旋转和缩放中的平移
webgl 点击数： 1050平移在在WebGL的变换当中，应该算是最简答的操作的了。如果你对css3了解的话，这个就相当于transform里面的translate的一个道理。上面的代码根据11节就增加了几行代码，就实现了
查看详情
11 WebGL绘制基本图形
webgl 点击数： 771与上一节绘制点的代码相比，我们只修改了两个地方，就实现了图形绘制：1.将顶点着色器里面的给点的大小赋值的那一行gl_PointSize = 删除掉，因为只有在绘制单个点的时候这一行才起
查看详情
10 WebGL的缓冲区对象使用
webgl 点击数： 828前面的方法只能绘制一个点，而不能绘制多个顶点组成的图形，比如三角形、矩形和立方体，像那些方法我们需要一次性的将图形的顶点全部传入顶点着色器，然后才能把图形画出来。WebGL
查看详情
09 WebGL通过uniform变量修改点的颜色
webgl 点击数： 1096上一节通过点击绘制点，这一节接着上一节来修改颜色，到这一节关于点的就写完了。uniform 变量用来从javascript程序向顶点着色器和片元着色器传输“一致的”（不变的）
查看详情
07 WebGL使用attribute变量
webgl 点击数： 614我们将位置信息从javascript程序中传给顶点着色器。有两种方式可以做到这点：attribute变量和uniform变量attribute变量传输的是与顶点相关的数据uniform变量传输的是对于所
查看详情
06 WebGL的坐标系统
webgl 点击数： 936由于WebGL处理的是三维图形，所以它使用的是三维坐标系统（笛卡尔坐标系），具有x轴、y轴、z轴。三维坐标系统很容易理解，因为我们的世界也是三维的：具有宽度、高度和长度。在坐标系
查看详情
05 WebGL初始化着色器
webgl 点击数： 917初始化着色器函数initShaders()被定义在了cuon.util.js中使用：initShaders(gl, vshader, fshader);参数：gl 指定渲染的上下文vshader 指定顶点着色器程序代码(字符串)fshad
查看详情
04 WebGL绘图之着色器
webgl 点击数： 1371WebGL不同于canvas 2D的绘图方式，WebGL需要去调用OpenGL的接口的着色器去绘图。所以，我们需要学习WebGL的着色器进行绘图。WebGL的着色器分为两种：1.顶点着色器（Vertex shader）：
查看详情
03 WebGL定义好的库的引用
webgl 点击数： 12481.引入了为WebGL准备的三个函数库。2.使用了一个获取WebGL上下文的兼容性的方法getWebGLContextgetWebGLContext(element[,debug]); 用来获取WebGL绘图的上下文。参数：1.ele
查看详情
02 WebGL的引入及超简单使用
webgl 点击数： 16981.clearColor(red,green,blue,alpha);指定绘图区域的背景色这个方法就相当于css设置rgba一样，区别就是 rgba的值是0到255，而clearColor是0.0 到 1.0 必须是浮点数，就是必须要
查看详情
联系我们
一个人的力量不如两个人的，两个人的力量不如一群人的。欢迎加入大家庭一起共同学习，共同进步。