热门 最新 精选 话题 上榜
去。如果你连东西都做不出来,时...
原创 10月前
885阅读
案例查看地址:点击这里迄今为止,示例程序都是在代码中显式定位三维模型的顶点坐标,并保存在Float32Array类型的数组中。然而,大部分三维程序都是从ces,从文件中读取模型的顶点...
原创 10月前
767阅读
55 WebGL加载三维模型
案例查看地址:点击这里实现阴影的基本思想是:太阳看不见阴影。如果在光源处放置以为观察者,其视线方向与光线一致,那么观察者也看不到阴影。他看到
案例查看地址:点击这里WebGL的另一项强大的技术,使用WebGL渲染三维图形,然后将渲染结果作为纹理贴到另一个三
案例查看地址:点击这里颜色中的 α 分量,(即RGBA中的A,alpha)控制着颜色的透明度。如果一个物体的
原创 10月前
180阅读
49 WebGL绘制透明的图形
案例查看地址:点击这里举个例子,默认情况下视点在原点,实现沿着Z轴负方向进行观察。假如我们将视点移动到(0,0,1),如图所示。这时,视
GLSL ES新引入了精度限定字,目的是帮助着色器程序提高运行效率,消减内存开支。顾名思义,精度限定字用来表示每
就像JavaScript和C语言,GLSL ES中也有全局变量和局部变量的概念。全局变量可以在程序中的任意位置使用,而局部
案例查看地址:点击这里为了绘制一个圆点,我们需要将原先的方点“削”成圆形的。在以前的时候说过,顶点着色器和片元着色器之间发生了光栅化过程,一个顶点被光栅化为了多个片元,每一个片元都会经 中...
原创 10月前
214阅读
48 WebGL绘制圆形的点
案例查看地址:点击这里上一章里面说过,如果我们是绘制的立方体图形,在里面加入了相关的代码,不会起作用。而且还是普通的立方体效果。如果我们把:gl.enable(gl.DEPTH_TEST);这一 销掉,就
案例查看地址:点击这里在三维图形学中,术语雾化(fog)用来描述远处的物体看上去较为模糊的现象。在现实中,任何介质中的物体都可能表现出雾化现象,比如水下的物体。如
原创 10月前
160阅读
47 WebGL雾化(大气效果)
案例查看地址:点击这里平视显示器(head up display)简称HUD,最早用于飞机驾驶。平视显示器将一些重要信息投射到飞机驾驶舱前方的一块玻璃上,飞行员能够将外界的影像和这
原创 10月前
48阅读
45 WebGL在页面上添加hud显示
案例查看地址:点击这里想要把三维物体显示到网页上面,很简单,只要会css,懂得盒子模型,定位,就可以在网页上面随意放置模型,控制canvas位置就可以。这次的案例直接body添加了一个
案例查看地址:点击这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=n
原创 10月前
38阅读
43 WebGL绘制一个自动旋转的立方体盒子,点击获取点击位置颜色
案例查看地址:点击这里 <!DOCTYPE html><
写在本系列前面由于我也是半道出家,首先学的前端开发,对3d开发很感兴趣,刚好又感一本书也算是真正的入门计算机图形学的中层了。做...
原创 10月前
85阅读
案例查看地址:点击这里上一章讲的盒状投影矩阵,主要用于精度需求度高的工业。而这一节的透视投影矩阵,更符合我们正常人的视觉,也是就近大远小 剪面和远裁剪面,这样可视空间内的物体才会被现实,...
原创 10月前
206阅读
26 WebGL的透视投影矩阵
案例查看地址:点击这里通过上一节的介绍,我们可以知道,平行光下的漫反射光的颜色可以由一下式子得出:<漫反射光颜色>=<入射光颜色>x< 面基底色>x cos θ所以,我们
案例查看地址:点击这里正常的话,前面的图形挡住后面的图形,这是正常的人眼看到的效果,但是图形绘制出来,不会考虑这些前后关系 需要通过gl.enable()方法开启相关的功能。通过这个方法:(...
案例查看地址:点击这里在上一节的案例中,会发现在移动中的时候,会发现有时候再某些位置三角形的角会消失。原因就是我们没有指定可视范围,即实际观察得到的区域边界。We
案例查看地址:点击这里强烈建议大家再往后看的时候,把本人更新的GLSL ES语言相关的内容先查看一遍,然后再继续本内容及以后内容的学习。这一节往后,我们就开始接触3d相关的信息
未来都是未知的,虽然我们无法确定未来的科技会发展成什么样,人们的生活会发生什么样的..
原创 10月前
165阅读
我看好WebGL
原创 10月前
277阅读
上一节通过点击绘制点,这一节接着上一节来修改颜色,到这一节关于点的就写完了。案例查看地址:点击这里<!doctype htm
案例查看地址:点击这里<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport" cale=1.0
警告 * Copyright 2010, Google Inc. * All rights re...
案例查看地址:点击这里<!doctype html><html><head> <meta charset="UTF-8"> <meta name="viewport"
案例查看地址:点击这里<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial
既然是进阶,我们
一、我们讲什么?我们讲两个东西:WebGL背后的工作原理是什么?以Three.js为例,讲述框架在背后扮演什么样的角色?二、我们为什么要了解原理?我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:很多东西还是做不出来,甚至没有任何思路;碰到bug无法解决,甚至没有方向;性能出现问题,完全不知道如何去优化。这个时候,我们需要了解更多。三、