WebGL自学教程——WebGL示例：6. 第一个三维的物体：立方体

最新推荐文章于 2022-11-11 18:08:54 发布
最新推荐文章于 2022-11-11 18:08:54 发布
阅读量6.2k 收藏 3
点赞数
分类专栏： 编程：Web 文章标签： buffer function shader filter 360 null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tiewen/article/details/6898702
版权
 

6. 第一个三维的物体：立方体

　

    前面几章都在讲二维的三角形，本章开始接触真正的3D物体。我们从一个简单的立方体开始。

    立方体有六个面；每个面分为两个三角形，每个三角形3个顶点；就是说，每个面需要6个顶点才能绘画出来，而一个立方体总共需要36个顶点。但是，实际上，立方体的顶点只有8个。在表达立方体的36个顶点当中，有很多是重复的。这造成了严重的内存的浪费。我们可以使用元素索引数组来改善这种情况，不过这是下一章的内容。本章暂时就直接使用24个顶点数据。为了WebGL能够分清立方体的里面和外面，我们对组成六个面的三角形使用相同的绕向：顺时针。由于总共有36个顶点要绘画，所以在调用WebGL函数drawArrays时，第三个参数要修改为36，而不是前几章中的3。

    注：在WebGL的3D坐标系中的，x轴向右为正向，y轴向上为正向，z轴垂直于屏幕、以指向观察者的方向为正向。

    我们保留前章中的贴图和按键控制旋转的功能，并扩展了按键控制：增加对上、下按键的响应处理(绕x轴旋转)，并且，上下键和左右键可同时按下、同时生效。

    我们需要改变原先的贴图方法，因为立方体的六个面到图片的映射已经不再是简单的2D坐标变换。我们当然可以使用3D纹理，但这是后面章节的内容。现在，我只是演示如何使用2D纹理，将图像贴到立方体上。在着色器中，我们无法直接判断所处理的顶点来自哪个面，那我们就告诉它，通过顶点属性；或者，我们直接通过顶点属性，指定每个顶点的纹理坐标。本章示例中，使用的是后者。具体点，就是在顶点着色器中定义的一个vec2类型的属性变量v2CubeTexST。

完整代码如下：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="glMatrix-0.9.5.js"></script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
attribute vec2 v2CubeTexST;
uniform mat4 um4Rotate;
varying vec2 v_texCoord;
void main(void)
{
    v_texCoord = vec2((v2CubeTexST.x+1.0)/2.0, 1.0-(v2CubeTexST.y+1.0)/2.0);
    gl_Position = um4Rotate * vec4(v3Position, 1.0);
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif
uniform sampler2D s_texture;
varying vec2 v_texCoord;

void main(void)
{
    gl_FragColor = texture2D(s_texture, v_texCoord);
}
</script>

<script>
function ShaderSourceFromScript(scriptID)
{
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";

    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child)
    {
        if (child.nodeType == child.TEXT_NODE ) sourceCode += child.textContent;
        child = child.nextSibling;
    }

    return sourceCode;
}

var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var cubeBuffer = null;
var v3PositionIndex = 0;
var textureObject = null;
var samplerIndex = -1;
var interval = 300;
var angle = 0;
var um4RotateIndex = -1;
var leftKeyDown = false;
var rightKeyDown = false;
var cubeTexSTBuffer = null;
var cubeTexSTIndex = 1;
var angleX = 0;
var upKeyDown = false;
var downKeyDown = false;

