无法在WebGL中创建沿轴旋转的3D Koch
Unable to create 3D Koch in WebGL with rotation along axis
最近我选择了WebGL将我的c++游戏移植到JS上。我成功地创建并旋转了一个三维科赫曲线的基本四面体。然后，由于WebGL中的着色器，我无法翻译代码。我解决这个问题的方法和在OpenGL中一样，计算新的几何点，然后，一旦三角形形成，我就把它画出来。这在WebGL中似乎不起作用。下面是代码…https://github.com/Horopter/koch-snowflake/blob/master/koch/koch3d.cpp这是WebGL的代码，直到我成功。特别是我需要翻译函数的帮助…
这里是index。html
//compiled by Santosh. Title : main.js
var gl;
function initGL(canvas) {
try {
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
gl.enable(gl.DEPTH_TEST);
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.viewport(0, 0, canvas.width, canvas.height);
}
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;
}
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;
}
var shaderProgram;
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);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}
gl.useProgram(shaderProgram);
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}
var mvMatrix = mat4.create();
var mvMatrixStack = [];
var pMatrix = mat4.create();
function mvPushMatrix() {
var copy = mat4.create();
mat4.set(mvMatrix, copy);
mvMatrixStack.push(copy);
}
function mvPopMatrix() {
if (mvMatrixStack.length == 0) {
throw "Invalid popMatrix!";
}
mvMatrix = mvMatrixStack.pop();
}
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
var pyramidVertexPositionBuffer;
var pyramidVertexColorBuffer;
function initBuffers() {
pyramidVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
var vertices = [
// Front face
1.0, 1.0, 1.0,//a
1.0, -1.0, -1.0,//b
-1.0, 1.0, -1.0,//c
// Right face
1.0, -1.0, -1.0,//b
-1.0, 1.0, -1.0,//c
-1.0, -1.0, 1.0,//d
// Left face
1.0, 1.0, 1.0,//a
-1.0, -1.0, 1.0,//d
1.0, -1.0, -1.0,//b
// Back face
-1.0, 1.0, -1.0,//c
-1.0, -1.0, 1.0,//d
1.0, 1.0, 1.0//a
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
pyramidVertexPositionBuffer.itemSize = 3;
pyramidVertexPositionBuffer.numItems = 12;
pyramidVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
var colors = [
// Front face
1.0, 0.0, 0.0, 1.0,//a
0.0, 1.0, 0.0, 1.0,//b
0.0, 0.0, 1.0, 1.0,//c
// Right face
0.0, 1.0, 0.0, 1.0,//b
0.0, 0.0, 1.0, 1.0,//c
1.0, 1.0, 1.0, 1.0,//d
// Left face
1.0, 0.0, 0.0, 1.0,//a
1.0, 1.0, 1.0, 1.0,//d
0.0, 1.0, 0.0, 1.0,//b
// Back face
0.0, 0.0, 1.0, 1.0,//c
1.0, 1.0, 1.0, 1.0,//d
1.0, 0.0, 0.0, 1.0,//a
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
pyramidVertexColorBuffer.itemSize = 4;
pyramidVertexColorBuffer.numItems = 12;
}
var rPyramid = 0;
function drawScene() {
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
mat4.identity(mvMatrix);
mat4.translate(mvMatrix, [0.0, 2.0, -8.0]);
mat4.scale(mvMatrix,[0.7,0.7,0.7]);
mvPushMatrix();
mat4.rotate(mvMatrix, degToRad(rPyramid), [0, 1, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramidVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramidVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLES, 0, pyramidVertexPositionBuffer.numItems);
mvPopMatrix();
}
var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;
rPyramid += (90 * elapsed) / 1000.0;
}
lastTime = timeNow;
}
function tick() {
requestAnimationFrame(tick);
drawScene();
animate();
}
function webGLStart() {
var canvas = document.getElementById("gameCanvas");
initGL(canvas);
initShaders()
initBuffers();
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.enable(gl.DEPTH_TEST);
tick();
}
webGLStart();<script src="http://learningwebgl.com/lessons/lesson01/glMatrix-0.9.5.min.js"></script>
<script id="shader-fs" type="x-shader/x-fragment">
precision mediump float;
varying vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
</script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
varying vec4 vColor;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
vColor = aVertexColor;
}
</script>
<canvas id="gameCanvas" style="border: none;" width="800" height="500"> </canvas> 像OpenGL ES 2.0及以上版本的WebGL不再有固定的函数管道。换句话说，它不支持glVertex, glColor等每次指定一个顶点的地方。原因是现代gpu效率极低且速度极慢。当然，在你的PC上，它足够快，可以让东西工作，但它甚至不接近gpu的工作方式，所以Khronos，设计OpenGL的人聪明地决定删除那些东西，特别是对于OpenGL ES, ES =嵌入式系统=智能手机，因为超级低效的方法消耗用户的电池，因为它实际上不是gpu的工作，这也意味着膨胀的驱动程序代码支持旧的低效方式。
你现在做的方式是你创建缓冲区(你在上面的例子中所做的)，你把数据放在他们。通常，数据只需要创建一次。例如，如果你在画一个金字塔，为什么要在每一帧指定每个顶点，而你可以只指定一次，然后每次都重用它们。更有效率。
所以，你基本上需要将旧的已弃用的OpenGL c++代码重组为新的现代OpenGL ES代码。一种简单的方法可能是创建一些缓冲区创建器帮助器。示例
function OldOpenGLVertexHelper() {
var colors = [];
var vertices = [];
var normals = [];
var currentColor = [1, 1, 1, 1];
var currentNormal = [0, 0, 0];
var mode;
this.color3f = function(r, g, b) {
currentColor = [r, g, b, 1];
}
this.color4f = function(r, g, b, a) {
currentColor = [r, g, b, a];
}
this.color3fv = function(rgb) {
currentColor = rgb.concat(1);
}
this.color4fv = function(rgba) {
currentColor = rgba.slice();
}
this.normal3f = function(x, y, z) {
currentNormal = [x, y, z];
}
this.normal3fv = function(xyz) {
currentNormal = xyz.slice();
}
var vertex3f = function(x, y, z) {
colors.push(currentColor[0],
currentColor[1],
currentColor[2],
currentColor[3]);
normals.push(currentNormal[0],
currentNormal[1],
currentNormal[2]);
vertices.push(x, y, z);
}
this.vertex3f = vertex3f;
this.vertex3fv = function(xyz) {
vertex3f(xyz[0], xyz[1], xyz[2]);
};
this.end = function() {
return {
vertices: new Float32Array(vertices),
normals: new Float32Array(normals),
colors: new Float32Array(colors),
mode: mode,
};
});
this.begin = function(m) {
mode = m;
colors = [];
normals = [];
vertices = [];,
};
}
现在你可以这样做
var oldGL = new OldOpenGLVertexHelper();
oldGL.color3f(0.0,0.0,0.0);
oldGL.begin(gl.LINES);
oldGL.vertex3fv(a);
oldGL.vertex3fv(b);
oldGL.vertex3fv(b);
oldGL.vertex3fv(c);
oldGL.vertex3fv(c);
oldGL.vertex3fv(d);
oldGL.vertex3fv(d);
oldGL.vertex3fv(a);
oldGL.vertex3fv(a);
oldGL.vertex3fv(c);
oldGL.vertex3fv(b);
oldGL.vertex3fv(d);
var buffers = oldGL.end();
现在您可以访问buffers.vertices, buffers.colors, buffers.normals等创建的缓冲区。
如何处理这些缓冲区取决于你。理想情况下，如果它们不改变每一帧，你可以在初始化时创建它们并重用它们。请看你上面发布的代码，它为金字塔创建了一组缓冲区
否则如果你想做旧的OpenGL所做的你可以在那个点立即绘制
gl.bindBuffer(gl.ARRAY_BUFFER, somebufferForPositions);
gl.bufferData(gl.ARRAY_BUFFER, buffers.vertices, gl.DYNAMIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, somebufferForColors);
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.colors, gl.DYNAMIC_DRAW);
// set your attributes
...
gl.drawArrays(buffers.mode, 0, buffers.vertices.length / 3);
// NOTE: you'll need to change that divided by 3 if buffers.mode
// is lines (2) or points (1)
这基本上是旧的OpenGL驱动程序为你做的
我不知道这是否足以帮助你。既然你是WebGL的新手，我建议你多读一些教程。对于绘制多个对象可能会有帮助。
相关文章：
- 带有JQuery和CSS的3D旋转木马-渲染不正确
- 如何在第三轴上旋转 3D 对象.js
- 在 Javascript 中使用多个图像帧的 3D 旋转效果 - 如何在某些帧上触发元素淡入/淡出
- 这种Skrollr 3D旋转效果是如何实现的
- 定时器上的 3D 旋转木马
- 使用JavaScript从matrix3d(）中获取3D CSS旋转值
- 将2D画布(图像+文本）应用于3D表面，并进行360度旋转/动画-可以使用HTML5/CSS3/Javascript或F
- js 3D立方体在重新初始化时旋转得越来越快
- 无法在WebGL中创建沿轴旋转的3D Koch
- 用JS在HTML上旋转3D模型
- 如何在SVG中以不同的旋转角度旋转3D中的许多矩形
- Webkit 3D CSS.像第一人称射击游戏一样旋转镜头
- 用three.js从2D旋转到3D
- 在javascript的3D中围绕轴旋转一个表面
- 围绕自身旋转3D球体- webGL
- 旋转后的3D坐标
- JQuery在悬停(3D)时前后旋转两个边
- 使用javascript旋转CSS3 3d立方体
- 使用javascript, html5和css3创建3d旋转鼠标跟踪墙导航
- 如何绘制和设置旋转3D对象的轴的角度
