getting_start.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# CrossGL: Revolutionizing Shader Development\n",
    "\n",
    "## 🌟 The Universal Shader Language\n",
    "\n",
    "In the ever-evolving world of graphics programming, **CrossGL** emerges as a game-changing solution, bridging the gap between diverse graphics APIs.\n",
    "\n",
    "### 🚀 Write Once, Run Everywhere\n",
    "\n",
    "Imagine writing a shader _once_ and deploying it across:\n",
    "\n",
    "- 🍎 Metal\n",
    "- 🎮 DirectX\n",
    "- 🖥️ OpenGL\n",
    "\n",
    "...all without changing a single line of code!\n",
    "\n",
    "## 💡 Key Benefits\n",
    "\n",
    "1. **⏱️ Time-Saving**: Slash development time by eliminating the need for multiple shader versions.\n",
    "2. **🛠️ Consistency**: Ensure uniform behavior across all platforms.\n",
    "3. **🧠 Simplified Learning Curve**: Master one language instead of many.\n",
    "4. **🔍 Enhanced Debugging**: Develop universal tools for shader analysis.\n",
    "5. **🔮 Future-Proof**: Easily adapt to new graphics APIs as they emerge.\n",
    "\n",
    "\n",
    "📚 **Documentation**\n",
    "Comprehensive documentation is available to help you get started and master CrossGL:\n",
    "\n",
    "🔗 [CrossGL Documentation](https://crossgl.github.io/language.html)\n",
    "📘 [Contribution Guidelines](https://crossgl.github.io/contribution.html)\n",
    "\n",
    "\n",
    "🤝 **Community & Social Media**\n",
    "Join our vibrant community of developers and graphics enthusiasts:\n",
    "\n",
    "💬 [Discord Channel](https://discord.gg/mYH45zZ9)\n",
    "- Get real-time support\n",
    "- Share your projects\n",
    "- Collaborate with other CrossGL users\n",
    "\n",
    "🐙 [GitHub](https://github.com/CrossGL)\n",
    "- Access the source code\n",
    "- Report issues\n",
    "- Contribute to the project\n",
    "\n",
    "🐦 [X](https://x.com/crossGL_)\n",
    "- Stay updated with the latest news\n",
    "- Join discussions about graphics programming\n",
    "\n",
    "\n",
    "👥 [LinkedIn](https://www.linkedin.com/company/crossgl/?viewAsMember=true)\n",
    "- Connect with the CrossGL team\n",
    "- Explore career opportunities\n",
    "- Network with industry professionals\n",
    "\n",
    "\n",
    "## 🌈 CrossGL Shader \n",
    "\n",
    "```cpp\n",
    "shader main {\n",
    "    vertex {\n",
    "        input vec3 position;\n",
    "        output vec2 vUV;\n",
    "\n",
    "        void main()\n",
    "        {\n",
    "            vUV = position.xy * 10.0;\n",
    "            gl_Position = vec4(position, 1.0);\n",
    "        }\n",
    "    }\n",
    "\n",
    "    float perlinNoise(vec2 p) {\n",
    "        return fract(sin(dot(p, vec2(12.9898, 78.233))) * 43758.5453);\n",
    "    }\n",
    "\n",
    "    fragment {\n",
    "        input vec2 vUV;\n",
    "        output vec4 fragColor;\n",
    "\n",
    "        void main()\n",
    "        {\n",
    "            float noise = perlinNoise(vUV);\n",
    "            float height = noise * 10.0;\n",
    "            vec3 color = vec3(height / 10.0, 1.0 - height / 10.0, 0.0);\n",
    "            fragColor = vec4(color, 1.0);\n",
    "        }\n",
    "    }\n",
    "}\n",
    "```\n",
    "\n",
    "## 🤝 Unifying the Developer Community\n",
    "\n",
    "CrossGL isn't just a language; it's a bridge connecting developers across different platforms, fostering collaboration and innovation.\n",
    "\n",
    "### 📈 The CrossGL Advantage\n",
    "\n",
    "| Feature | Without CrossGL | With CrossGL |\n",
    "|---------|-----------------|--------------|\n",
    "| Platforms Supported | Single | Multiple |\n",
    "| Code Reusability | Low | High |\n",
    "| Learning Curve | Steep | Gentle |\n",
    "| Time to Market | Slower | Faster |\n",
    "\n",
    "## 🎨 Unleash Your Creativity\n",
    "\n",
    "With CrossGL, you're no longer bound by platform limitations. Your imagination is the only limit!\n",
    "\n",
    "> \"CrossGL is not just a tool; it's a canvas for your graphics ambitions.\" - Graphics Guru\n",
    "\n",
    "---\n",
    "\n",
    "Are you ready to transform your shader development workflow? Dive into CrossGL and experience the future of graphics programming today! 🚀✨\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# CrossGL Translator: A Step-by-Step Journey\n",
    "\n",
    "## 🚀 Embark on a Cross-Platform Shader Adventure\n",
    "\n",
    "Let's walk through the magic of CrossGL translation, step by step!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 1: The CrossGL Source 📝\n",
    "\n",
    "We begin with a CrossGL shader that generates Perlin noise for terrain:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "--2024-08-06 19:19:03--  https://raw.githubusercontent.com/CrossGL/demos/main/samples/Basic%20Fog%20Shader.cgl\n",
      "Resolving raw.githubusercontent.com (raw.githubusercontent.com)... 185.199.111.133, 185.199.109.133, 185.199.110.133, ...\n",
      "Connecting to raw.githubusercontent.com (raw.githubusercontent.com)|185.199.111.133|:443... connected.\n",
      "HTTP request sent, awaiting response... 200 OK\n",
      "Length: 725 [text/plain]\n",
      "Saving to: ‘test.cgl’\n",
      "\n",
      "test.cgl            100%[===================>]     725  --.-KB/s    in 0s      \n",
      "\n",
      "2024-08-06 19:19:03 (57.3 MB/s) - ‘test.cgl’ saved [725/725]\n",
      "\n"
     ]
    }
   ],
   "source": [
    "!wget -O test.cgl https://raw.githubusercontent.com/CrossGL/demos/main/samples/Basic%20Fog%20Shader.cgl"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "shader main {\n",
      "    vertex {\n",
      "        input vec3 position;\n",
      "        input vec2 texCoord;\n",
      "        output vec2 fragTexCoord;\n",
      "        output vec3 fragPosition;\n",
      "\n",
      "        void main() {\n",
      "            fragTexCoord = texCoord;\n",
      "            fragPosition = position;\n",
      "            gl_Position = vec4(position, 1.0);\n",
      "        }\n",
      "    }\n",
      "\n",
      "    fragment {\n",
      "        input vec2 fragTexCoord;\n",
      "        input vec3 fragPosition;\n",
      "        output vec4 fragColor;\n",
      "\n",
      "        void main() {\n",
      "           \n",
      "            float depth = length(fragPosition);\n",
      "            float fogFactor = exp(-fogDensity * depth);\n",
      "            vec3 finalColor = mix(fogColor, baseColor, fogFactor);\n",
      "            fragColor = vec4(finalColor, 1.0);\n",
      "        }\n",
      "    }\n",
      "}\n",
      "\n"
     ]
    }
   ],
   "source": [
    "with open(\"test.cgl\",'r') as f:\n",
    "    cgl_code = f.read()\n",
    "print(cgl_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 2: Parsing the Code 🧩\n",
    "\n",
    "Our lexer and parser spring into action:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [],
   "source": [
    "import crosstl"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "Parsing complete. AST created.\n"
     ]
    }
   ],
   "source": [
    "from crosstl import Lexer\n",
    "from crosstl import Parser\n",
    "from crosstl import ASTNode\n",
    "lexer = Lexer(cgl_code)\n",
    "parser = Parser(lexer.tokens)\n",
    "ast = parser.parse()\n",
    "\n",
    "print(\"Parsing complete. AST created.\")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 3: The Translation Magic ✨\n",
    "\n",
    "Now, we unleash our code generators:"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 3.1 Metal Transformation 🍎"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "#include <metal_stdlib>\n",
      "using namespace metal;\n",
      "\n",
      "struct Vertex_INPUT {\n",
      "    float3 position [[attribute(0)]];\n",
      "    float2 texCoord [[attribute(1)]];\n",
      "};\n",
      "\n",
      "struct Vertex_OUTPUT {\n",
      "    float4 position [[position]];\n",
      "    float2 fragTexCoord;\n",
      "    float3 fragPosition;\n",
      "};\n",
      "\n",
      "vertex Vertex_OUTPUT vertex_main(Vertex_INPUT input [[stage_in]]) {\n",
      "    Vertex_OUTPUT output;\n",
      "    output.fragTexCoord = input.texCoord;\n",
      "    output.fragPosition = input.position;\n",
      "    output.position = float4(input.position, 1.0);\n",
      "    return output;\n",
      "}\n",
      "\n",
      "struct Fragment_INPUT {\n",
      "    float2 fragTexCoord [[stage_in]];\n",
      "    float3 fragPosition;\n",
      "};\n",
      "\n",
      "struct Fragment_OUTPUT {\n",
      "    float4 fragColor [[color(0)]];\n",
      "};\n",
      "\n",
      "fragment Fragment_OUTPUT fragment_main(Fragment_INPUT input [[stage_in]]) {\n",
      "    Fragment_OUTPUT output;\n",
      "    float depth = length(input.fragPosition);\n",
      "    float fogFactor = exp(-fogDensity * depth);\n",
      "    float3 finalColor = mix(fogColor, baseColor, fogFactor);\n",
      "    output.fragColor = float4(finalColor, 1.0);\n",
      "    return output;\n",
      "}\n",
      "\n",
      "\n"
     ]
    }
   ],
   "source": [
    "metal_code = crosstl.translate('test.cgl',backend='metal')\n",
    "print(metal_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [],
   "source": [
    "with open(\"test.metal\",'w') as f:\n",
    "        f.write(metal_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 3.2 DirectX (HLSL) Transformation 🎮"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "\n",
      "struct VSInput {\n",
      "    float3 position : POSITION;\n",
      "    float2 texCoord : TEXCOORD0;\n",
      "};\n",
      "\n",
      "struct VSOutput {\n",
      "   float4 position : SV_POSITION;\n",
      "    float2 fragTexCoord : TEXCOORD0;\n",
      "    float3 fragPosition : TEXCOORD1;\n",
      "};\n",
      "\n",
      "VSOutput VSMain(VSInput input) {\n",
      "    VSOutput output;\n",
      "    output.fragTexCoord = input.texCoord;\n",
      "    output.fragPosition = input.position;\n",
      "    output.position = float4(input.position, 1.0);\n",
      "    return output;\n",
      "}\n",
      "\n",
      "struct PSInput {\n",
      "    float2 fragTexCoord : TEXCOORD0;\n",
      "    float3 fragPosition : TEXCOORD1;\n",
      "};\n",
      "\n",
      "struct PSOutput {\n",
      "    float4 fragColor : SV_TARGET0;\n",
      "};\n",
      "\n",
      "PSOutput PSMain(PSInput input) {\n",
      "    PSOutput output;\n",
      "    float depth = length(input.fragPosition);\n",
      "    float fogFactor = exp(-fogDensity * depth);\n",
      "    float3 finalColor = mix(fogColor, baseColor, fogFactor);\n",
      "    output.fragColor = float4(finalColor, 1.0);\n",
      "    return output;\n",
      "}\n",
      "\n",
      "\n"
     ]
    }
   ],
   "source": [
    "hlsl_code = crosstl.translate('test.cgl',backend='directx')\n",
    "print(hlsl_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [],
   "source": [
    "with open(\"test.hlsl\",'w') as f:\n",
    "        f.write(hlsl_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### 3.3 OpenGL (GLSL) Transformation 🖥️"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "#version 450\n",
      "\n",
      "\n",
      "// Vertex shader\n",
      "\n",
      "layout(location = 0) in vec3 position;\n",
      "layout(location = 1) in vec2 texCoord;\n",
      "out vec2 fragTexCoord;\n",
      "layout(location = 0) out vec3 fragPosition;\n",
      "\n",
      "void main() {\n",
      "    fragTexCoord = texCoord;\n",
      "    fragPosition = position;\n",
      "    gl_Position = vec4(position, 1.0);\n",
      "}\n",
      "\n",
      "// Fragment shader\n",
      "\n",
      "in vec2 fragTexCoord;\n",
      "layout(location = 0) in vec3 fragPosition;\n",
      "layout(location = 0) out vec4 fragColor;\n",
      "\n",
      "void main() {\n",
      "    float depth = length(fragPosition);\n",
      "    float fogFactor = exp(-fogDensity * depth);\n",
      "    vec3 finalColor = mix(fogColor, baseColor, fogFactor);\n",
      "    fragColor = vec4(finalColor, 1.0);\n",
      "}\n",
      "\n"
     ]
    }
   ],
   "source": [
    "glsl_code = crosstl.translate('test.cgl',backend='opengl')\n",
    "print(glsl_code)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [],
   "source": [
    "with open(\"test.glsl\",'w') as f:\n",
    "        f.write(glsl_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Step 4: Marvel at the Results 🎉\n",
    "\n",
    "From a single CrossGL source, we've generated shaders for three major graphics APIs!\n",
    "\n",
    "## 🌟 The Power of CrossGL\n",
    "\n",
    "This demo showcases the true potential of CrossGL:\n",
    "- **One Source, Multiple Targets**: Write once, run everywhere.\n",
    "- **Seamless Translation**: Automatic adaptation to platform-specific syntax and features.\n",
    "- **Consistency Across Platforms**: Ensure your shaders behave identically on all supported backends.\n",
    "\n",
    "By leveraging CrossGL, developers can focus on crafting amazing shaders without worrying about platform-specific intricacies. It's not just a translator; it's a bridge to unlimited creative possibilities in the world of graphics programming! 🚀🎨"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "\n",
    "## 🔄 Two-Way Translation: From Platform-Specific to CrossGL\n",
    "\n",
    "CrossGL doesn't just translate from a universal language to platform-specific shaders - it also works in reverse! This powerful feature allows developers to convert existing shaders from various platforms into CrossGL.\n",
    "\n",
    "### Step 5: Reverse Translation 🔀\n",
    "\n",
    "Let's explore how we can convert shaders from Metal, DirectX, and OpenGL back into CrossGL.\n",
    "\n",
    "#### 5.1 OpenGL (GLSL) to CrossGL 🖥️➡️🌐"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "shader main {\n",
      "    vertex {\n",
      "        input vec3 position;\n",
      "        input vec2 texCoord;\n",
      "        output vec3 fragPosition;\n",
      "        output vec2 fragTexCoord;\n",
      "\n",
      "\n",
      "\n",
      "        void main() {\n",
      "         fragTexCoord =  texCoord;\n",
      "         fragPosition =  position;\n",
      "         gl_Position = vec4( position, 1.0);\n",
      "        }\n",
      "    }\n",
      "    fragment {\n",
      "        input vec3 fragPosition;\n",
      "        output vec4 fragColor;\n",
      "        input vec2 fragTexCoord;\n",
      "\n",
      "\n",
      "        void main() {\n",
      "        float depth = length( fragPosition);\n",
      "        float fogFactor = exp(- fogDensity *  depth);\n",
      "        vec3 finalColor = mix( fogColor,  baseColor,  fogFactor);\n",
      "         fragColor = vec4( finalColor, 1.0);\n",
      "        }\n",
      "    }\n",
      "}\n",
      "\n"
     ]
    }
   ],
   "source": [
    "glsl_crossgl_code = crosstl.translate('test.glsl', 'cgl')\n",
    "print(glsl_crossgl_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 5.2 DirectX (HLSL) to CrossGL 🎮➡️🌐"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "shader main {\n",
      "    // Vertex Shader\n",
      "    vertex {\n",
      "        input vec3 position;\n",
      "        input vec2 texCoord;\n",
      "        output vec2 fragTexCoord;\n",
      "        output vec3 fragPosition;\n",
      "        void main() {\n",
      "                        fragTexCoord = texCoord;\n",
      "            fragPosition = position;\n",
      "            gl_Position = vec4(position, 1.0);\n",
      "                    }\n",
      "    }\n",
      "\n",
      "    // Fragment Shader\n",
      "    fragment {\n",
      "        input vec2 fragTexCoord;\n",
      "        input vec3 fragPosition;\n",
      "        output vec4 fragColor;\n",
      "        void main() {\n",
      "                        float depth = length(fragPosition);\n",
      "            float fogFactor = exp(- fogDensity *  depth);\n",
      "            vec3 finalColor = mix( fogColor,  baseColor,  fogFactor);\n",
      "            fragColor = vec4( finalColor, 1.0);\n",
      "                    }\n",
      "    }\n",
      "}\n",
      "\n"
     ]
    }
   ],
   "source": [
    "hlsl_crossgl_code = crosstl.translate('test.hlsl', backend='cgl')\n",
    "print(hlsl_crossgl_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### 5.3 Metal to CrossGL 🍎➡️🌐"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "shader main {\n",
      " \n",
      "    // Vertex Shader\n",
      "    vertex {\n",
      "        input vec3 position;\n",
      "        input vec2 texCoord;\n",
      "        output vec2 fragTexCoord;\n",
      "        output vec3 fragPosition;\n",
      "        void main() {\n",
      "                        fragTexCoord = texCoord;\n",
      "            fragPosition = position;\n",
      "            gl_Position = vec4(position, 1.0);\n",
      "                    }\n",
      "    }\n",
      "\n",
      "    // Fragment Shader\n",
      "    fragment {\n",
      "        input vec2 fragTexCoord;\n",
      "        input vec3 fragPosition;\n",
      "        output vec4 fragColor;\n",
      "        void main() {\n",
      "                        float depth = length(fragPosition);\n",
      "            float fogFactor = exp((- fogDensity) *  depth);\n",
      "            vec3 finalColor = mix( fogColor,  baseColor,  fogFactor);\n",
      "            fragColor = vec4( finalColor, 1.0);\n",
      "                    }\n",
      "    }\n",
      "}\n",
      "\n"
     ]
    }
   ],
   "source": [
    "metal_crossgl_code = crosstl.translate('test.metal', backend='cgl')\n",
    "print(metal_crossgl_code)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### The Power of Two-Way Translation 💪\n",
    "\n",
    "This bidirectional translation capability offers several key advantages:\n",
    "\n",
    "1. **Legacy Code Integration**: Easily incorporate existing shaders from various platforms into your CrossGL workflow.\n",
    "2. **Migration Assistance**: Smoothly transition projects from platform-specific implementations to the universal CrossGL standard.\n",
    "3. **Learning Tool**: Use the translator to understand how platform-specific constructs map to CrossGL, aiding in the learning process.\n",
    "\n",
    "By providing this two-way translation, CrossGL establishes itself as a comprehensive solution for cross-platform shader development, bridging the gap between different graphics APIs and simplifying the shader writing process.\n",
    "\n",
    "## 🎉 Conclusion: The Full Circle of Shader Development\n",
    "\n",
    "We've now seen the complete cycle of CrossGL's capabilities:\n",
    "1. Writing shaders in the universal CrossGL language\n",
    "2. Translating CrossGL to platform-specific shaders (Metal, DirectX, OpenGL)\n",
    "3. Converting existing platform-specific shaders back to CrossGL\n",
    "\n",
    "This full-circle approach empowers developers to work seamlessly across different graphics APIs, promoting code reuse, simplifying multi-platform development, and accelerating the shader creation process.\n",
    "\n",
    "With CrossGL, the future of graphics programming is not just cross-platform - it's boundaryless! 🚀✨\n",
    "```\n",
    "\n",
    "This addition to the notebook showcases CrossGL's ability to convert shaders from different graphics APIs back into its universal language, completing the circle of its translation capabilities. It provides concrete examples for each major platform and explains the benefits of this two-way translation feature."
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.10.14"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}