function LoadData()
{
    var jsCubeData = [
        //前
        0.5, 0.5, 0.5, 
        0.5, -0.5, 0.5, 
        -0.5, -0.5, 0.5, 
  
        -0.5, -0.5, 0.5, 
        -0.5, 0.5, 0.5,
        0.5, 0.5, 0.5, 
  
        //后
        0.5, 0.5, -0.5,
        -0.5, 0.5, -0.5,
        -0.5, -0.5, -0.5,
  
        -0.5, -0.5, -0.5,
        0.5, -0.5, -0.5, 
        0.5, 0.5, -0.5, 
  
        //左
        -0.5, 0.5, 0.5,
        -0.5, -0.5, 0.5, 
        -0.5, -0.5, -0.5, 
  
        -0.5, -0.5, -0.5, 
        -0.5, 0.5, -0.5,
        -0.5, 0.5, 0.5,
  
        //右
        0.5, 0.5, -0.5, 
        0.5, -0.5, -0.5, 
        0.5, -0.5, 0.5, 
  
        0.5, -0.5, 0.5, 
        0.5, 0.5, 0.5, 
        0.5, 0.5, -0.5, 
  
        //上
        0.5, 0.5, -0.5, 
        0.5, 0.5, 0.5, 
        -0.5, 0.5, 0.5,
  
        -0.5, 0.5, 0.5,
        -0.5, 0.5, -0.5,
        0.5, 0.5, -0.5, 
  
        //下
        0.5, -0.5, 0.5, 
        0.5, -0.5, -0.5, 
        -0.5, -0.5, -0.5, 
  
        -0.5, -0.5, -0.5, 
        -0.5, -0.5, 0.5, 
        0.5, -0.5, 0.5
    ];

    cubeBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsCubeData), webgl.STATIC_DRAW);


    var jsCubeTexST = [
        //前
        0.5, 0.5, 
        0.5, -0.5,
        -0.5, -0.5,
  
        -0.5, -0.5,
        -0.5, 0.5,
        0.5, 0.5,
  
        //后
        0.5, 0.5,
        -0.5, 0.5,
        -0.5, -0.5,
  
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
  
        //左
        0.5, 0.5,
        -0.5, 0.5, 
        -0.5, -0.5, 
  
        -0.5, -0.5, 
        0.5, -0.5,
        0.5, 0.5,
  
        //右
        0.5, -0.5, 
        -0.5, -0.5, 
        -0.5, 0.5, 
  
        -0.5, 0.5, 
        0.5, 0.5, 
        0.5, -0.5, 
  
        //上
        0.5, -0.5, 
        0.5, 0.5, 
        -0.5, 0.5,
  
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5, 
  
        //下
        0.5, 0.5, 
        0.5, -0.5, 
        -0.5, -0.5, 
  
        -0.5, -0.5, 
        -0.5, 0.5, 
        0.5, 0.5
    ];

    cubeTexSTBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeTexSTBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsCubeTexST), webgl.STATIC_DRAW);
 
 
    textureObject = webgl.createTexture();
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    var img = document.getElementById('myTexture');
    webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, img);
 
    return 0;
}

function RenderScene()
{
    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);

    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeBuffer);
    webgl.enableVertexAttribArray(v3PositionIndex);
    webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);

    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeTexSTBuffer);
    webgl.enableVertexAttribArray(cubeTexSTIndex);
    webgl.vertexAttribPointer(cubeTexSTIndex, 2, webgl.FLOAT, false, 0, 0);
 
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);

    webgl.activeTexture(webgl.TEXTURE0);
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    webgl.uniform1i(samplerIndex, 0);
 
    var m4Rotate = mat4.create();
    mat4.identity(m4Rotate);
    mat4.rotateZ(m4Rotate, angle*Math.PI/180);
    mat4.rotateX(m4Rotate, angleX*Math.PI/180);
    webgl.uniformMatrix4fv(um4RotateIndex, false, m4Rotate);

    webgl.drawArrays(webgl.TRIANGLES, 0, 36);
}

function RotateTriangle()
{
    if(leftKeyDown) angle += 10;
    if(rightKeyDown) angle -= 10;
    if(angle >= 360) angle -= 360;
    if(angle < 0) angle += 360;
 
    if(upKeyDown) angleX += 10;
    if(downKeyDown) angleX -= 10;
    if(angleX >= 360) angleX -= 360;
    if(angleX < 0) angleX += 360;

    RenderScene();
}

document.onkeydown = function(e)
{
    if(e.keyCode == 37) leftKeyDown = true;
    if(e.keyCode == 39) rightKeyDown = true;
    if(e.keyCode == 38) upKeyDown = true;
    if(e.keyCode == 40) downKeyDown = true;
}
document.onkeyup = function(e)
{
    if(e.keyCode == 37) leftKeyDown = false;
    if(e.keyCode == 39) rightKeyDown = false;
    if(e.keyCode == 38) upKeyDown = false;
    if(e.keyCode == 40) downKeyDown = false;
}

