原生态webgl--DEMO,以后可能选择Three.JS来代替了,代码网上找的,参考引用

复制代码
//experimental-webgl
$(document).ready(function () {

    // Gets canvas from the HTML page
    var canvas = document.getElementById('viewport');

    // Creates GL context
    gl = null;
    try {
        gl = canvas.getContext('experimental-webgl');
    }
    catch (e) {
        alert('Exception catched in getContext: ' + e.toString()); return;
    }

    // If no exception but context creation failed, alerts user
    if (!gl) {
        alert('Unable to create Web GL context'); return; 
    }

    // Sets clear color to non-transparent dark blue and clears context
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    //---------------- end of part 1 -----------------

    // Creates fragment shader (returns white color for any position)
    var fshader = gl.createShader(gl.FRAGMENT_SHADER);
    gl.shaderSource(fshader, 'void main(void) {gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);}');
    gl.compileShader(fshader);
    if (!gl.getShaderParameter(fshader, gl.COMPILE_STATUS)) {
        alert('Error during fragment shader compilation:\n' + gl.getShaderInfoLog(fshader)); return; 
    }

    // Creates vertex shader (converts 2D point position to coordinates)
    var vshader = gl.createShader(gl.VERTEX_SHADER);
    gl.shaderSource(vshader, 'attribute vec2 ppos; void main(void) { gl_Position = vec4(ppos.x, ppos.y, 0.0, 1.0);}');
    gl.compileShader(vshader);
    if (!gl.getShaderParameter(vshader, gl.COMPILE_STATUS))
    {
        alert('Error during vertex shader compilation:\n' + gl.getShaderInfoLog(vshader)); return; 
     }

    // Creates program and links shaders to it
    var program = gl.createProgram();
    gl.attachShader(program, fshader);
    gl.attachShader(program, vshader);
    gl.linkProgram(program);
    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
        alert('Error during program linking:\n' + gl.getProgramInfoLog(program)); return; 
    }

    // Validates and uses program in the GL context
    gl.validateProgram(program);
    if (!gl.getProgramParameter(program, gl.VALIDATE_STATUS)) {
        alert('Error during program validation:\n' + gl.getProgramInfoLog(program)); return; 
    }
    gl.useProgram(program);

    // Gets address of the input 'attribute' of the vertex shader
    var vattrib = gl.getAttribLocation(program, 'ppos');
    if (vattrib == -1) {
        alert('Error during attribute address retrieval'); return; 
    }
    gl.enableVertexAttribArray(vattrib);

    // Initializes the vertex buffer and sets it as current one
    var vbuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vbuffer);

    // Puts vertices to buffer and links it to attribute variable 'ppos'
    var vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5]);
    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
    gl.vertexAttribPointer(vattrib, 2, gl.FLOAT, false, 0, 0);

    // Draws the object
    gl.drawArrays(gl.TRIANGLES, 0, 3);
    gl.flush()
});

除了上述代码,什么也不想说,但会把我看过的文章列表贴出来,





































http://www.web3dmarket.com/html/tutorial/1.html

 



























OK,That's all
复制代码
posted @   kkun  阅读(2247)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae