Heat Conduction in a 2D Fin Tutorial (WebGPU)

This page demonstrates solving the 2D heat conduction fin problem using FEAScript with a WebGPU-accelerated Jacobi solver. For the mathematical formulation and theory, see the basic tutorial.

⚠️ Important: This feature is experimental and requires a browser that supports WebGPU.

WebGPU Implementation

The code below shows how to use FEAScript with the WebGPU-accelerated Jacobi solver. The solution is plotted as a 2D contour.

<body>
  <!-- ...body region... -->
<script type="module">
  // Import FEAScript library
  import { FEAScriptModel, plotSolution, printVersion } from "https://core.feascript.com/src/index.js";
  
  window.addEventListener("DOMContentLoaded", async () => {
      // Print FEAScript version in the console
      printVersion();

    // Create and configure model
    const model = new FEAScriptModel();
    model.setModelConfig("heatConductionScript");
    model.setMeshConfig({
      meshDimension: "2D",
      elementOrder: "quadratic",
      numElementsX: 8,
      numElementsY: 4,
      maxX: 4,
      maxY: 2,
    });

    // Apply boundary conditions
    model.addBoundaryCondition("0", ["constantTemp", 200]); // Bottom boundary
    model.addBoundaryCondition("1", ["symmetry"]); // Left boundary
    model.addBoundaryCondition("2", ["convection", 1, 20]); // Top boundary
    model.addBoundaryCondition("3", ["constantTemp", 200]); // Right boundary

    // Set solver method to use the GPU-accelerated Jacobi solver
    model.setSolverMethod("jacobi-gpu");

    // Solve
    const result = await model.solveAsync();

    // Plot results
    plotSolution(model, result, "contour", "resultsCanvas");
  });
  </script>
  <!-- ...rest of body region... -->
</body>

Results

Below is the 2D contour plot of the computed temperature distribution. This plot is generated in real time using FEAScript.

Solving...