function Init()
{
    var myCanvasObject = document.getElementById('myCanvas');
    webgl = myCanvasObject.getContext("experimental-webgl");

    webgl.viewport(0, 0, myCanvasObject.clientWidth, myCanvasObject.clientHeight);

    vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
    fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

    webgl.shaderSource(vertexShaderObject, ShaderSourceFromScript("shader-vs"));
    webgl.shaderSource(fragmentShaderObject, ShaderSourceFromScript("shader-fs"));

    webgl.compileShader(vertexShaderObject);
    webgl.compileShader(fragmentShaderObject);

    if(!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(vertexShaderObject));return;}
    if(!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(fragmentShaderObject));return;}

    programObject = webgl.createProgram();

    webgl.attachShader(programObject, vertexShaderObject);
    webgl.attachShader(programObject, fragmentShaderObject);

    webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
    webgl.bindAttribLocation(programObject, cubeTexSTIndex, "v2CubeTexST");

    webgl.linkProgram(programObject);
    if(!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)){alert(webgl.getProgramInfoLog(programObject));return;}

    samplerIndex = webgl.getUniformLocation(programObject, "s_texture");
    um4RotateIndex = webgl.getUniformLocation(programObject, "um4Rotate");

    webgl.useProgram(programObject);

    if(LoadData() != 0){alert("error:LoadData()!");return;}


    window.setInterval("RotateTriangle()", interval);
}

</script>
</head>
<body οnlοad='Init()'>
<canvas id="myCanvas" style="border:1px solid red;" width='600px' height='450px'></canvas>
<img id="myTexture" src='texture.bmp'>
</body>
</html>

    运行看看，厄，虽然程序上没有问题，但旋转起来之后，感觉怪怪的，因为我们分不清立方体的这个面和那个面。这是因为我们没有使用深度测试，导致本该被遮挡的内容被绘画到了前面。于是，我修改了一下代码：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="glMatrix-0.9.5.js"></script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
attribute vec2 v2CubeTexST;
uniform mat4 um4Rotate;
varying vec2 v_texCoord;
void main(void)
{
    v_texCoord = vec2((v2CubeTexST.x+1.0)/2.0, 1.0-(v2CubeTexST.y+1.0)/2.0);
    gl_Position = um4Rotate * vec4(v3Position, 1.0);
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif
uniform sampler2D s_texture;
varying vec2 v_texCoord;

void main(void)
{
    gl_FragColor = texture2D(s_texture, v_texCoord);
}
</script>

<script>
function ShaderSourceFromScript(scriptID)
{
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";

    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child)
    {
        if (child.nodeType == child.TEXT_NODE ) sourceCode += child.textContent;
        child = child.nextSibling;
    }

    return sourceCode;
}

var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var cubeBuffer = null;
var v3PositionIndex = 0;
var textureObject = null;
var samplerIndex = -1;
var interval = 300;
var angle = 0;
var um4RotateIndex = -1;
var leftKeyDown = false;
var rightKeyDown = false;
var cubeTexSTBuffer = null;
var cubeTexSTIndex = 1;
var angleX = 0;
var upKeyDown = false;
var downKeyDown = false;

