- 浏览: 40197 次
- 性别:
- 来自: 北京
最新评论
首先,我们有个名词:“渲染器”
渲染器是这样一些代码,在一个场景开始绘制之前,它能对场景的任何部分做任何处理。这的确十分有用,由于它运行在图形卡上,所以它能很快运行且能很便利地做各种变换。
渲染器运行在图形卡上获得WebGL系统,它把模型视图矩阵和投影矩阵应用到场景中,而不需要使用相对较慢的JavaScript来移动场景中的每一个点和每一个三角形顶点。这相当有用并且值得额外的开销。
下面我们来看一个简单的例子:
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");//获取片段渲染器
var vertexShader = getShader(gl, "shader-vs");//获取顶点渲染器
shaderProgram = gl.createProgram();//创建渲染器对象
gl.attachShader(shaderProgram, vertexShader);//绑定顶点渲染器
gl.attachShader(shaderProgram, fragmentShader);//绑定片段渲染器
gl.linkProgram(shaderProgram);//和webGL关联shaderProgram
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);//告诉webGLass使用shaderProgram
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");//获取属性vertexPositionAttribute
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);//使能
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");//获取属性pMatrixUniform
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");//获取属性pMatrixUniform
}
至此,初始化渲染器完成。其中有个自定义函数,需要特别解释:
/**
*这是一个比看起来要简单的函数。我们要做的是在HTML网页中寻找一个元素,其具有与传入参数匹配的ID,取出其内容并基于其类型创建一个片段渲染器或者一个顶点渲染器(以后我们将更多地解释它们的区别),接着将其传入到WebGL中编译成可以在图形卡上运行的形式。接下来,代码进行出错处理,最后完成整个处理。当然,我们只能在JavaScript中将渲染器定义为字符串而不能从HTML中提取——通过这样做,我们使其更易读,因为它们被定义为网页中的脚本,就像它们本身就是JavaScript一样.
事实上,他动态的创建了渲染器语言编写的代码,推送给图形显卡执行,它们使
用一种特殊的与C语言有很大关系的渲染器语言所写。
*/
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
alert(str);
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
至此,创建渲染器对象完成,(实际上他实在拼接渲染器代码之后,和webGL绑定的)。
最后,贴上完整的JS代码,如果不出意外(当然HTML自己写)页面上就能看见三角形和正方形了(合适的浏览器):
<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script type="text/javascript" charset="UTF-8">
var gl;
var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
var shaderProgram;//渲染器对象
var mvMatrix = mat4.create();//模型矩阵
/**
mat4.create=function(a){
var b=new glMatrixArrayType(16);
if(a)
{
b[0]=a[0];
b[1]=a[1];
b[2]=a[2];
b[3]=a[3];
b[4]=a[4];
b[5]=a[5];
b[6]=a[6];
b[7]=a[7];
b[8]=a[8];
b[9]=a[9];
b[10]=a[10];
b[11]=a[11];
b[12]=a[12];
b[13]=a[13];
b[14]=a[14];
b[15]=a[15]
}
return b
};*/
var pMatrix = mat4.create();//投影矩阵
function initGL(canvas) {
try {
canvas.width=screen.width;
canvas.height=screen.height;
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
/**
*这是一个比看起来要简单的函数。我们要做的是在HTML网页中寻找一个元素,其具有与传入参数匹配的ID,取出其内容并基于其类型创建一个片段渲染器或者一个顶点渲染器(以后我们将更多地解释它们的区别),接着将其传入到WebGL中编译成可以在图形卡上运行的形式。接下来,代码进行出错处理,最后完成整个处理。当然,我们只能在JavaScript中将渲染器定义为字符串而不能从HTML中提取——通过这样做,我们使其更易读,因为它们被定义为网页中的脚本,就像它们本身就是JavaScript一样.
事实上,他动态的创建了渲染器语言编写的代码,推送给图形显卡执行,它们使
用一种特殊的与C语言有很大关系的渲染器语言所写。
*/
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
alert(str);
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");//获取片段渲染器
var vertexShader = getShader(gl, "shader-vs");//获取顶点渲染器
shaderProgram = gl.createProgram();//创建渲染器对象
gl.attachShader(shaderProgram, vertexShader);//绑定顶点渲染器
gl.attachShader(shaderProgram, fragmentShader);//绑定片段渲染器
gl.linkProgram(shaderProgram);//和webGL关联shaderProgram
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);//告诉webGLass使用shaderProgram
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");//获取属性vertexPositionAttribute
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);//使能
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");//获取属性pMatrixUniform
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");//获取属性pMatrixUniform
}
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);//将渲染器和投影矩阵绑定
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);//将渲染器和模型矩阵绑定
}
/**
*初始化图形缓存区 缓冲区实际上是图形卡上的内存
*/
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();//创建三角形顶点数组
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);//绑定数值
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];//定义三角形
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);//vertices填充缓存区
triangleVertexPositionBuffer.itemSize = 3;//缓存区的列
triangleVertexPositionBuffer.numItems = 3;//缓存区的行 三个独立的顶点位置(numItems),其中每一个由三个数(itemSize)组成
squareVertexPositionBuffer = gl.createBuffer();//正方形
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}
//将两个对象的顶点位置放置到图形卡上————————绘制图形
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);//告诉 WebGL画布的大小
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);//清除画布
//mat4.perspective=function(a,b,c,d,e){a=c*Math.tan(a*Math.PI/360);b=a*b;return mat4.frustum(-b,b,-a,a,c,d,e)};
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);//为场景设置透视参数
//mat3.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=1;a[5]=0;a[6]=0;a[7]=0;a[8]=1;return a};
mat4.identity(mvMatrix);//
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);//变换
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();//把矩阵参数传到图形卡,这个函数将模型视图矩阵和投影矩阵从JavaScript中转移到WebGL中,并与渲染器相关
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);//从顶点数组的第0项开始一直到第numItems个元素,将顶点数组绘制成三角形
//alert("triangle Finish!");
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
希望您有所收获,也希望我有所进步!
夜深了,当所有离你远去的时候,你选择了编程,无所谓成功或者成就,只为真实的向梦想靠近,孤独并快乐着!晚上下班时,看见地铁站两个年轻人,忘情地抱着吉他,唱着歌,他们贫穷却快乐着!有时候人生或许就是这样,坚强地活着,并快乐!我没有能力给他们钱,但我却有跟唱歌者同样的心情,或是爱,或是情,那些远去的,那些我们真正在乎的东西!
渲染器是这样一些代码,在一个场景开始绘制之前,它能对场景的任何部分做任何处理。这的确十分有用,由于它运行在图形卡上,所以它能很快运行且能很便利地做各种变换。
渲染器运行在图形卡上获得WebGL系统,它把模型视图矩阵和投影矩阵应用到场景中,而不需要使用相对较慢的JavaScript来移动场景中的每一个点和每一个三角形顶点。这相当有用并且值得额外的开销。
下面我们来看一个简单的例子:
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");//获取片段渲染器
var vertexShader = getShader(gl, "shader-vs");//获取顶点渲染器
shaderProgram = gl.createProgram();//创建渲染器对象
gl.attachShader(shaderProgram, vertexShader);//绑定顶点渲染器
gl.attachShader(shaderProgram, fragmentShader);//绑定片段渲染器
gl.linkProgram(shaderProgram);//和webGL关联shaderProgram
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);//告诉webGLass使用shaderProgram
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");//获取属性vertexPositionAttribute
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);//使能
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");//获取属性pMatrixUniform
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");//获取属性pMatrixUniform
}
至此,初始化渲染器完成。其中有个自定义函数,需要特别解释:
/**
*这是一个比看起来要简单的函数。我们要做的是在HTML网页中寻找一个元素,其具有与传入参数匹配的ID,取出其内容并基于其类型创建一个片段渲染器或者一个顶点渲染器(以后我们将更多地解释它们的区别),接着将其传入到WebGL中编译成可以在图形卡上运行的形式。接下来,代码进行出错处理,最后完成整个处理。当然,我们只能在JavaScript中将渲染器定义为字符串而不能从HTML中提取——通过这样做,我们使其更易读,因为它们被定义为网页中的脚本,就像它们本身就是JavaScript一样.
事实上,他动态的创建了渲染器语言编写的代码,推送给图形显卡执行,它们使
用一种特殊的与C语言有很大关系的渲染器语言所写。
*/
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
alert(str);
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
至此,创建渲染器对象完成,(实际上他实在拼接渲染器代码之后,和webGL绑定的)。
最后,贴上完整的JS代码,如果不出意外(当然HTML自己写)页面上就能看见三角形和正方形了(合适的浏览器):
<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>
<script type="text/javascript" charset="UTF-8">
var gl;
var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;
var shaderProgram;//渲染器对象
var mvMatrix = mat4.create();//模型矩阵
/**
mat4.create=function(a){
var b=new glMatrixArrayType(16);
if(a)
{
b[0]=a[0];
b[1]=a[1];
b[2]=a[2];
b[3]=a[3];
b[4]=a[4];
b[5]=a[5];
b[6]=a[6];
b[7]=a[7];
b[8]=a[8];
b[9]=a[9];
b[10]=a[10];
b[11]=a[11];
b[12]=a[12];
b[13]=a[13];
b[14]=a[14];
b[15]=a[15]
}
return b
};*/
var pMatrix = mat4.create();//投影矩阵
function initGL(canvas) {
try {
canvas.width=screen.width;
canvas.height=screen.height;
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}
/**
*这是一个比看起来要简单的函数。我们要做的是在HTML网页中寻找一个元素,其具有与传入参数匹配的ID,取出其内容并基于其类型创建一个片段渲染器或者一个顶点渲染器(以后我们将更多地解释它们的区别),接着将其传入到WebGL中编译成可以在图形卡上运行的形式。接下来,代码进行出错处理,最后完成整个处理。当然,我们只能在JavaScript中将渲染器定义为字符串而不能从HTML中提取——通过这样做,我们使其更易读,因为它们被定义为网页中的脚本,就像它们本身就是JavaScript一样.
事实上,他动态的创建了渲染器语言编写的代码,推送给图形显卡执行,它们使
用一种特殊的与C语言有很大关系的渲染器语言所写。
*/
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
alert(str);
var shader;
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function initShaders() {
var fragmentShader = getShader(gl, "shader-fs");//获取片段渲染器
var vertexShader = getShader(gl, "shader-vs");//获取顶点渲染器
shaderProgram = gl.createProgram();//创建渲染器对象
gl.attachShader(shaderProgram, vertexShader);//绑定顶点渲染器
gl.attachShader(shaderProgram, fragmentShader);//绑定片段渲染器
gl.linkProgram(shaderProgram);//和webGL关联shaderProgram
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);//告诉webGLass使用shaderProgram
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");//获取属性vertexPositionAttribute
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);//使能
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");//获取属性pMatrixUniform
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");//获取属性pMatrixUniform
}
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);//将渲染器和投影矩阵绑定
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);//将渲染器和模型矩阵绑定
}
/**
*初始化图形缓存区 缓冲区实际上是图形卡上的内存
*/
function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();//创建三角形顶点数组
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);//绑定数值
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];//定义三角形
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);//vertices填充缓存区
triangleVertexPositionBuffer.itemSize = 3;//缓存区的列
triangleVertexPositionBuffer.numItems = 3;//缓存区的行 三个独立的顶点位置(numItems),其中每一个由三个数(itemSize)组成
squareVertexPositionBuffer = gl.createBuffer();//正方形
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}
//将两个对象的顶点位置放置到图形卡上————————绘制图形
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);//告诉 WebGL画布的大小
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);//清除画布
//mat4.perspective=function(a,b,c,d,e){a=c*Math.tan(a*Math.PI/360);b=a*b;return mat4.frustum(-b,b,-a,a,c,d,e)};
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);//为场景设置透视参数
//mat3.identity=function(a){a[0]=1;a[1]=0;a[2]=0;a[3]=0;a[4]=1;a[5]=0;a[6]=0;a[7]=0;a[8]=1;return a};
mat4.identity(mvMatrix);//
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);//变换
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();//把矩阵参数传到图形卡,这个函数将模型视图矩阵和投影矩阵从JavaScript中转移到WebGL中,并与渲染器相关
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);//从顶点数组的第0项开始一直到第numItems个元素,将顶点数组绘制成三角形
//alert("triangle Finish!");
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}
function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
drawScene();
}
</script>
希望您有所收获,也希望我有所进步!
夜深了,当所有离你远去的时候,你选择了编程,无所谓成功或者成就,只为真实的向梦想靠近,孤独并快乐着!晚上下班时,看见地铁站两个年轻人,忘情地抱着吉他,唱着歌,他们贫穷却快乐着!有时候人生或许就是这样,坚强地活着,并快乐!我没有能力给他们钱,但我却有跟唱歌者同样的心情,或是爱,或是情,那些远去的,那些我们真正在乎的东西!
相关推荐
1.1 WebGL——一个技术定义 2 1.2 3D图形学——入门 4 1.2.1 3D坐标系 4 1.2.2 网格、多边形和顶点 5 1.2.3 材质、纹理和光源 5 1.2.4 变换与矩阵 6 1.2.5 相机、透视、视口和投影 6 1.2.6 着色器 7...
WebGL着色器和javascript语言、C语言一样 可以声明数组类型变量,不过WebGL着色器的数据仅仅支持一维数组,不支持多维数组。 声明语法结构 数组元素的数据类型 数组变量名[数组元素个数] // 声明一个数组变量fArr,...
交互式计算机图形学 基于WEBGL的自顶向下方法 原书第7版
基于WebGL和AJAX的WEB3D应用研究——以在线3D协作交互式设计为例.pdf
《网站设计》实验教学内容与方法改革探讨——以基于WebGL的个性化产品定制平台开发为例.pdf
WebH5视频滤镜的百搭解决方案-WebGL着色器.docx
课程分享——地图Web3D可视化-WebGL、Three.js,附源码 课程概述 - 本课程讲解如何在web上实现地图3D可视化 - 学习本课程有前端基础即可,如果了解three.js更好 适用人群 有前端基础,想基于Web实现地图数据的3D...
交互式计算机图形学——基于WEBGL的自顶向下方法 第7版,Interactive Computer Graphics:A Top-Down Approach with WebGL (7th Edition) 英文版
给大家分享一套three.js课程——企业实战WEBGL视频课程
SuperMap iClient3D for WebGL/WebGPU ——颜色(1) 完整代码
电子工业出版社教材 Edward Angel,Dave Shreiner著 张荣华、宋雨等译
###A javascript 库,用于在 WebGL 之上加速 2d 图形 (已终止的研究项目 – 2013,原型文档) 这主要侧重于在浏览器环境中生成 2d 图形,使用软件绘制视觉创意——而不是用于生产。 实际上是一个更快的 ...
【项目资源】: 包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 ... 【项目质量】: 所有源码都经过严格测试,...
分享课程——WebGL可视化3D绘图框架:Three.js 零基础上手实战,附软件+PPT+代码+文档资料下载。 本课程主要的功效就是让你学习完本教程后,能够写出在浏览器上流畅运行的3D程序,包括但不限于:大数据可视化,360...
给大家分享一套课程——Three.js可视化企业实战WEBGL课,2024年1月最新升级48章,附源码+课件等资料下载,课程不定期更新,包更新。
第 1 章介绍 Three.js 和 WebGL 的背景资料,并通过简单的例子帮助读者实现第一个Three.js 应用。 第 2 章介绍照相机的设定。 第 3、4、5 章分别介绍几何形状、材质和网格,即如何在场景中添加物体。 第 6 章介绍...
用法变换(输出,位置,矩阵) 给定一个 3 元素数组position和一个 16 元素数组matrix ,更新out数组以包含新的 2D 点——每个点的范围从 0 到例如: var mat4 = require ( 'gl-matrix' ) . mat4var camera = ...