帮酷LOGO
  • 显示原文与译文双语对照的内容
文章标签:CAN  shaders  Canvas  SHA  WEB  tool  GLSL  Webgl  
Simple tool to load GLSL shaders on HTML Canvas using WebGL

  • 源代码名称:glslCanvas
  • 源代码网址:http://www.github.com/patriciogonzalezvivo/glslCanvas
  • glslCanvas源代码文档
  • glslCanvas源代码下载
  • Git URL:
    git://www.github.com/patriciogonzalezvivo/glslCanvas.git
  • Git Clone代码到本地:
    git clone http://www.github.com/patriciogonzalezvivo/glslCanvas
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/patriciogonzalezvivo/glslCanvas
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
  • 是JavaScript库,它帮助你轻松加载GLSL和顶点着色器到一个HTML画布。 我已经在我的Shaders Shaders 和 glslEditor中使用过这一特性。

    Donate

    如何使用它?

    有不同的方法来做到这一点。 但首先,通过将这里行添加到 HTML,确保在页面上加载最新版本的GlslCanvas.js:

    <scripttype="text/javascript"src="https://rawgit.com/patriciogonzalezvivo/glslCanvas/master/dist/GlslCanvas.js"></script>

    或者,如果你在控制台上使用npm软件包管理器,请执行以下操作:

    npm install glslCanvas

    简单的方法

    • 在HTML中创建画布元素。
    • 将类 NAME glslCanvas 添加到画布。
    • 给它指定一个明暗器。
    • 通过使用属性 data-fragment-url的url
    • 或者直接编写代码 inside ( data-fragment 属性)
    <canvasclass="glslCanvas"data-fragment-url="shader.frag"width="500"height="500"></canvas>

    这就是全部glslCanvas将在该 <canvas> 元素中自动加载一个for上下文,编译着色器并对它的进行动画处理。

    可以看到,在这个例子中,我们通过将属性 data-fragment-url 设置为一个url来加载 fragment 着色器。 但是,还有一些其他方法可以将数据加载到 glslCanvas:

    • data-fragment: 通过将着色器的内容提供为字符串来加载 fragment 明暗器
    • data-fragment-url: 通过提供有效的url来加载 fragment-明暗器
    • data-vertex: 通过将明暗器的内容提供为字符串来加载顶点着色器
    • data-vertex-url: 通过提供有效的url来加载顶点着色器
    • data-textures: 添加一个由逗号分隔的纹理url列表( 例如: data-textures="texture.jpg,normal_map.png,something.jpg" ) 。将为具有这里样式的名称的uniform sampler2D 变量指定纹理: u_tex0u_tex1u_tex2 等。

    所有提取的.glslCanvas 元素whill都存储在 windows.glslCanvases array 中。

    JS方式

    创建一个 <canvas> 元素并从它构建一个 glsCanvas() 沙箱。

    var canvas =document.createElement("canvas");var sandbox =newGlslCanvas(canvas);

    在这种情况下,你需要重新加载

    从JS重载着色程序

    你可以根据需要多次更改明暗器的内容。 以下是一些示例:

    // Load only the Fragment Shadervar string_frag_code ="main(){ngl_FragColor = vec4(1.0);n}n";sandbox.load(string_frag_code);// Load a Fragment and Vertex Shadervar string_vert_code ="attribute vec4 a_position; main(){ggl_Position = a_position;n}n";sandbox.load(string_frag_code, string_vert_code);

    默认制服

    将自动为你加载一些制服:

    • u_time: 表示以秒为单位运行的时间的float
    • u_resolution: 表示viewport尺寸的vec2
    • u_mouse: 表示鼠标位置的vec2,用 .setMouse({x:[value],y:[value]) 定义在Javascript中。
    • u_tex[number]: 包含使用 data-textures 属性加载的纹理的sampler2D

    你还可以将自定义制服发送到带有 .setUniform([name],[...value])的明暗器。 GlslCanvas将解析你提供的值以确定它的类型。 如果值是 String,GlslCanvas将把它解析为纹理的url 。

    // Assign. 5 to"uniform float u_brightness"sandbox.setUniform("u_brightness",.5); // Assign (.2,.3) to"uniform vec2 u_position"sandbox.setUniform("u_position",.2,.3);// Assign a red color to"uniform vec3 u_color"sandbox.setUniform("u_color",1,0,0); // Load a new texture and assign it to"uniform sampler2D u_texture"sandbox.setUniform("u_texture","data/texture.jpg");

    快速入门演示

    文件中,你将找到方便的示例代码。

    演示页面:patriciogonzalezvivo.github.io/glslCanvas/

    协作

    如果你希望对这里代码进行贡献,你需要:

    git clone https://github.com/patriciogonzalezvivo/glslCanvas.gitcd glslCanvas
    yarn
    • 编辑时在开发模式中运行汇总
    yarn run dev
    • 生成的生成
    yarn run build
    • 推送到本地 fork,并发出请求请求

    谢谢你



    文章标签:WEB  tool  SHA  CAN  Canvas  Webgl  着色器  Shade  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语