function LoadData()
{
    var jsCubeData = [
        //前
        0.5, 0.5, 0.5,
        0.5, -0.5, 0.5,
        -0.5, -0.5, 0.5,
 
        -0.5, -0.5, 0.5,
        -0.5, 0.5, 0.5,
        0.5, 0.5, 0.5,
 
        //后
        0.5, 0.5, -0.5,
        -0.5, 0.5, -0.5,
        -0.5, -0.5, -0.5,
 
        -0.5, -0.5, -0.5,
        0.5, -0.5, -0.5,
        0.5, 0.5, -0.5,
 
        //左
        -0.5, 0.5, 0.5,
        -0.5, -0.5, 0.5,
        -0.5, -0.5, -0.5,
 
        -0.5, -0.5, -0.5,
        -0.5, 0.5, -0.5,
        -0.5, 0.5, 0.5,
 
        //右
        0.5, 0.5, -0.5,
        0.5, -0.5, -0.5,
        0.5, -0.5, 0.5,
 
        0.5, -0.5, 0.5,
        0.5, 0.5, 0.5,
        0.5, 0.5, -0.5,
 
        //上
        0.5, 0.5, -0.5,
        0.5, 0.5, 0.5,
        -0.5, 0.5, 0.5,
 
        -0.5, 0.5, 0.5,
        -0.5, 0.5, -0.5,
        0.5, 0.5, -0.5,
 
        //下
        0.5, -0.5, 0.5,
        0.5, -0.5, -0.5,
        -0.5, -0.5, -0.5,
 
        -0.5, -0.5, -0.5,
        -0.5, -0.5, 0.5,
        0.5, -0.5, 0.5
    ];

    cubeBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsCubeData), webgl.STATIC_DRAW);


    var jsCubeTexST = [
        //前
        0.5, 0.5,
        0.5, -0.5,
        -0.5, -0.5,
 
        -0.5, -0.5,
        -0.5, 0.5,
        0.5, 0.5,
 
        //后
        0.5, 0.5,
        -0.5, 0.5,
        -0.5, -0.5,
 
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
 
        //左
        0.5, 0.5,
        -0.5, 0.5,
        -0.5, -0.5,
 
        -0.5, -0.5,
        0.5, -0.5,
        0.5, 0.5,
 
        //右
        0.5, -0.5,
        -0.5, -0.5,
        -0.5, 0.5,
 
        -0.5, 0.5,
        0.5, 0.5,
        0.5, -0.5,
 
        //上
        0.5, -0.5,
        0.5, 0.5,
        -0.5, 0.5,
 
        -0.5, 0.5,
        -0.5, -0.5,
        0.5, -0.5,
 
        //下
        0.5, 0.5,
        0.5, -0.5,
        -0.5, -0.5,
 
        -0.5, -0.5,
        -0.5, 0.5,
        0.5, 0.5
    ];

    cubeTexSTBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeTexSTBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsCubeTexST), webgl.STATIC_DRAW);
 
 
    textureObject = webgl.createTexture();
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    var img = document.getElementById('myTexture');
    webgl.texImage2D(webgl.TEXTURE_2D, 0, webgl.RGB, webgl.RGB, webgl.UNSIGNED_BYTE, img);
 
    return 0;
}

function RenderScene()
{
    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
    webgl.clearDepth(1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
   
    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeTexSTBuffer);
    webgl.enableVertexAttribArray(cubeTexSTIndex);
    webgl.vertexAttribPointer(cubeTexSTIndex, 2, webgl.FLOAT, false, 0, 0);
 
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MIN_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_MAG_FILTER, webgl.NEAREST);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_S, webgl.CLAMP_TO_EDGE);
    webgl.texParameteri(webgl.TEXTURE_2D, webgl.TEXTURE_WRAP_T, webgl.CLAMP_TO_EDGE);

    webgl.activeTexture(webgl.TEXTURE0);
    webgl.bindTexture(webgl.TEXTURE_2D, textureObject);
    webgl.uniform1i(samplerIndex, 0);

    var m4Rotate = mat4.create();
    mat4.identity(m4Rotate);
    mat4.rotateZ(m4Rotate, angle*Math.PI/180);
    mat4.rotateX(m4Rotate, angleX*Math.PI/180);
    webgl.uniformMatrix4fv(um4RotateIndex, false, m4Rotate);
   
    webgl.enable(webgl.DEPTH_TEST);
    webgl.frontFace(webgl.CW);


    webgl.bindBuffer(webgl.ARRAY_BUFFER, cubeBuffer);
    webgl.enableVertexAttribArray(v3PositionIndex);
    webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);
   
    webgl.drawArrays(webgl.TRIANGLES, 0, 36);
}

function RotateTriangle()
{
    if(leftKeyDown) angle += 10;
    if(rightKeyDown) angle -= 10;
    if(angle >= 360) angle -= 360;
    if(angle < 0) angle += 360;
 
    if(upKeyDown) angleX += 10;
    if(downKeyDown) angleX -= 10;
    if(angleX >= 360) angleX -= 360;
    if(angleX < 0) angleX += 360;

    RenderScene();
}

