知识

首页分享 webgl第23课

webgl第23课

来源：花匠小妙招时间：2025-04-27 04:20

需要电子档书籍可以Q群：828202939 希望可以和大家一起学习、一起进步！！纯手打！！

所有的课程源代码在我上传的资源里面，本来想设置开源，好像不行！博客和专栏同步！

如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！

上一节课我们学习了颜色与纹理中-将非坐标数据传入顶点着色器

这一节课我们将学习颜色与纹理中-将非坐标数据传入顶点着色器的另外一种方式--交错组织

如果你学习过上一节的课程，你会发现代码里面的很多流程都是重复的，对此，我们需要对此进行改进一下

与上节课的不同之处在于本案例是将两种数据打包到一个缓冲区里面

先看看结构流程图：

相关函数：

stride和offset结构图：

具体解释可以在代码中找到：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>webgl第23课-颜色与纹理中-将非坐标数据传入顶点着色器（二）</title>

</head>

<body onload="main()">

<canvas id="webgl" width="400" height="400">

Please use a browser that supports "canvas"

</canvas>

<script src="../lib/webgl-utils.js"></script>

<script src="../lib/webgl-debug.js"></script>

<script src="../lib/cuon-utils.js"></script>

<script src="../lib/cuon-matrix.js"></script>

<script src="MultiAttributeSize_Interleaved.js"></script>

</body>

</html>

var VSHADER_SOURCE =

'attribute vec4 a_Position;n' +

'attribute float a_PointSize;n' +

'void main() {n' +

' gl_Position = a_Position;n' +

' gl_PointSize = a_PointSize;n' +

'}n';

var FSHADER_SOURCE =

'void main() {n' +

' gl_FragColor = vec4(1.0, 0.0, 1.0, 1.0);n' +

'}n';

function main() {

var canvas = document.getElementById('webgl');

var gl = getWebGLContext(canvas);

if (!gl) {

console.log('Failed to get the rendering context for WebGL');

return;

}

if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {

console.log('Failed to intialize shaders.');

return;

}

var n = initVertexBuffers(gl);

if (n < 0) {

console.log('Failed to set the vertex information');

return;

}

gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.POINTS, 0, n);

}

function initVertexBuffers(gl) {

var verticesSizes = new Float32Array([

0.0, 0.5, 20.0,

-0.5, -0.5, 40.0,

0.5, -0.5, 50.0

]);

var n = 3;

var vertexSizeBuffer = gl.createBuffer();

if (!vertexSizeBuffer) {

console.log('Failed to create the buffer object');

return -1;

}

gl.bindBuffer(gl.ARRAY_BUFFER, vertexSizeBuffer);

gl.bufferData(gl.ARRAY_BUFFER, verticesSizes, gl.STATIC_DRAW);

var FSIZE = verticesSizes.BYTES_PER_ELEMENT;

获取attribute的位置

var a_Position = gl.getAttribLocation(gl.program, 'a_Position');

if (a_Position < 0) {

console.log('Failed to get the storage location of a_Position');

return -1;

}

gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 3, 0);

gl.enableVertexAttribArray(a_Position);

var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');

if(a_PointSize < 0) {

console.log('Failed to get the storage location of a_PointSize');

return -1;

}

gl.vertexAttribPointer(a_PointSize, 1, gl.FLOAT, false, FSIZE * 3, FSIZE * 2);

gl.enableVertexAttribArray(a_PointSize);

gl.bindBuffer(gl.ARRAY_BUFFER, null);

return n;

}

运行结果与上一课一样：

相关知识

webgl第23课
 《WebGL编程指南》
花朵创意设计，webgl动画制作素材
 反
 剪枝护绿美化新区——年轻干部周周大学堂开展园林绿化调研实训活动
 银杏嫩枝扦插育苗虚拟仿真实验
 综合实践――保护水资源
 《美国纽约摄影学院摄影教材》解析.doc免费全文阅读
 八年级上册语文必背古诗文苏教版
 花镜植物配置表.doc

网址: webgl第23课 https://www.huajiangbk.com/newsview1794450.html

所属分类：花卉

上一篇: 颜色纹理图片免费下载

下一篇: 茉莉花是什么颜色？

推荐分享

家庭养花风水知识家庭养花“五行说”

家庭养花风水知识家庭养花“五行说”

家庭养花知识大全家庭养花有什么好处

家庭养花知识大全家庭养花有什么好处

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

秋天养花，掌握这5点养花知识，正确管理花卉，让花健康生长

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！

【花卉知识】养花须知：新手养花的选购技巧，不要当冤大头！

最新分享

马铃薯白绢病的症状及防治方法

重磅杀菌剂氯氟醚菌唑的市场开发进展

重磅杀菌剂氯氟醚菌唑的市场开发进展

木芙蓉白粉病的防治方法白粉病是很多花友家里的花都会患上的一种病马铃薯得了白娟病如何防治？马铃薯的几种主要病虫害及其防治措施马铃薯病虫害有哪些？马铃薯常见病虫害的防白粉病防治：识别、预防和治疗技巧小麦白粉病的症状及防治不用花大钱！家庭园艺白粉病最快疗法，省时

分享热点排名

分享热点

家庭养花知识大全(家庭养花知识大全与技巧)

家庭养花知识大全(家

养花知识大全,养花技

怎么样在室内养花？养花知识大全

怎么样在室内养花？养

教师节送什么花最合适

即时知识

精选专栏

君子兰什么品种最名贵十大名贵君子兰排名

丝瓜打顶时间及方法步骤(图解)

河北10个最好玉米品种