document.onkeydown = function(e)
{
    if(e.keyCode == 37) leftKeyDown = true;
    if(e.keyCode == 39) rightKeyDown = true;
    if(e.keyCode == 38) upKeyDown = true;
    if(e.keyCode == 40) downKeyDown = true;
}
document.onkeyup = function(e)
{
    if(e.keyCode == 37) leftKeyDown = false;
    if(e.keyCode == 39) rightKeyDown = false;
    if(e.keyCode == 38) upKeyDown = false;
    if(e.keyCode == 40) downKeyDown = false;
}

function Init()
{
    var myCanvasObject = document.getElementById('myCanvas');
    webgl = myCanvasObject.getContext("experimental-webgl");

    webgl.viewport(0, 0, myCanvasObject.clientWidth, myCanvasObject.clientHeight);

    vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
    fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

    webgl.shaderSource(vertexShaderObject, ShaderSourceFromScript("shader-vs"));
    webgl.shaderSource(fragmentShaderObject, ShaderSourceFromScript("shader-fs"));

    webgl.compileShader(vertexShaderObject);
    webgl.compileShader(fragmentShaderObject);

    if(!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(vertexShaderObject));return;}
    if(!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(fragmentShaderObject));return;}

    programObject = webgl.createProgram();

    webgl.attachShader(programObject, vertexShaderObject);
    webgl.attachShader(programObject, fragmentShaderObject);

    webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
    webgl.bindAttribLocation(programObject, cubeTexSTIndex, "v2CubeTexST");

    webgl.linkProgram(programObject);
    if(!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)){alert(webgl.getProgramInfoLog(programObject));return;}

    samplerIndex = webgl.getUniformLocation(programObject, "s_texture");
    um4RotateIndex = webgl.getUniformLocation(programObject, "um4Rotate");

    webgl.useProgram(programObject);

    if(LoadData() != 0){alert("error:LoadData()!");return;}


    window.setInterval("RotateTriangle()", interval);
}

</script>
</head>
<body οnlοad='Init()'>
<canvas id="myCanvas" style="border:1px solid red;" width='600px' height='450px'></canvas>
<img id="myTexture" src='texture.bmp'>
</body>
</html>

    现在，运行起来之后，虽然还是有点分不清立方体的面，但这是贴图的原因，也能凑合着看。如果你不愿意凑合着看，可以自行将立方体的12条边画出来。

铁文
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webGL教程4：实现三维效果
wjlgryx的专栏
03-24 379
欢迎来到WebGL教学系列的第四课。这次我们来显示一些3D物体。本课是基于NeHe OpenGL教学系列的第五课。如果你的浏览器已经支持WebGL，请点击此处，你将看到本课WebGL的现场版；如果不支持，你从此处可以获取一个支持WebGL的浏览器。本课代码与前一课代码的不同之处完全集中于initBuffers和drawScene这两个函数。如果你现在滚动到drawScene函数，你将在第一行的地方...
WebGL自学教程——WebGL示例：开始
热门推荐
tiewen的专栏
10-22 8万+
终于开始WebGL的示例了,...... 开始 　     使用WebGL的步骤，很简单：     1. 获得WebGL的渲染环境（也叫渲染上下文）。     2. 发挥你的想象力，利用《WebGL参考手册》中的函数，参考《OpenGL ES 2.0编程指南》和各种已有的WebGL演示，针对获得的WebGL渲染环境进行操作，表达出你的意境。     为了获得WebGL的渲染环境，或者说
WebGL 可视化3D绘图框架：Three.js 零基础上手实战.rar
08-10
分享一套视频教程，名字叫：WebGL 可视化3D绘图框架：Three.js 零基础上手实战，挺不错的，喜欢大家喜欢
WebGL实现三维图形
Kristen的博客
11-08 1191
WebGL实现三维图形的步骤有四，这里我们以生成立方体为例 定义立方体顶点位置 定义顶点颜色 定义元素（三角形）数组 渲染立方体 定义立方体顶点位置 首先，更新 initBuffers() 函数代码创建顶点位置数据缓存。 var vertices = [ // Front face -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, // Back face -1.0, -1.0
WebGL可视化3D绘图框架：Three.js 零基础上手实战课程
05-20
分享课程——WebGL可视化3D绘图框架：Three.js 零基础上手实战，附软件+PPT+代码+文档资料下载。 本课程主要的功效就是让你学习完本教程后，能够写出在浏览器上流畅运行的3D程序，包括但不限于：大数据可视化，360度全景展示，3D游戏，完成这些事情，会比c++用更少的代码。而且更容易，更酷。 在本课程中，我们将由浅入深的讲解这些效果的实现，这能让你迅速提高开发技能，在职场中处于不败之地。 课程共十三章，大大小小贯穿了近10个案例，只要你具备基础的HTML和JavaScript基础即可学习。
webgl-cube
02-22
WebGL中的Apple Fifth Avenue Cube 有关如何使用WebGL重新创建Apple Fifth Avenue立方体动画的教程的演示。 洛伦佐·卡达慕罗（Lorenzo Cadamuro）。 操作说明 运行npm i以安装所有依赖项 运行npm run dev以启动dev模式 运行npm run build生成生成的 学分 请注意，Apple徽标是Apple Inc.在美国和其他国家/地区注册的商标。 我们在这里仅将其用于演示目的。 执照 如果集成或在个人或商业项目（例如打算出售的网站，Web应用程序和Web模板）中建立该资源，则可以免费使用。 不允许按“原样”获取资源，出售，重新分发，重新发布或出售其“插入”版本。 使用此资源构建的免费插件应该有明显的提及并链接到原始作品。 请始终考虑所使用的所有随附库，脚本和映像的许可证。 杂项 跟随洛伦佐： ， 跟随Codr
尝试搭建webgl游戏引擎-创建正方体
q314235965的专栏
07-09 517
在webgl里如何创建一个正方体。
Unity中用代码画出Cube
a1207561210的博客
04-19 1524
如何用代码画出一个Cube呢？？ 话不多说 直接上 var pMeshFilter = gameObject.AddComponent(typeof(MeshFilter)) as MeshFilter;//网格过滤器 var pMeshRender = gameObject.AddComponent(typeof(MeshRenderer)) as MeshRenderer;//...
WebGL笔记（三）：绘制立方体
weixin_30832405的博客
07-29 651
终于要在三维的场景里绘制一个三维的物体了——1个Cube。 我们先来厘清几个事情： 一个立方体有6个面，每个面4个顶点，所以要绘制24个顶点。 每个顶点位置由3个数字表示，所以顶点信息是72个数字的数组。 每个顶点颜色由4个数字表示，所以颜色信息是96个数字的数组。 先看一看长长的顶点数组： var vertices = [ // Fron...
webgl——绘制一个旋转的彩色立方体（四）
jiegiser博客
03-06 958
文章目录前言一、整体代码以及实现效果二、绘制步骤1.构建顶点数据2.通过顶点索引构建立方体总结 前言 前面文章介绍了如何通过多点来绘制图形，通过建立缓冲区对象，将多个数据传入到缓冲区中；然后 webgl 进行读取缓冲区中的数据进行渲染。上个例子绘制 “F” 的坐标点不是很多；但是如果我们绘制一个立方体。如果还跟之前一样的绘制方式；立方体的每一个面由两个三角形组成，每个三角形有三个顶点，所以每个月需要有六个顶点，那么顶点数据需要有 36 个，我们会发现其实我们只需要用 8 个顶点来进行绘制立方体，但是如何
webgl 基础渲染demo_拓展知识：基于webGL的三维数字地球
weixin_39981400的博客
10-28 368
基于webGL的三维数字地球一、 概述数字地球利用数字技术和方法将地球以及上面活动和环境的时空变化数据，按地球的坐标加以整理组织起来，构成一个全球的数字模型，使人类对地球空间数据进行分析和处理提高了一个新的高度，快速、直观的展现地理空间数据可视化。随着计算机和浏览器的性能越来越强，使用便捷通用的Web技术创建三维图形已经成为可能，允许开发者结合HTML5和JavaScript在网页上创建和渲染三维...
Vue3.0开发WebGL显示Cube
zhoutx的博客
08-05 748
1 步骤说明 安装最新nodejs，输入node -v 和 npm -v 分别查看版本号，代表node.js安装完成。 安装 webpack-cli >npm install webpack webpack-cli -g 安装vue-cli >npm install --global vue-cli 创建项目web >vue init webpack web 创建过程中选项 Install vue-router...
WebGL实现两个模型的独立运动：旋转、前进后退、缩放
11-18
WebGL实现两个三维模型的独立运动，包括每个模型的转向、前进后退、缩放功能。此处方向均以运动模型作为参考，模型正面方向为前进，相反方向为后退，绕动物中轴线转向。
【视觉高级篇】20 # 如何用WebGL绘制3D物体？
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
11-11 1445
【跟月影学可视化】学习笔记。我们知道立方体有8个顶点，6个面，在 WebGL 中，需要用 12 个三角形来绘制它。把每个面的顶点分开，需要 24 个顶点。 绘制 3D 图形与绘制 2D 图形有一点不一样，必须要开启深度检测和启用深度缓冲区。在 WebGL 中，可以通过 ，来开启深度检测。在清空画布的时候，也要用 ，来同时清空颜色缓冲区和深度缓冲区。 上面朝向我们的面应该是 颜色， WebGL 默认的剪裁坐标的 z 轴方向，的确是朝内的。WebGL 坐标系就是一个左手系而不是右手系。下面我们需要将 WebG
46 WebGL网页上显示三维物体
现在学习也不晚
06-15 5652
案例查看地址：点击这里想要把三维物体显示到网页上面，很简单，只要会css，懂得盒子模型，定位，就可以在网页上面随意放置模型，控制canvas位置就可以。这次的案例直接body添加了一个背景，然后看到的效果就是这样的，一个立方体在网页上面旋转。实现这个效果也只是将背景修改成了全透明，也就是将gl.clearColor()方法里面传入的第四个值改为0.0 。就达到了效果。&lt;!DOCTYPE ht...
WebGL，真正进入三维的世界
hsany330的专栏
01-10 5576
一、在此之前 在之前的文章中，我想大家已经对WebGL有了一个大体的了解，不过为了凑字数，我在这篇文章的开头再稍微回顾一下，如果我们需要使用WebGL来绘制图像需要走完以下这五步： 1、从canvas元素中获取webgl context 2、利用GLSL ES语言，编写顶点着色器和片元着色器，并成对应的着色器程序 3、准备好你想要绘制的图像的顶点数据，并写入缓冲区 4、把着色器中的变量与...
基于HTML5和WebGL的三维可视立体动态流程图
weixin_33696106的博客
10-12 1647
惯例先扯点闲篇 记得15年那会儿，我给人讲WebGL，还得从头科普，三令五申要用Chrome，末了再强调一句，记得启用WebGL功能。今天，但凡懂点儿Web开发的，都会来一句“网页3D用WebGL”。 怎么形容这种感受呢？ 这两年的技术发展，大家想必都看在眼里，单用“爆发”二字，实在难以描述其中的惊天巨变。而回到网页3D这个话题上，我想...
Library\Bee\artifacts\WebGL\build\debug_WebGL_wasm\build.js: undefined symbol: GADUAddKeyword
最新发布
08-22
这个错误是由于缺少符号 "GADUAddKeyword" 导致的。它可能是由于缺少某个库或依赖项引起的。要解决这个问题，你可以尝试以下几种方法： 1. 确保你的项目中包含了正确的库和依赖项。检查是否缺少某个库文件或依赖项，并确保它们被正确地引用和加载。 2. 检查编译选项和链接设置。如果使用了某个特定的库或依赖项，确保在编译和链接过程中正确地指定了相关选项。 3. 检查代码中是否存在拼写错误或语法错误。有时候，这种错误可能是由于代码中的拼写错误或语法错误引起的。仔细检查代码，确保没有任何错误。 如果以上方法都没有解决问题，你可能需要进一步调查相关的库和依赖项，以找出导致该错误的原因。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值